Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

AEM 6550 - Create a sample SPA React App using AEM SPA Editor | AEM Community Blog Seeding

Community Manager
Community Manager


AEM 6550 - Create a sample SPA React App using AEM SPA Editor by Sreekanth Choudry Nalabotu


This tutorial on official adobe docs is an excellent guide for creating your first AEM SPA React App, however if you are looking for some quick steps, go through the following...

1) Create the project structure (for both React SPA and traditional authoring) with the following command using maven archetype -
mvn -B archetype:generate -D archetypeGroupId=com.adobe.granite.archetypes -D archetypeArtifactId=aem-project-archetype
-D archetypeVersion=23 -D aemVersion=6.5.0 -D appTitle="Experience AEM SPA React" -D appId="eaem-sites-spa-how-to-react" -D groupId="com.eaem"
-D frontendModule=react -D includeExamples=n -D includeErrorHandler=n -D includeDispatcherConfig=n

2) The argument -D frontendModule=react in above command creates a ui.frontend folder with a react app (and sample components) adding the following AEM SPA editor npm dependencies in ui.frontend/package.json

"scripts": {
"build": "react-scripts build && clientlib",
"sync": "aemsync -d -w ../ui.apps/src/main/content"

"dependencies": {
"@adobe/cq-react-editable-components": "^1.2.0",
"@adobe/cq-spa-component-mapping": "^1.0.3",
"@adobe/cq-spa-page-model-manager": "^1.1.0",
"devDependencies": {
"aem-clientlib-generator": "^1.5.0",
"aemsync": "^4.0.0",

3) If you are not using maven archetype or a prebuilt package.json, but creating the structure on your own, you'd probably be executing the following commands....

a. Install latest version of Node and NPM from
b. Install create-react-app npm install --g create-react-app
c. Create the react app create-react-app eaem-sites-spa-how-to-react
d. Quick build check npm run build
e. Install the AEM client lib generator npm install aem-clientlib-generator --save-dev
f. Check the clientlib configuration in eaem-sites-spa-how-to-react\clientlib.config.js
g. Edit package.json in the eaem-sites-spa-how-to-react to update the build command. "build": "react-scripts build && clientlib"
g. Install AEM JS SDK for SPA editor
npm install @adobe/cq-spa-component-mapping
npm install @adobe/cq-spa-page-model-manager
npm install @adobe/cq-react-editable-components
i. Install react router dependencies
npm install --save react-router
npm install --save react-router-dom
i. Install aem sync npm install -g aemsync

Read Full Blog

AEM 6550 - Create a sample SPA React App using AEM SPA Editor


Please use this thread to ask the related questions.


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

0 Replies