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.
The tutorial is designed to work with AEM as a Cloud Service and is composed of two projects:
This tutorial requires the following:
This tutorial assumes:
adminaccount with password
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.
Quick Setup gets you up and running with the WKND App SPA and AEM SPA Editor in 15 minutes. This accelerated setup takes you directly to the end-state of the tutorial, allowing you to explore authoring the SPA in AEM 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.
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.