快速設定是快速逐步說明如何安裝及執行WKND應用程式和作為遠端SPA,並使用AEM SPA編輯器編寫。
快速設定會直接進入本教學課程的結束狀態。
快速設定的影片逐步說明
本教學課程需要下列項目:
本教學課程假設:
~/Code/wknd-app
的工作目錄http://localhost:4502
上以作者服務形式執行AEM SDKadmin
的本機admin
帳戶執行AEM SDKhttp://localhost:3000
上執行SPA在連接埠4502上下載並安裝具有預設admin/admin
憑證的AEM SDK Quickstart。
將AEM SDK解壓縮至~/aem-sdk
執行AEM SDK Quickstart Jar
$ java -jar aem-sdk-quickstart-xxx.jar
# Provide `admin` as the admin user's password
AEM SDK將在http://localhost:4502上啟動並自動啟動。 使用下列憑證登入:
admin
admin
本教學課程相依於WKND 0.3.0+的專案(針對內容)。
aem-guides-wknd.all.x.x.x.zip
admin
憑證登入AEM SDK的套件管理器,網址為http://localhost:4502/crx/packmgr。aem-guides-wknd.all.x.x.x.zip
在步驟1下載的aem-guides-wknd.all-x.x.x.zip
項目若要快速設定,會提供AEM套件,其中包含教學課程的最終AEM設定和內容。
admin
憑證登入AEM SDK的套件管理器,網址為http://localhost:4502/crx/packmgr。wknd-app.all.x.x.x.zip
在步驟1下載的wknd-app.all.x.x.x.zip
項目wknd-app.ui.content.sample.x.x.x.zip
在步驟2中下載的wknd-app.ui.content.sample.x.x.x.zip
項目從Github.com下載WKND應用程式的原始碼,並切換包含本教學課程中執行之SPA變更的分支。
$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql
從專案的根目錄,安裝SPA專案npm相依性並執行應用程式。
$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start
如果運行npm install
時出錯,請嘗試下列步驟:
$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start
驗證SPA是否在http://localhost:3000執行。
製作內容之前,請先排列瀏覽器視窗,讓AEM Author(http://localhost:4502
)位於左側,而遠端SPA(http://localhost:3000
)則位於右側。 此安排可讓您查看AEM來源內容的變更如何立即反映在SPA中。
admin
登入AEM SDK作者服務http://localhost:3000
上執行的SPA,並查看是否反映變更http://localhost:3000
上執行的SPA,並查看是否反映變更http://localhost:3000
上執行的SPA,並查看是否反映變更WKND應用程式首頁>冒險 下的新AEM頁面必須具有與對應冒險內容片段名稱相符的AEM頁面名稱。 這是因為SPA路由到AEM頁面的映射基於路由的最後一段,即內容片段的名稱。
您只需快速了解AEM SPA Editor如何透過可控、可編輯的區域增強SPA! 如果您有興趣,請查看教學課程的其餘部分,但請務必從頭開始,因為在此快速設定中,您的本機開發環境現在處於教學課程的結束狀態!