Create your first React SPA in AEM overview
Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of AEM.
WKND SPA Implementation
About
The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6.5.4+ and AEM 6.4.8+.
Latest Code
All of the tutorial code can be found on GitHub.
The latest code base is available as downloadable AEM Packages.
Prerequisites
Before starting this tutorial, you’ll need the following:
- A basic knowledge of HTML, CSS, and JavaScript
- Basic familiarity with React
While not required, it is beneficial to have a basic understanding of developing traditional AEM Sites components.
Local Development Environment local-dev-environment
A local development environment is necessary to complete this tutorial. Screenshots and video are captured using the AEM as a Cloud Service SDK running on a Mac OS environment with Visual Studio Code as the IDE. Commands and code should be independent of the local operating system, unless otherwise noted.
Required software
- AEM as a Cloud Service SDK, AEM 6.5.4+ or AEM 6.4.8+
- Java
- Apache Maven (3.3.9 or newer)
- Node.js and npm
Next Steps next-steps
What are you waiting for?! Start the tutorial by navigating to the Create Project chapter and learn how to generate a SPA Editor enabled project using the AEM Project Archetype.