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

⭐⭐⭐⭐

Rating: 4 out of 5.

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.

Folder structure after build

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.

Props fetched and library used

Below is the code snippet that we can use to generate the JSON using sling model that can be used to provide the props to the react component for rendering.

@Model(adaptables = SlingHttpServletRequest.class, adapters = {
        ComponentExporter.class }, resourceType = Title.RESOURCE_TYPE, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)
public class Title implements ComponentExporter {


    public static final String RESOURCE_TYPE = "mycompany/components/content/title";

    @ValueMapValue
    private String title;
 
    @Override
    public String getExportedType() {
        return RESOURCE_TYPE;
    }

    public String getTitle() {
        return title;
    }
}

Important point here is that the language page i.e en.html should be created with Root template and the child pages should use the content template. The reason being all the JSON gets loaded at the page which we define as the root page.
So, if you open any page under /content/mycompany/us/en it will load us.model.json
And it will have whole JSON of the site loaded at once.
To verify that you can expand the :children property and can see the JSON of all the childpages under en page.

Try creating some pages under /content/mycompany/us/en and try redirecting between the pages, you will notice that there no page load and content loads really fast.

NOTE : If your page is not loading then check for the :path variable, as this should match with the URI that you are hitting in the browser. In earlier archetype we had something called HierarchyPageImpl.java to handle this :path parameter by making changes to the getExportedType function.

Article on migration from AEM 6.4 to AEM 6.5.5 is in progress, subscribe and follow and get the updates through email for new topics.



Reference : AEM Archetype Adobe