在AEM中创建您的第一个React SPA

欢迎使用为Adobe Experience Manager(AEM)中​SPA Editor​功能新手的开发人员设计的多部分教程。 本教程将介绍虚拟生活品牌WKND的React应用程序的实施。 React应用程序将开发并设计为与AEM SPA Editor一起部署,后者将React组件映射到AEM组件。 部署到AEM的完整SPA可以使用AEM的传统在线编辑工具动态创作。

最终SPA已实施

WKND SPA实施

关于

此多部分教程旨在教授开发人员如何实施React应用程序以与AEM的SPA编辑器功能结合使用。 在真实场景中,开发活动按角色划分,通常涉及​前端开发者​和​后端开发者。 我们认为,对于将参与AEM SPA Editor项目的任何开发人员来说,完成本教程都是有益的。

本教程设计为将​AEM用作Cloud Service,并向后兼容​AEM 6.5.4+​和​AEM 6.4.8+。 SPA的实施方式:

估计需要1-2个小时来完成教程的每个部分。

最新代码

所有教程代码都可以在GitHub上找到。

最新代码库可作为可下载的AEM包提供。

前提条件

在开始本教程之前,您需要:

虽然不需要,但对开发传统AEM Sites组件有 基本了解是有益的

本地开发环境

完成本教程需要一个本地开发环境。 屏幕截图和视频是使用AEM作为Cloud ServiceSDK捕获的,Mac OS环境上运行,IDE为Visual Studio代码。 除非另有说明,否则命令和代码应独立于本地操作系统。

注意

初次使用AEM作为Cloud Service? 请参阅以 下指南,使用AEM作为Cloud Service SDK设置本地开发环境

初次使用AEM 6.5? 请参阅以 下指南以设置本地开发环境

后续步骤

你在等什么!开始教程,方法是导航到SPA Editor Project一章,并学习如何使用AEM Project Archetype生成启用了SPA Editor的项目。

向后兼容性

本教程的项目代码是作为Cloud Service为AEM构建的。 为了使项目代码向后兼容​6.5.4+​和​6.4.8+,对教程的POM文件进行了若干修改。

UberJar v6.4.4​已作为依赖项包含:

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

已添加一个名为classic的额外Maven用户档案,以将内部版本修改为目标 AEM 6.x环境:

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

默认情况下,classic用户档案处于禁用状态。 如果按照AEM 6.x的教程进行,请每当指示您执行Maven内部版本时,添加classic用户档案,即:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

为AEM实施生成新项目时,始终使用最新版的AEM Project Archetype并更新aemVersion以目标您的AEM预期版本。

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now