Beginners Tutorial: AEM arch type UI Front End Module | Multi Tenancy Theme Support
Вставка
- Опубліковано 17 жов 2024
- #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
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.
Excellent explanation in deed. 👍
How to see if I make changes in text.scss without deploying
thanks man, this video is very useful!
Is it possible to segregate the components js and css in site, so site.css should not contain all components css?
How to implement react and Angular as multi tenant
Awesome Man !!! 👍👍
Very much helpful. Thanks.
How you added aem -sync
thanks a lot, for this video. Super helpfull
Awesome tutorial,
thank you sir😊