AEM + SPA React

AEM + SPA React – Getting Started
Hi everyone! Today we are going to review one of the hottest topics in the AEM world these days: Single Page Applications (SPA) and the brand new SPA Editor that is included in AEM 6.4 Service Pack 2.

If we are talking about building Web Sites, SPA apps are in the crest of the wave right now.

What is a SPA, you may wonder? In short, an application that actually does have only one HTML page. This is possible due to various JS frameworks that manage the content and the navigation and get the content for each “page” without doing a full page reload.

So, why use SPA architecture, and why combine it with AEM?
First of all, a SPA architecture means that only the first HTML is requested. All the data needed from the server (in AEM, this can be a new page when navigation occurs) is loaded via ajax requests, reducing waiting times considerably. In terms of app deployment, the app would be simpler because, taking apart the server, the app would consist of an HTML file, one JS bundle, one CSS bundle, and required assets such as logos and images. On the development side, once the SPA app is configured, it allows keeping the backend/AEM development apart from the frontend development. Thus, making the job easier for a non-AEM frontend developer to contribute to an AEM project.

Ok, but how are SPA’s related to AEM?
The recently released AEM 6.4.2.0 version (AEM 6.4 with Service pack 2) brings us an awesome new feature called “SPA Editor”. This new feature allows us, after a small amount of configuration, to create (and author) AEM/SPA components! In this way, we can now have a SPA as an AEM Site, their components AEM part as usual (component node, dialog, and backend model), along with a JS framework component to manage everything else. AEM authoring remains pretty similar to what we know for regular AEM sites.

So far, we saw what a SPA app is and why to use it. In the next section, we are going to review how to get started and add a SPA app into your project.
AEM SPA React app – Creation…

To save some time, we are starting on top of an AEM Maven Project using the latest archetype. Also, we’ll be using React as the SPA framework. If you’re not familiar with React, here is a good place to start: https://reactjs.org/tutorial/tutorial.html. We are using react, so you will need Node.js and npm. But for this project, we are using a tool called npx – an easier way to manage our npm packages. In addition to that, you will need to have Java 1.8 and Maven 3.3.1+. Here’s an example of the versions used for this article:


First of all, let’s create an empty maven module named “react-app” into our project. Once created, delete the src folder within the module folder. The module will wrap the React SPA app.

The next step is to create the react app. For this purpose, we are using the create-react-app tool that explained here: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app. Open a command console with administrator/sudo privileges and stand in the react-app module’s folder.
The command is “npx create-react-app react-app” and, after you execute it, you will see a new “react-app” folder containing all the react projects.

The third step consists of moving all generated files from the generated folder to the base folder of the module; the structure so far will look like this:



Now, let’s add the pom.xml to integrate it with the rest of the project. Breaking down a little of what is needed, here are some properties we will use:


Then, we only configure one plugin and one profile for this project. The plugin is the frontend-maven-plugin and should be configured like this:



And the profile:



These configurations will allow us to generate clientlibs containing our react-app, which is one of our final goals in making our SPA app get into an AEM Site.

In addition, we will be using a babel and webpack. In the webpack.config.js is important to set the output to the “dist” folder, and create that folder in the base folder of the react project. In the rules, we specify to take .js, .css, and .svg into account and the plugins section of webpack.config.js should look like this:



The next step is adding a clientlib.config.js file, which compliments the plugins we added before in our pom.xml. An example of how it should look like:



Lastly, in the react project, we add the required dependencies to make the react components work with AEM. In the package.json, add these dependencies:

“@adobe/cq-react-editable-components”: “~1.0.0-rc.2”,
“@adobe/cq-spa-component-mapping”: “~1.0.0-rc.3”,
“@adobe/cq-spa-page-model-manager”: “~1.0.0-rc.3”,

That does the work for the react app part. Now, let’s configure the project in order to use it.
General configurations

First of all, add the react-app module as a child in the general pom.xml of the whole project, and once you are in there, check if you have these dependencies:



Now, we do the foundation in the ui.apps project to allocate our SPA app. Create a react folder within your project folder in apps, and then two sub-folders named “clientlibs” and “components”. In the components one, we are going to add two components, “app” and “page”. For both, the componentGroup property equals “.hidden”. For the page component, the sling:resourceSuperType=”core/wcm/components/page/v2/page” and for the app one the resourceSuperType is the page component’s path. For the page component, we are overlaying three .html files:

body.html


customfooterlibs.html


customheaderlibs.html

As you can see from the last HTML markup, it references a sling model. For that, we based it on the one the We Retail Journal project provides. From here, we copy the HierarchyPage and HierarchyPageImpl classes.



The only thing we need to change here is, in HierarchyPageImpl, the “RESOURCE_TYPE” constant and put the page component’s path, i.e.: “conexio/react/components/structure/page”.

And lastly, add a couple of editable templates: one with the app component and the other one with the page component.