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:

  1. The AEM Project contains configuration and content that must be deployed to AEM.
  2. 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-tutorial folder.

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 admin account with password admin
  • Running the SPA on http://localhost:3000
NOTE

Need help with setting up your local development environment? Check out the following guide to setting up a local development environment using the AEM as a Cloud Service SDK.

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.

Additional resources

On this page