Frontend Build

Features

• Typescript support with Webpack and ESLint
• SCSS support with Webpack

Installation

1. Install the latest LTS version of NodeJS, globally. This will also install npm.
2. Navigate to ui.frontend in your project and run npm install.

Usage

The following npm scripts drive the frontend workflow:

• npm run build - Full build of client libraries with optimizations disabled (tree shaking, etc) and source maps enabled.
• npm run build:prod - Full build of client libraries with optimizations enabled (tree shaking, etc) and source maps disabled.
• npm run start - Starts the development build npm run build in watch mode and syncs changes to your local AEM instance.

General

The ui.frontend module compiles the code under the ui.frontend/src folder and outputs the compiled CSS and JS, and any resources beneath a folder named ui.frontend/dist. Each folder under the src directory should constitute a complete and indipendent clientlib. For example, src/sales and src/care would contain the code (TS and SCSS) required to build each of those areas of the site and may shared code through a third src/shared but always build complete packages with no dependency on one another.

Typescript

JavaScript support has been removed. Only Typescript code should be created under the src directory. This does not mean you cannot use JavaScript libraries and third-party dependencies. You simply must write all of your own scripts in Typescript. This was done to enforce compile-time checks that help eliminate hard to catch bugs in large enterprise applications, such as the T-Mobile site.

• Optimization - for production builds, all scripts and dependencies are tree-shaken meaning unused code is removed.
  • globbing - Globbing, a feature that is normally included with the AEM Maven Archetype has been purposfuly removed because it negatively impacts tree-shaking of code. This means you must import all scripts and styles into a root or main TS file for them to be included in their respective clientlib bundle.

SCSS

• Autoprefixing - all SCSS is run through a prefixer and any properties that require prefixing will automatically have those added in the CSS.
• Optimization - for production builds, all CSS is run through an optimizer.

Client Library Generation

The second part of the ui.frontend module build process leverages the aem-clientlib-generator plugin to move the compiled CSS, JS and any resources into the ui.apps module. The aem-clientlib-generator configuration is defined in clientlib.config.js. When running npm run build, npm run build:prod, or npm run start, the compiles JS, CSS, and any resources will automatically be synced to the ui.apps directory and, if it is running, the local AEM instance.