AEM Headless快速設定可讓您使用AEM Headless的實際操作,其中包含來自WKND Site範例專案的內容,以及一個透過AEM Headless GraphQL API使用內容的範例React應用程式(SPA)。
進行此快速設定需要下列專案:
首先,建立用於部署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網站專案,並將其部署到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網站專案推送到Cloud Manager Git存放庫時,無法使用Cloud Manager管道將其部署到AEMas a Cloud Service。
請記住,WKND網站專案提供React應用程式透過AEM Headless GraphQL API使用的範例內容。
步驟的熒幕截圖
Dev Deployment pipeline
aem-headless-quick-setup-wknd
在 存放庫 選取方塊main
從 Git分支 選取方塊使用WKND網站專案中的內容啟動AEMas a Cloud Service後,下載並啟動範例WKND React應用程式,該應用程式會透過AEM Headless 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應用程式
$ 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 Author服務中創作內容,並檢視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應用程式中,選取現在更新的Cycling Adventure,並驗證對內容片段進行的內容變更。
使用相同方法,在AEM Author服務中:
如果您不熟悉如何建立和發佈新的內容片段,或取消發佈現有的內容片段,請觀看上面的熒幕擷圖。
恭喜!您已成功使用AEM Headless來增強React應用程式!
若要詳細瞭解React應用程式如何使用AEMas a Cloud Service的內容,請檢視 AEM Headless教學. 本教學課程探討如何在AEM中建立內容片段,以及此React應用程式如何以JSON形式使用其內容。