概觀
歡迎瀏覽此多部分教學課程，適合想要透過 AEM SPA 編輯器為現有基於 React (或 Next.js) 的遠端 SPA 新增可編輯 AEM 內容的開發人員。
本教學課程以 WKND GraphQL 應用程式為基礎，這是透過 AEM 的 GraphQL API 使用 AEM 內容片段內容的一個 React 應用程式，但不提供任何 SPA 內容情境式製作功能。
關於本教學課程
本教學課程旨在說明如何更新遠端 SPA，或者不在 AEM 環境內執行的 SPA，以便能夠使用及傳遞在 AEM 中製作的內容。
本教學課程中的大部分活動將焦點放在 JavaScript 開發，但也涵蓋關於 AEM 的重要層面。這些方面包括定義 AEM 中製作和儲存內容的位置，以及將 SPA 路由對應至 AEM 頁面。
本教學課程旨在與 AEM as a Cloud Service 搭配使用，並由兩個專案組成：
- AEM 專案包含必須部署至 AEM 的設定和內容。
- WKND 應用程式專案是要與 AEM 的 SPA 編輯器整合的 SPA
最新的程式碼
- 本教學課程之程式碼的起點可以在 GitHub 的
remote-spa-tutorial資料夾中找到。
先決條件
本教學課程需要以下項目：
本教學課程假設：
- 以 Microsoft® Visual Studio 程式碼作為 IDE
- 工作目錄是
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial - 執行 AEM SDK，作為
http://localhost:4502上的製作服務 - 使用具備
admin密碼的本機admin帳戶執行 AEM SDK - 在
http://localhost:3000上執行 SPA
1. 設定 AEM 以便支援 SPA 編輯器
需要進行 AEM 設定才能將 SPA 與 AEM SPA 編輯器整合。這些設定會透過 AEM 專案進行管理和部署。在此章節中，了解哪些是必要設定以及如何定義那些設定。
2. 啟動 SPA
若要讓 AEM SPA 編輯器能夠將 SPA 整合到其製作環境中，必須在 SPA 中添加一些內容。
3. 可編輯的固定元件
首先，探索在 SPA 中新增可編輯的「固定元件」。這樣會說明開發人員如何在 SPA 中放置特定的可編輯元件。雖然作者可以變更元件的內容，但他們不能刪除元件或變更其放置環境、定位或大小。
4. 可編輯的容器元件
接下來，探索在 SPA 中新增可編輯的「容器元件」。這會說明開發人員如何在 SPA 中放置容器元件。作者能夠在容器元件中放置經允許的元件，並調整元件的版面。
5. 動態路由和可編輯的元件
最後，使用前幾個章節所解釋的概念來實現動態路由；會根據路由的參數而顯示不同內容的路由。這會說明如何使用 AEM SPA 編輯器，在以程式設計方式驅動及推導出來的路由上製作內容。