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.

Running UI Build:

Follow steps below to run UI Build:

First make sure that NodeJS is installed on the machine and initialize all the dependencies of node packages by running following command at channel level.

npm install or npm i

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/