Beginners Tutorial: AEM arch type UI Front End Module | Multi Tenancy Theme Support

#aem #aemdeveloper #frontend
Beginners Tutorial: AEM arch type UI Front End Module | Multi Tenancy Theme Support
Demo Project - github.com/tec...
The latest AEM Project Archetype includes an optional, dedicated front-end module based on Webpack build mechanism.
The ui.frontend module is the central location for all of the project’s front-end resources including JavaScript and CSS files.
UI Frontend Module - Features
Full TypeScript, ES6 and ES5 support (with applicable Webpack wrappers)
TypeScript and JavaScript linting using a TSLint rule set
ES5 output, for legacy browser support
Globbing
No .content.xml or js.txt/css.txt files are needed as everything is run through Webpack.
Chunks - Main (site js/css) & Vendors (dependencies js/css)
Full Sass/Scss support (Sass is compiled to CSS via Webpack)
Static webpack development server with built in proxy to a local instance of AEM
Optimization
UI Frontend Module - Tools
Node JS - Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the Chrome V8 engine and executes JavaScript code outside a web browser
NPM - npm is a package manager for the JavaScript programming language
webpack - webpack is an open-source JavaScript module bundler.
webpack-dev-server - Use webpack with a development server that provides live reloading.
babel - Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.
eslint - ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
typescript - TypeScript is a programming language developed and maintained by Microsoft.TypeScript extends JavaScript by adding types to the language
sass/scss - Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. SCSS refers to the main syntax supported by the Sass CSS pre-processor.
aemfed - listening for file changes, uploading them to the running AEM instance, triggering a refresh of the styling in the browser
aem-clientlib-generator - A node plugin that creates ClientLib configuration files for AEM Client Libraries
UI Frontend Module - Configurations
components - Component specific CSS and JS
resources - images and fonts
site - site specific styles, configurations to pull component styles and JS
static - static HTML, This allows a developer to make CSS/JS changes and see them immediately reflected in the markup.
clientlib.config.js - configurations for aem-clientlib-generator module
webpack.common.js - webpack common configurations
webpack.dev.js - dev-only webpack config file that share webpack.common.js
webpack.prod.js - prod-only webpack config file that share webpack.common.js
.eslintrc.js - configuration file for eslint
tsconfig.json - specify the root level files and the compiler options that requires to compile a TypeScript project
package.json - metadata relevant to the project and it is used for managing the project's dependencies, scripts, version
UI Frontend Module - Installation
Install NodeJS (v10+), globally. This will also install npm
Navigate to ui.frontend in your project and run npm install
npm run dev - Full build of client libraries with JS optimization disabled (tree shaking, etc) and source maps enabled and CSS optimization disabled.
npm run prod - Full build of client libraries build with JS optimization enabled (tree shaking, etc), source maps disabled and CSS optimization enabled.
npm run start - Starts a static webpack development server for local development with minimal dependencies on AEM.
Maven - Navigate to ui.frontend in your project and run mvn clean install - compile the front end module and generate the client libraries to ui-apps, no deployment to AEM
Navigate to project root folder mvn -PautoInstallSinglePackage clean install - compile the front end module and generate the client libraries to ui-apps and deploy the complete package to AEM

[@chinnysrilanka7242]

Excellent explanation in deed. 👍

[@naveenkvs1559]

Can we use .js files in ui.frontend along with .ts files and how to add a js file to a specific component. Let's say I have a header component and I want to add js in clientlibs of header, how do i add this in ui.frontend.

[@homerfvillanueva]

thanks man, this video is very useful!

[@pradeepingle7013]

Very much helpful. Thanks.

[@vinicius.maciel]

thanks a lot, for this video. Super helpfull

[@vedprakash7585]

Awesome Man !!! 👍👍

[@priyankakhatri2917]

How to see if I make changes in text.scss without deploying

[@ALostEngineer]

Awesome tutorial,

[@naveenvoruganti88]

How to implement react and Angular as multi tenant

[@NaincyGuptaTechSharing]

Is it possible to segregate the components js and css in site, so site.css should not contain all components css?

[@priyankakhatri2917]

How you added aem -sync

[@ViralVideos-d6d]

thank you sir😊