概述

[要使用Edge Delivery Services从AEM Sites发布，请单击此处。]{class="badge positive" title="从AEM到Edge Delivery Services的Publish"}

对于希望使用AEM SPA编辑器将现有基于React（或Next.js）的SPA内容扩充为可编辑AEM内容的开发人员，欢迎使用多部分教程。

本教程以WKND GraphQL应用程序为基础，该应用程序是一个React应用程序，它通过AEM的GraphQL API使用AEM内容片段内容，但不提供任何对SPA内容的上下文创作。

关于教程

本教程旨在说明如何更新远程SPA或在AEM上下文之外运行的SPA，以便使用和交付在AEM中创作的内容。

本教程中的大多数活动都重点介绍JavaScript开发，但其中涵盖了围绕AEM的关键方面。 这些方面包括定义在AEM中创作和存储内容的位置，并将SPA路由映射到AEM Pages。

本教程设计用于​ AEM as a Cloud Service，由两个项目组成：

最新代码

先决条件

本教程要求您满足以下条件：

本教程假定：

1.为SPA编辑器配置AEM

需要使用AEM配置将SPA与AEM SPA编辑器集成。 这些配置通过AEM项目进行管理和部署。 在本章中，了解所需的配置以及如何定义它们。

2.BootstrapSPA

要使AEM SPA Editor将SPA集成到其创作上下文中，必须对SPA添加一些内容。

3.可编辑的固定组件

首先，浏览向SPA添加可编辑的“固定组件”。 这说明了开发人员如何在SPA中放置特定的可编辑组件。 虽然作者可以更改组件的内容，但他们不能移除组件或更改其放置、位置或大小。

4.可编辑的容器组件

接下来，探索如何向SPA添加可编辑的“容器组件”。 这说明了开发人员如何在SPA中放置容器组件。 容器组件允许作者将允许的组件放入容器组件中，并调整组件的布局。

5.动态路由和可编辑组件

最后，将前面几章中介绍的概念用于动态路由；根据路由的参数显示不同内容的路由。 这说明了如何使用AEM SPA Editor创作以编程方式驱动和派生的路由的内容。

其他资源