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

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)$'): react
Define value for property 'projectName' (should match expression '^[a-zA-Z0-9\_]+$'): project-site
Value does not match the expression, please try again: ProjectSite
Define value for property 'artifactId' (should match expression '^[a-zA-Z0-9\.\-_]+$') ProjectSite: : project-site
[INFO] Using property: version = 1.0.0-SNAPSHOT
Define value for…