Sunday, February 7, 2021

Multi Tenancy Theme Support For UI Frontend Module - Adobe Experience Manager(AEM)

The AEM Project Archetype includes an optional, dedicated front-end build mechanism based on Webpack. The ui.frontend module is the central location for all of the project’s front-end resources including JavaScript and CSS files. The client library is generated through aem-clientlib-generator npm module and placed under ui.apps module during the build process.

Image for post

The current module structure shown below supports the front-end components for single-tenant/theme, the module can be duplicated to support multiple tenants but that will create constraints to manage also impact the overall deployment timeline.

Image for post

In this tutorial let us see how to enable the front end module to support multiple tenants/themes. The new module structure is as below.

Image for post

The final client libraries are generated in the below structure

Create the theme/tenant specific folders under (copy the default content under webpack to the site-specific folders)

/ui.frontend/src/main/webpack/site1, /ui.frontend/src/main/webpack/site2 etc

The default webpack.common.js is enabled to support a single entry(tenant), enable the required configurations to support additional tenants(e.g site1, site2, etc)

Enable the static HTML for testing different sites through webpack server by default the configurations are enabled to support a single tenant.

Enable the required configurations to generate the client library for different websites —, site1.dependencies,, site2.dependencies, etc

The default client library path can be overridden using outputPath e.g. outputPath: CLIENTLIB_DIR+’/clientlib-site2'

Now the style for different sites can be tested through a static index.html file

The site-specific static files can be accessed through

The browser tabs will be reloaded on style/script changes.

The site-specific client libraries can be enabled through editable template policy or through page rendering components.

Image for post

The sample project is also enabled with webpack watch and aemfed to deploy/test the style/script changes quickly.

Now the AEM pages can be accessed through the proxy — the changes will be synced to AEM and the browser tab reloads, the webpack proxy inject the local CSS and js files to the AEM pages.


To deploy the final changes to AEM, navigate to project root folder and execute mvn -PautoInstallSinglePackage clean install — compile the front end module and generate the client libraries to ui-apps and deploy the complete package to AEM

The style/scripts specific to multiple tenants can be managed through a single front-end module, the site specific client libraries are generated and deployed through Maven build to the AEM server. The Webpack server, watch, aemsync, browsersync, aemfed tools can be used for testing the frontend changes quickly from the local machine.

Refer to for sample front end module enabled with multi-site support( demo is built based on archetype 24 and AEM as cloud service SDK).


No comments:

Post a Comment