概述

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

本教程以 WKND GraphQL应用程序，一种通过AEM GraphQL API使用AEM内容片段内容的React应用程序，但不提供任何SPA内容的上下文内创作。

关于教程

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

本教程中的大多数活动重点介绍JavaScript开发，但涉及的关键方面涉及AEM。 这些方面包括定义在AEM中创作和存储内容的位置，以及将SPA路由映射到AEM页面。

本教程旨在与 AEMas a Cloud Service 由两个项目组成：

  1. 的 AEM项目 包含必须部署到AEM的配置和内容。
  2. WKND应用程序 项目是要与AEM SPA Editor集成的SPA

最新代码

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

前提条件

本教程需要满足以下条件：

本教程假定：

  • Microsoft® Visual Studio代码 作为IDE
  • 工作目录 ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial
  • 在上运行AEM SDK作为创作服务 http://localhost:4502
  • 使用本地运行AEM SDK admin 密码帐户 admin
  • 在上运行SPA http://localhost:3000
注意

需要有关设置本地开发环境的帮助？ 查看 以下使用AEMas a Cloud Service SDK设置本地开发环境的指南.

1.为AEM编辑器配置SPA

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

2.BootstrapSPA

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

3.可编辑的固定组件

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

4.可编辑的容器组件

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

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

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

其他资源

在此页面上