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
Please use this thread to ask the related questions.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes