概述

[要使用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. AEM项目 ​包含必须部署到AEM的配置和内容。
  2. WKND应用程序 ​项目是要与AEM的SPA编辑器集成的SPA

最新代码

  • 本教程代码的起点可在remote-spa-tutorial文件夹中的GitHub上找到。

先决条件

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

本教程假定:

  • Microsoft® Visual Studio Code作为IDE
  • ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial的工作目录
  • http://localhost:4502上将AEM SDK作为创作服务运行
  • 使用密码为admin的本地admin帐户运行AEM SDK
  • http://localhost:3000上运行SPA
NOTE
需要有关设置本地开发环境的帮助吗? ​请查看以下指南,了解如何使用AEM as a Cloud Service SDK设置本地开发环境

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创作以编程方式驱动和派生的路由的内容。

其他资源

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4