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 SPA (React) Project setup and component integration walk through | AEM 6.5.5 | AEM Community Blog Seeding

kautuk_sahni
Community Manager
Community Manager

BlogImage.jpg

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.

Topics

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

0 Replies