Overview
Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next.js) Remote SPAs with editable AEM content using AEM SPA Editor.
This tutorial builds upon the WKND GraphQL App, a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide any in-context authoring of SPA content.
About the tutorial
The tutorial intended to illustrate how a Remote SPA, or a SPA running outside the context of AEM, can be updated to consume and deliver content authored in AEM.
Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. These aspects include defining where the content is authored and stored in AEM and mapping SPA routes to AEM Pages.
The tutorial is designed to work with AEM as a Cloud Service and is composed of two projects:
- The AEM Project contains configuration and content that must be deployed to AEM.
- WKND App project is the SPA to be integrated with AEM’s SPA Editor
Latest code
- The starting point of this tutorial’s code can be found on GitHub in the
remote-spa-tutorialfolder.
Prerequisites
This tutorial requires the following:
This tutorial assumes:
- Microsoft® Visual Studio Code as the IDE
- A working directory of
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial - Running the AEM SDK as an Author service on
http://localhost:4502 - Running the AEM SDK with the local
adminaccount with passwordadmin - Running the SPA on
http://localhost:3000
1. Configure AEM for SPA Editor
AEM configurations are required to integrate the SPA with AEM SPA Editor. These configurations are managed and deployed via an AEM Project. In this chapter, learn about what configurations are necessary and how to define them.
2. Bootstrap the SPA
For AEM SPA Editor to integrate a SPA into it’s authoring context, a few additions must be made to the SPA.
3. Editable fixed components
First, explore adding an editable “fixed component” to the SPA. This illustrates how a developer can place a specific editable component, in the SPA. While the author can change the component’s content, they cannot remove the component or change its placement, positioning, or size.
4. Editable container components
Next, explore adding an editable “container component” to the SPA. This illustrates how a developer can place a container component in the SPA. Container components allow authors to place allowed component in it, and adjust the layout of the components.
5. Dynamic routes and editable components
Lastly, use the concepts explained in previous chapters to dynamic routes; routes that display different content based on the route’s parameter. This illustrates how AEM SPA Editor can be used to author content on routes that are programmatically driven and derived.