Learn how to use an Adobe Experience Manager (AEM) Maven project as a starting point for a React application integrated with the AEM SPA Editor.
In this chapter, a new AEM project will be deployed, based on the AEM Project Archetype. The AEM project will be bootstrapped with a very simple starting point for the React SPA. The project used in this chapter will serve as the basis for an implementation of the WKND SPA and will be built upon in future chapters.
Starting site hierarchy for the WKND SPA.
Review the required tooling and instructions for setting up a local development environment. Ensure that a fresh instance of Adobe Experience Manager, started in author mode, is running locally.
There are several options to create a Maven Multi-module project for AEM. This tutorial used the latest AEM Project Archetype as a basis for the tutorial code. Modifications have been made to the project code in order to support multiple versions of AEM. Please review the note about backward compatibility.
It is a best practice to use the latest version of the archetype to generate a new project for a real-world implementation. AEM projects should target a single version of AEM using the
aemVersion property of the archetype.
Download the starting point for this tutorial via Git:
$ git clone email@example.com:adobe/aem-guides-wknd-spa.git $ cd aem-guides-wknd-spa $ git checkout React/create-project-start
The following folder and file structure represents the AEM Project that was generated by the Maven archetype on the local file system:
|--- aem-guides-wknd-spa |--- all/ |--- core/ |--- dispatcher/ |--- ui.apps/ |--- ui.apps.structure/ |--- ui.content/ |--- ui.frontend / |--- it.tests/ |--- pom.xml |--- README.md |--- .gitignore |--- archetype.properties
The following properties were used when generating the AEM project from the AEM Project archetype:
|appTitle||WKND SPA React|
frontendModule=react property. This tells the AEM Project Archetype to bootstrap the project with a starter React code base to be used with the AEM SPA Editor.
Next, compile, build, and deploy the project code to a local instance of AEM using Maven.
Ensure an instance of AEM is running locally on port 4502.
From the command line terminal verify that Maven is installed:
$ mvn --version Apache Maven 3.6.2 Maven home: /Library/apache-maven-3.6.2 Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home
Run the below Maven command from the
aem-guides-wknd-spa directory to build and deploy the project to AEM:
$ mvn clean install -PautoInstallSinglePackage
If using AEM 6.x:
$ mvn clean install -PautoInstallSinglePackage -Pclassic
The multiple modules of the project should be compiled and deployed to AEM.
[INFO] Reactor Summary for wknd-spa-react 1.0.0-SNAPSHOT: [INFO] [INFO] wknd-spa-react ..................................... SUCCESS [ 0.523 s] [INFO] WKND SPA React - Core .............................. SUCCESS [ 8.069 s] [INFO] wknd-spa-react.ui.frontend - UI Frontend ........... SUCCESS [01:23 min] [INFO] WKND SPA React - Repository Structure Package ...... SUCCESS [ 0.830 s] [INFO] WKND SPA React - UI apps ........................... SUCCESS [ 4.654 s] [INFO] WKND SPA React - UI content ........................ SUCCESS [ 1.607 s] [INFO] WKND SPA React - All ............................... SUCCESS [ 0.384 s] [INFO] WKND SPA React - Integration Tests Bundles ......... SUCCESS [ 0.770 s] [INFO] WKND SPA React - Integration Tests Launcher ........ SUCCESS [ 1.407 s] [INFO] WKND SPA React - Dispatcher ........................ SUCCESS [ 0.055 s] [INFO] ---------------------------------------------------------------------
[INFO] BUILD SUCCESS [INFO] ---------------------------------------------------------------------
[INFO] Total time: 01:44 min