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.
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:
remote-spa-tutorial
folder.This tutorial requires the following:
This tutorial assumes:
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial
http://localhost:4502
admin
account with password admin
http://localhost:3000
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.
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.
For AEM SPA Editor to integrate a SPA into it’s authoring context, a few additions must be made to the SPA.
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.
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.
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.