AEM无头快速设置可让您使用WKND网站示例项目中的内容,以及通过AEM无头GraphQL API使用内容的示例React应用程序(SPA),来实践AEM无头。
要执行此快速设置,需要满足以下条件:
首先,创建用于部署WKND站点的Cloud Manager Git存储库。 WKND网站是一个AEM网站项目示例,其中包含快速设置的React应用程序使用的内容(内容片段)和GraphQL AEM端点。
步骤的截屏
aem-headless-quick-setup-wknd
创建Cloud Manager Git存储库后,从GitHub克隆WKND站点项目的源代码,并将其推送到Cloud Manager Git存储库。 现在,Cloud Manager可以访问WKND Site项目并将其部署到AEMas a Cloud Service环境。
步骤的截屏
从命令行中,从GitHub中克隆示例WKND站点项目的源代码
$ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git
将Cloud Manager Git存储库添加为远程存储库
选择 存储库 在顶部导航中
选择 访问存储库信息 从顶部操作栏
在中找到执行命令 将远程存储库添加到Git存储库 从命令行
$ cd aem-guides-wknd
$ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/
将示例项目的源代码从本地Git存储库推送到Cloud Manager Git存储库
$ git push adobe main:main
提示输入凭据时,请提供 用户名 和 密码 从Cloud Manager的 存储库信息 模式窗口。
将WKND Site项目推送到Cloud Manager Git存储库后,无法使用Cloud Manager管道将其部署到AEMas a Cloud Service。
请记住,WKND Site项目提供了React应用程序通过AEM无头GraphQL API使用的示例内容。
步骤的截屏
Dev Deployment pipeline
aem-headless-quick-setup-wknd
在 存储库 选择框main
从 Git分支 选择框通过使用WKND站点项目中的内容引导AEMas a Cloud Service,下载并启动示例WKND React应用程序,该应用程序会通过AEM无头GraphQL API使用WKND站点的内容。
步骤的截屏
从命令行中,从GitHub中克隆React应用程序的源代码。
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
打开文件夹 ~/Code/aem-guides-wknd-graphql/react-app
在IDE中。
在IDE中,打开文件 .env.development
.
指向AEMas a Cloud Service 发布 服务的主机URI(来自 REACT_APP_HOST_URI
属性。
REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
...
要查找AEMas a Cloud Service发布服务的主机URI,请执行以下操作:
在IDE中,将更改保存到 .env.development
从命令行中,运行React App
$ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
在本地运行的React应用程序从 http://localhost:3000 和显示冒险列表,这些冒险源自使用AEM Headless' GraphQL API的AEMas a Cloud Service。
当示例WKND React应用程序连接到AEM Headless GraphQL API并使用其中的内容时,在AEM创作服务中创作内容,并查看React应用程序的体验如何协同更新。
步骤的截屏
登录到AEMas a Cloud Service创作服务
导航到 资产>文件> WKND共享>英语>冒险
打开 南犹他州自行车队 文件夹
选择 南犹他州自行车队 内容片段,然后选择 编辑 从顶部操作栏
更新内容片段的一些字段,例如:
Cycling Utah's National Parks
6 Days
Intermediate
3500
/content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg
选择 保存 在顶部操作栏中
选择 快速发布 从顶部操作栏的 …
刷新运行在上的React应用程序 http://localhost:3000.
在React应用程序中,选择现在更新的循环冒险,然后验证对内容片段所做的内容更改。
在AEM创作服务中,使用相同的方法:
如果您不熟悉如何创建和发布新内容或取消发布现有内容片段,请观看上面的屏幕截图。
恭喜!您已成功使用AEM Headless来为React应用程序提供支持!
要详细了解React应用程序如何使用AEMas a Cloud Service中的内容,请参阅 AEM Headless教程. 本教程探讨了创建时AEM中的内容片段,以及此React应用程序如何将其内容用作JSON。