Adobe Experience Manager (AEM) Maven project for SPA React application

Couple of days back, I was trying to create a project for Adobe Experience Manager (AEM) Maven project as a starting point for my React application. To do this I was using the documentation provided by Adobe. Trust me, it took me some time to create the project for my SPA application using react. I am sharing my experience and what I did to solve the problems I faced.

Please refer following Adobe url for reference. https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/create-project.html?lang=en

I am going to use the same project name and details used in the Adobe document for simplicity. based on your need, you can update the details in Maven archetype is provided in the adobe document and also you see down for the Maven archetype.

Prerequisites (Required software)

• ??????AEM as a Cloud Service SDK,?AEM 6.5.4+?or?AEM 6.4.8+. In my case I used AEM 5.5.9.
• ??????Java
• ??????Apache Maven?(3.3.9 or newer)
• ??????Node.js?and?npm

I will not go into the details of installation. You will find tons of reference document on internet. But drop me a note in case of issue I will certainly try to help. Let now go through the steps for creating a maven archetype project for react SPA application.

Step 1: update the following pom file before running the archetype "C:\Users\Ananya\.m2\repository\org\apache\maven\archetype\archetype-common\3.2.1\archetype-common-3.2.1.pom." update the version from “2.4.16” to 2.4.8”

<dependency
?????<groupId>org.codehaus.groovy</groupId>
?????<artifactId>groovy-all</artifactId>
?????<version>2.4.8</version>
?????<scope>compile</scope>
???</dependency>        

Step 2: Open up a command line terminal (in Administrator mode) and enter the following Maven command:

mvn -B archetype:generate -D archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype -D archetypeVersion=27 -D appTitle="WKND SPA React" -D appId="wknd-spa-react" -D artifactId="aem-guides-wknd-spa.react" -D groupId="com.adobe.aem.guides.wkndspa.react" -D frontendModule="react" -D aemVersion="6.5.5"        

Step 3: You will see that Project is created with error. You will see error something similar to given below:

“error reading .m2\repository\com\adobe\aem\uber-jar\6.5.5\uber-jar-6.5.5.jar; error in opening zip file.”        

Step 4: To fix this issue, go to path “projectPath\reactExample\aem-guides-wknd-spa.react\pom.xml” and update pom.xml file for uber-jer to version 6.5.8. By default you will see version 6.5.5. Following is the updated dependency.

<dependency
????<groupId>com.adobe.aem</groupId>
????<artifactId>uber-jar</artifactId>
????<version>6.5.8</version>
????<scope>provided</scope>
</dependency>         

Note: “reactExample” is the folder where I am creating the project. Please check path in your case.

Step 4: Move inside the SPA project folder (“aem-guides-wknd-spa.react”) in my case and run the following command from CMD (start your CMD in admin mode).

Step 5: wait for this complete. This “mvn clean install” takes around 10 mins to complete depending upon your internet speed. You will see following after successful build.

Step 6: Final step is to Run the following command to build and deploy the entire project to your AEM instance:

That’s it. You will see package deployed to your AEM instance.

Let me know in case of any doubt. Happy Learning!