Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.

Multi Tenancy Theme Support For UI Frontend Module - Adobe Experience Manager(AEM) | AEM Community Blog Seeding




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


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.

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.

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

Image for post
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)

const SITE_1='/site1';
const SITE_2='/site2';
entry: {
site1: SOURCE_ROOT + SITE_1 +'/site/main.ts',
site2: SOURCE_ROOT + SITE_2 +'/site/main.ts'
},output: {
filename: (chunkData) => {
return chunkData.chunk.name === 'dependencies' ? 'clientlib-dependencies/[name].js' : 'clientlib-[name]/[name].js'; }
plugins: [
new CleanWebpackPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new MiniCssExtractPlugin({
filename: 'clientlib-[name]/[name].css'
new CopyWebpackPlugin([
{ from: path.resolve(__dirname, SOURCE_ROOT + SITE_1 +'/resources/'), to: './clientlib-site1'},
{from: path.resolve(__dirname, SOURCE_ROOT + SITE_2 +'/resources/'), to: './clientlib-site2'}
Enable the static HTML for testing different sites through webpack server by default the configurations are enabled to support a single tenant.

Read Full Blog

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


Please use this thread to ask the related questions.

Kautuk Sahni

Topics help categorize Community content and increase your ability to discover relevant content.

2 Replies


Level 3

Is there an example of this perhaps on github?  What about splitting chunks?  How can that be integrated?




Level 3

Tried clone of https://github.com/techforum-repo/youttubedata/tree/master/aem/multisitefrontenddemo as mentioned in this article.  Can update site1.html, site2.html interactively when running npm run start from frontend module, however, npm run aem-sync has an error.  Do you know what might be causing it?




Targets: http://admin:admin@localhost:4502
Proxy port: 3000
Interval: 100
Something missing or not working as expected, open an issue on GitHub: https://github.com/abmaonline/aemfed/issues
Scanning: C:\training\youttubedata\aem\multisitefrontenddemo\ui.apps\src\main\content\jcr_root ...
Awaiting changes ...
Get state for all instances: 54 ms

Read file tree: 86 ms
TRYREADFILE WARN COULD NOT READ FILE C:\training\youttubedata\aem\multisitefrontenddemo\ui.apps\src\main\content\jcr_root\libs\wcm\foundation\clientlibs\grid\grid_base.less
Build style tree: 98 ms