How to build a new project in AEM with React as frontend

Suren K
Adobe Experience Manager
2 min readApr 13, 2020

--

We can build projects for AEM with a SPA(Single Page Application) as frontend (can use either Angular or React).

There is a specific folder structure that AEM requires projects to be built. Using an Archetype to build the codebase is the best and recommended option. Adobe has AEM SPA Project Archetype for this.

This may old (Stopped since Nov 2019), the new Archetype 23 (as of this writing) have some critical project build issues (Issues: 371, 366)

1. Run AEM SPA Project Archetype

mvn archetype:generate \
-DarchetypeCatalog=remote \
-DarchetypeGroupId=com.adobe.cq.spa.archetypes \
-DarchetypeArtifactId=aem-spa-project-archetype \
-DarchetypeVersion=4.0.0

2. Options

Define value for property 'groupId' (should match expression '^[a-zA-Z0-9\.\-_]+$'): com.project.aem Define value for property 'optionFrontend' (should match expression '^(angular|react)$'): reactDefine value for property 'projectName' (should match expression '^[a-zA-Z0-9\_]+$'): project-siteValue does not match the expression, please try again: ProjectSiteDefine value for property 'artifactId' (should match expression '^[a-zA-Z0-9\.\-_]+$') ProjectSite: : project-site[INFO] Using property: version = 1.0.0-SNAPSHOTDefine value for…

--

--

Suren K
Adobe Experience Manager

Software Engineering Manager, Programmer, Architect, Inventor, Speaker and Writer. Works @Capgemini https://surenk.com