Create a UI App

What is a UI App?: A UI App is a microfrontend application built using modern web technologies such as Angular or React. Such application is designed to seamlessly integrate with the OneCX platform, providing a consistent user experience across different modules and features.

Within the OneCX ecosystem, a UI App typically serves as the front-end interface for users to interact with various functionalities offered by OneCX. It can be a standalone application or part of a larger suite of applications, and it communicates with backend services to fetch and display data, handle user inputs, and perform various operations.

The UI App created with the OneCX App Generator is only the base of a functional application.
You will need to further develop and customize the application to meet your specific requirements and business logic.

Generate a UI App

The generator supports three flavors of projects: angular, with NgRx and without NgRx.
It is recommended to use the NgRx flavor, because it leads to better structured projects and the state management is already in place.

Generate the UI App with following commands

npx <namespace>/create-workspace <flavor> <product>
cd <product>
npm install

with:

<namespace>	The base namespace of the project where the application is part of. For the OneCX, use `@onecx`.
<flavor>	`ngrx` (or `angular`).
<product>	The technical name of the application (product) for a certain business case. E.g. `bookstore` for an application named "Book Store".

The generator will create a new workspace folder with the specified product name and set up the OneCX UI App according to the chosen flavor.
Next step may create a feature module.

The generated app contains the dependency for the OneCX Nx Plugin.
This allows you to easily add new features, components, and services within your app’s user interface using the OneCX Nx plugin functions..

Example

Create a UI App named "bookstore" with NgRx support

npx @onecx/create-workspace ngrx bookstore
cd bookstore
npm install

This command will generate a new workspace folder named "bookstore" with the necessary structure and configurations for a OneCX UI App using NgRx.

Figure 1. Excerpt of generated files and directories for the NgRx bookstore UI App