This topic provides information on User Interface Build.

The current GUI build is based on Webpack.

Webpack is a free, open-source JavaScript module bundler. It can also be used with HTML and CSS. Webpack is primarily used for JavaScript, but it can also transform front-end assets like HTML, CSS, and images.

The tasks performed during a typical GUI build are:

• Toolkit Component generation from metadata
• Pre Build checks (For some development rules)
• ESLint for the JS files.
• SCSS compilation to CSS
• CSS optimization
• HTML validation
• JS minification and bundling.

App Shell Lib dependencies:

The UI patch relies on two modules: app-shell and cmc-component-server. These components are necessary to load OBRH (Routing Hub) in the OBDX UI for admin. Once installed, additional access control can be managed through Role Maintenance.

The patch will have Appshelllib.zip.

Unzip that at channel level.

Running UI Build:

Follow steps below to run UI Build:

Ensure that the Swagger documentation (JSON) is hosted and accessible on a server.

In the channel directory, locate the swagger/mapping.json file and change all occurrences of the Swagger documents to the URL of the locally hosted server.

Place obdx-ui-workbench-code-generator, obdx-ui-workbench-core as sibling directory to channel, thus making all three directories in the same level.

In the channel/package.json file, remove @obdx/obdx-ui-workbench-code-generator, @obdx/uiworkbench-core , @obdx/app-shell, and @obdx/cmc-component-server.

Initialize all the Node package dependencies by running the following command at the channel level:

npm install or npm i

npm link ../obdx-ui-workbench-core ../obdx-ui-workbench-code-generator ../app-shell ../cmc-component-server.

For Build run following command.

npm run build

It run all the required commands for build and output is stored in dist folder.

The others commands are available for build if user wants to run individual commands

npm run start

It is used in development workspace for developer. It build all the resources and open a dev server for the development.

npm run codegen

It generates delta component from last build from toolkit manifest.

npm run codegen-all

It generates all the components from toolkit manifest.

npm run webpack-build

Run webpack build in production mode.

npm run webpack-dev

Run webpack build in development mode.

npm run lint

Run all the lint task such as eslint, html-validate and pre build checks

npm run eslint

Run the eslint task for manual components.

npm run eslint-toolkit

Run eslint task for toolkit components

npm run html-validate

Run HTML validate task.

npm run widget-manifest-gen

Generates widget manifest from all widgets component.

Webpack configurations are maintained under following files:

• scripts/webpack/webpack.common.js

All the common webpack configurations applicable in all the build.

• scripts/webpack/webpack.prod.js

Webpack Configuration applicable for production build.

scripts/webpack/webpack.dev.js

Webpack Configuration applicable for development build.

For detail webpack configuration please refer: https://webpack.js.org/concepts/