AEM SPA (React) Project setup and component integration walk through | AEM 6.5.5 | AEM Community Blog Seeding

AEM SPA (React) Project setup and component integration walk through | AEM 6.5.5 by Nikhil

Abstract

In this article we will setup our AEM SPA project using the archetype 23.
Use the below maven command to create your AEM project and then follow the setup procedure to import in your IDE for further development.

mvn -B archetype:generate \
-D archetypeGroupId=com.adobe.granite.archetypes \
-D archetypeArtifactId=aem-project-archetype \
-D archetypeVersion=23 \
-D aemVersion=cloud \
-D appTitle="My Company" \
-D appId="mycompany" \
-D groupId="com.mycompany" \
-D frontendModule=general \
-D includeExamples=n
Provide frontendModule as react, as we are building a SPA project with react implementation. We will get the corresponding folders applicable for react along with our AEM code folders.

Now we can start creating the components in AEM and rendering will be handles by the react end.

React components are placed at ..\ui.frontend\src\components and we have Text OOTB component which is integrated to the AEM component, mapping is done through MapTo parameter in the JS file.

It is mapped to Text component of AEM
Similarly we can create our own react component and Map it to a AEM component and list it in the import-components.js file present inside the components folder in react.

It imports the library in react which enables us to access the Aem component variables in react as props. And this done using sling model, where we expose these parameters in form JSON usinf JSON exporter.

Read Full Blog

AEM SPA (React) Project setup and component integration walk through | AEM 6.5.5

Q&A

Please use this thread to ask the related questions.