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

[kautuk_sahni]

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

Abstract

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 - https://github.com/adobe/aem-project-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 https://nodejs.org/en/
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

Q&A

Please use this thread to ask the related questions.