概述

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

对于希望使用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。

本教程专门设计用于 AEMas a Cloud Service 并且由两个项目组成:

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

最新代码

  • 本教程代码的起始点可在上找到 GitHubremote-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
NOTE
在设置本地开发环境时需要帮助? 查看 以下指南介绍了如何使用AEMas a Cloud ServiceSDK设置本地开发环境.

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