Creating Maven Project for BE and FE separately. | Community
Skip to main content
R
Rajumuddana
Level 4
June 24, 2025
Solved

Creating Maven Project for BE and FE separately.

  • June 24, 2025
  • 1 reply
  • 610 views

Hi All,

 

  1. I’m looking for best suitable Archetype to create a Multi module Maven project from scratch for AEM 6.5.17. After spent time on Internet I found ‘Archetype 53’  is the best one, because it has addressed issues like “merging velocity templates..” (while running the build), from previous versions. However the folder structure it created is different than my existed Projects. Please let me know your thoughts.
  2. I wanted to create frontend module separately as a new project, for that I followed https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/developing/archetype/front-end ,https://github.com/adobe/aem-react-spa but the results are not same/close to my existed FE project structure.

Please provide your inputs on both cases.

 

Thanks,

Raju.

Best answer by konstantyn_diachenko

Hi @rajumuddana ,

 

The latest version of AEM Archetype is 54. It is a forward-looking, production-ready, and extensible foundation aligned with how Adobe wants developers to structure projects - whether you are on AEM as a Cloud Service or AEM 6.5.17. Adobe tests each archetype version for backward compatibility with AEM 6.5 (especially with SPs like 6.5.17). You won't lose any functionality - but you gain modern tooling.

 

By default it has build-in support for modern frontend workflows and has Webpack 5, Babel, SASS, TypeScript support.

 

You mentioned:

I wanted to create the frontend module separately as a new project, but the results are not the same/close to my existing frontend project structure.

That's fair - and here's your best path forward: Remove the default ui.frontend, add your custom frontend module instead

  1. Generate the project using Archetype 54 with -DincludeFrontendModule=n
    1. This skips the default ui.frontend folder.
  2. Create your own frontend module (e.g., custom-frontend) inside the same Maven multi-module project.
  3. Copy the necessary configuration files from a typical Archetype 54 frontend setup:
    1. webpack.common.js (controls the JS/CSS bundling)
    2. clientlib.config.js (controls copying to AEM's jcr_root)
    3. package.json (ensure you include the right build scripts and dependencies)
    4. pom.xml (configure frontend-maven-plugin for npm install and npm run build)
  4. Adjust clientlib.config.js output to match your desired location
  5. Add your custom module name to the root POM <modules> list.

Optionally: Customize the existing ui.frontend (If you don't want a new module)
If you prefer not to maintain a new Maven module:

  • Keep the default ui.frontend
  • Replace the contents with your desired structure
  • Still reuse the configuration files listed above
  • Adjust clientlib.config.js and webpack.config.js accordingly

But note: separating it into a standalone module gives you better decoupling, especially if your frontend team works independently.

 

You are not forced into a rigid layout - you get flexibility plus structure. The frontend module can live inside or outside the Maven project. Either way, the tooling is already battle-tested and ready for real-world teams.

1 reply

konstantyn_diachenko
Community Advisor
konstantyn_diachenkoCommunity AdvisorAccepted solution
Community Advisor
June 25, 2025

Hi @rajumuddana ,

 

The latest version of AEM Archetype is 54. It is a forward-looking, production-ready, and extensible foundation aligned with how Adobe wants developers to structure projects - whether you are on AEM as a Cloud Service or AEM 6.5.17. Adobe tests each archetype version for backward compatibility with AEM 6.5 (especially with SPs like 6.5.17). You won't lose any functionality - but you gain modern tooling.

 

By default it has build-in support for modern frontend workflows and has Webpack 5, Babel, SASS, TypeScript support.

 

You mentioned:

I wanted to create the frontend module separately as a new project, but the results are not the same/close to my existing frontend project structure.

That's fair - and here's your best path forward: Remove the default ui.frontend, add your custom frontend module instead

  1. Generate the project using Archetype 54 with -DincludeFrontendModule=n
    1. This skips the default ui.frontend folder.
  2. Create your own frontend module (e.g., custom-frontend) inside the same Maven multi-module project.
  3. Copy the necessary configuration files from a typical Archetype 54 frontend setup:
    1. webpack.common.js (controls the JS/CSS bundling)
    2. clientlib.config.js (controls copying to AEM's jcr_root)
    3. package.json (ensure you include the right build scripts and dependencies)
    4. pom.xml (configure frontend-maven-plugin for npm install and npm run build)
  4. Adjust clientlib.config.js output to match your desired location
  5. Add your custom module name to the root POM <modules> list.

Optionally: Customize the existing ui.frontend (If you don't want a new module)
If you prefer not to maintain a new Maven module:

  • Keep the default ui.frontend
  • Replace the contents with your desired structure
  • Still reuse the configuration files listed above
  • Adjust clientlib.config.js and webpack.config.js accordingly

But note: separating it into a standalone module gives you better decoupling, especially if your frontend team works independently.

 

You are not forced into a rigid layout - you get flexibility plus structure. The frontend module can live inside or outside the Maven project. Either way, the tooling is already battle-tested and ready for real-world teams.

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
R
RajumuddanaAuthor
Level 4
June 26, 2025

Hi @konstantyn_diachenko ,

 

Thanks for the response.

I'll use "Archetype 54 with -DincludeFrontendModule=n" to create my BE only AEM project for AEM 6.5.17.

 

Thanks,

Raju.

Terms & ConditionsAccessibility statement

Loading footer...