The goal for this multi-part tutorial is to teach a developer how to implement a Single Page Application that can edited in Adobe Experience Manager (AEM) with the SPA Editor. The tutorial covers the end to end creation of the SPA and the integration with AEM.
In a real-world scenario the development activities will be broken down by persona, often involving a Front End developer and a Back End developer. Each task in the tutorial is labeled with a persona to gain a better idea of the separation of development activities. The tutorial is designed so that anyone can complete it end to end, however if a user wishes he or she can jump in to the tutorial at any stage.
The implementation is designed to work on AEM 6.4 + SP2. The SPA implemenation is built using the React JS framework. An equivalent tutorial and implementation using Angular will be available in the near future. The following modern web development tools are also used in the tutorial:
More parts of the tutorial are expected to be added in the near future, including:
- Building a custom Map component using Google Maps API
- Integration of Content Fragments
- Extending the List Component
To test the latest code before jumping into the tutorial, download and install the below packages on a local AEM instance:
All of the code for the project can be found on Github in the Adobe Experience Cloud organization:
In addition, each chapter of the tutorial has its own branch in GitHub. A user can begin the tutorial at any point by simply checking out the branch that corresponds to the previous part.
Any issues or problems with the tutorial please create an Issue on Github.
A local development environment is necessary to complete this tutorial. Screenshots and video are captured from a Mac OS environment but the commands and code used should be independent of the local operating system, unless otherwise noted.
The following should be installed:
Start by double checking that the above tools have been installed and available via the command line path. Open up a new terminal and run the following commands:
$ java -version java version "1.8.+" Java(TM) SE Runtime Environment (build 1.8.0_111-b14) Java HotSpot(TM) 64-Bit Server VM (build 25.111-b14, mixed mode) $ mvn -version Apache Maven 3.3.9 Maven home: /Library/apache-maven-3.3.9 Java version: 1.8.0_111, vendor: Oracle Corporation Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/jre $ node --version v10.8.0 $ npm --version 6.2.0
Integrated Development Environments
Popular IDEs like Eclipse, IntelliJ, and Visual Studio code can be used when developing with AEM. See the following resources for setting these tools up locally:
Start the tutorial!