SPA in AEM 6.5 Part 1
What is SPA?
SPA stands for single page application. It is a new feature in AEM 6.5 which helps us to build single page applications using react or angular with AEM.
How SPA works in AEM?
Let’s understand the flow using this diagram —
We have an AEM Component in which we can have nodes but no script (.html, etc.) in it .i.e. component html file.
And Corresponding to that we will make a spa component using react or angular. We will use
MapTo function to make a relationship between React/Angular and AEM components.
Here is the mapping signature –
export default MapTo(‘<path of your aem component>’)(<SPA component Name>,<SPA component config>)
Here is the example :
export default MapTo(‘testspa/components/content/my-app’)(My-App, editConfig);
We make a sling model of AEM Component in which is basically a sling exporter. AEM component runs server side and exposes content in form of json model api i.e. when we apply .model.json in component content path, it will give us json data.
And the Json content is then consumed by the SPA component which runs client side.
There is also a sync between two components i.e. when you author an AEM component then it will automatically be updated in the react server.
Which archetype to use?
Use this archetype because it will contain a specific module for ex.
If you choose to react then it will create a specific AEM + React project for you.
mvn archetype:generate \
-DarchetypeCatalog=remote \
-DarchetypeGroupId=com.adobe.cq.spa.archetypes \
-DarchetypeArtifactId=aem-spa-project-archetype \
-DarchetypeVersion=4.0.0
But you can also use other archetypes to make an AEM 6.5 project also. But this is recommended for using SPA with AEM.
How to create a SPA project?
Using the above archetype to make an AEM project .
Lets see how to create a project using AEM + React. But before using this archetype some requirements are to be fulfilled.
- Java 8 or higher
- Maven 3.5 or higher
- AEM 6.4.7+ or 6.5.3+
After running above command it will ask you some detail same as of aem project
groupId
optionFrontend
projectName
artifactId
package
If you want to use the default value as shown then press enter, otherwise use any name,
But we do not use ‘-’ in package name so I am using com.testspa as package name.
projectTitle → You can use space in Project Title.
componentGroup
After that choose Y if all the values you have entered are correct.
If the BUILD SUCCESS message is written on the terminal then your project is created.
Project Folder
Here you will get a react-app module to make your frontend components using react.
After opening your project in the code editor run command inside the testspa folder.
NOTE -> (Make sure that your AEM 6.5 instance is up)
mvn clean install -PautoInstallPackage -Padobe-public
(It will download package and build both AEM and react module)
@Reference
Recent Comments