整合SPA

了解在React中撰寫的單頁應用程式(SPA)原始碼如何與Adobe Experience Manager(AEM)專案整合。了解如何使用現代化的前端工具（例如WebPack開發伺服器），針對AEM JSON模型API快速開發SPA。

目標

了解SPA專案如何與AEM與用戶端程式庫整合。
了解如何使用Webpack開發伺服器進行專屬的前端開發。
探索代理靜態模擬針對AEM JSON模型API進行開發的檔案。

您將建置的

在本章中，您將對SPA進行幾項小幅變更，以了解其與AEM的整合方式。
本章將添加一個簡單 Header 元件至SPA。在建立這個靜態 Header 元件採用數種AEM SPA開發方法。

AEM中的新標題

擴充SPA以新增靜態 Header 元件

必備條件

檢閱設定本地開發環境. 本章是建立專案不過，後續所需的章節是可運作的SPA啟用AEM專案。

整合方法

已在AEM專案中建立兩個模組： ui.apps 和 ui.frontend.

此 ui.frontend 模組是 webpack 包含所有SPA原始碼的專案。大部分的SPA開發和測試都是在Webpack專案中完成。觸發生產組建時，會使用webpack建置及編譯SPA。編譯的成品（CSS和Javascript）會複製到 ui.apps 模組，然後部署至AEM執行階段。

ui.frontend高階架構

對SPA整合的高階描述。

有關前端版本編號的其他資訊可以是此處找到.

Inspect SPA整合

接下來，檢查 ui.frontend 模組，了解由 AEM專案原型.

在您選擇的IDE中，開啟AEM專案。本教學課程將使用 Visual Studio代碼IDE.
展開並檢查 ui.frontend 檔案夾。開啟檔案 ui.frontend/package.json
在 dependencies 您應會看到數個與 react 包括 react-scripts

此 ui.frontend 是根據建立React應用程式或CRA。此 react-scripts 版本會指出使用的CRA版本。
還有數個以為首碼的相依性 @adobe:
```
"@adobe/aem-react-editable-components": "~1.1.2",
"@adobe/aem-spa-component-mapping": "~1.1.0",
"@adobe/aem-spa-page-model-manager": "~1.3.3",
"@adobe/aem-core-components-react-base": "1.1.8",
"@adobe/aem-core-components-react-spa": "1.1.7",
```
上述模組構成 AEM SPA Editor JS SDK 並提供功能，以便將SPA元件對應至AEM元件。

也包括 AEM WCM元件 — React核心實作和 AEM WCM元件 — Spa編輯器 — React Core實作. 這些是一組可重複使用的UI元件，會對應至現成可用的AEM元件。這些設計可依原樣使用，並設定符合專案需求的樣式。
在 package.json 檔案有數個 scripts 已定義：
```
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && clientlib",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
}
```
這些是製作的標準建置指令碼可用建立React應用程式。

唯一的差異是 && clientlib 到 build 指令碼。此額外指示負責將編譯的SPA複製至 ui.apps 模組做為建置期間的用戶端程式庫。

npm模組 aem-clientlib-generator 可方便執行。
Inspect檔案 ui.frontend/clientlib.config.js. 此配置檔案由 aem-clientlib-generator 以決定如何產生用戶端程式庫。
Inspect檔案 ui.frontend/pom.xml. 此檔案會轉換 ui.frontend 資料夾 Maven模組. 此 pom.xml 檔案已更新，以使用 frontend-maven-plugin to 測試和建置 SPA。

Inspect檔案 index.js at ui.frontend/src/index.js:

//ui.frontend/src/index.js
...
document.addEventListener('DOMContentLoaded', () => {
    ModelManager.initialize().then(pageModel => {
        const history = createBrowserHistory();
        render(
        <Router history={history}>
            <App
            history={history}
            cqChildren={pageModel[Constants.CHILDREN_PROP]}
            cqItems={pageModel[Constants.ITEMS_PROP]}
            cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
            cqPath={pageModel[Constants.PATH_PROP]}
            locationPathname={window.location.pathname}
            />
        </Router>,
        document.getElementById('spa-root')
        );
    });
});

index.js 是SPA的入口。 ModelManager 由AEM SPA Editor JS SDK提供。它負責呼叫和注入 pageModel （JSON內容）放入應用程式中。

Inspect檔案 import-components.js at ui.frontend/src/components/import-components.js. 此檔案會立即匯入 React核心元件 並讓項目可供使用。我們將在下一章中檢查AEM內容與SPA元件的對應。

新增靜態SPA元件

接著，將新元件新增至SPA，並將變更部署至本機AEM例項。這是一項簡單的變更，只是為了說明SPA的更新方式。

在 ui.frontend 模組下方 ui.frontend/src/components 建立名為 Header.
建立名為 Header.js 在下面 Header 檔案夾。

填入 Header.js 並搭配下列項目：

//Header.js
import React, {Component} from 'react';

export default class Header extends Component {

    render() {
        return (
                <header className="Header">
                    <div className="Header-container">
                        <h1>WKND</h1>
                    </div>
                </header>
        );
    }
}

以上是將輸出靜態文字字串的標準React元件。

開啟檔案 ui.frontend/src/App.js. 這是應用程式入口點。

對 App.js 納入靜態 Header:

  import { Page, withModel } from '@adobe/aem-react-editable-components';
  import React from 'react';
+ import Header from './components/Header/Header';

  // This component is the application entry point
  class App extends Page {
  render() {
      return (
      <div>
+       <Header />
         {this.childComponents}
         {this.childPages}
     </div>

開啟新終端機並導覽至 ui.frontend 資料夾和執行 npm run build 命令：

$ cd aem-guides-wknd-spa
$ cd ui.frontend
$ npm run build
...
Compiled successfully.

File sizes after gzip:

118.95 KB (-33 B)  build/static/js/2.489f399a.chunk.js
1.11 KB (+48 B)    build/static/js/main.6cfa5095.chunk.js
806 B              build/static/js/runtime-main.42b998df.js
451 B              build/static/css/main.e57bbe8a.chunk.css

導覽至 ui.apps 檔案夾。下方 ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-react 您應該會看到已編譯的SPA檔案已從ui.frontend/build 檔案夾。

返回終端並導覽至 ui.apps 檔案夾。執行以下Maven命令：

$ cd ../ui.apps
$ mvn clean install -PautoInstallPackage
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  9.629 s
[INFO] Finished at: 2020-05-04T17:48:07-07:00
[INFO] ------------------------------------------------------------------------

這會部署 ui.apps 套件至本機執行中的AEM例項。

開啟瀏覽器標籤並導覽至 http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. 您現在應該會看到 Header 元件。

從專案根目錄觸發Maven組建時，上述步驟會自動執行(即 mvn clean install -PautoInstallSinglePackage)。您現在應了解SPA和AEM用戶端程式庫之間整合的基本知識。請注意，您仍可以編輯和新增 Text AEM中靜態下方的元件 Header 元件。

Webpack開發伺服器 — 代理JSON API

如先前的練習所示，執行組建，並將用戶端程式庫同步至AEM的本機例項需要幾分鐘的時間。這是最終測試可接受的選項，但不適用於大部分SPA開發。

A webpack-dev-server 可用來快速開發SPA。 SPA是由AEM產生的JSON模型驅動。在本練習中，來自執行中AEM例項的JSON內容為代理進入開發伺服器。

返回到IDE並開啟檔案 ui.frontend/package.json.

尋找如下所示的行：
```
"proxy": "http://localhost:4502",
```
此建立React應用程式提供簡單的代理API請求機制。所有未知請求都會透過 localhost:4502，即本機AEM快速入門。

開啟終端機視窗並導覽至 ui.frontend 檔案夾。運行命令 npm start:

$ cd ui.frontend
$ npm start
...
Compiled successfully!

You can now view wknd-spa-react in the browser.

Local:            http://localhost:3000
On Your Network:  http://192.168.86.136:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

開啟新的瀏覽器標籤（如果尚未開啟）並導覽至 http://localhost:3000/content/wknd-spa-react/us/en/home.html.

您應該會看到與AEM相同的內容，但未啟用任何製作功能。

注意

由於AEM的安全性需求，您需要在相同的瀏覽器中，但位在不同的索引標籤中，登入本機AEM例項(http://localhost:4502)。
返回到IDE並建立名為的檔案 Header.css 在 src/components/Header 檔案夾。

填入 Header.css 並搭配下列項目：

.Header {
    background-color: #FFEA00;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24);
}

.Header-container {
    display: flex;
    max-width: 1024px;
    margin: 0 auto;
    padding: 12px;
}

.Header-container h1 {
    letter-spacing: 0;
    font-size: 48px;
}

VSCode IDE

重新開啟 Header.js 並新增下列行以供參考 Header.css:

  //Header.js
  import React, {Component} from 'react';
+ require('./Header.css');

儲存變更。

導覽至 http://localhost:3000/content/wknd-spa-react/us/en/home.html ，以查看自動反映的樣式更改。
開啟檔案 Page.css at ui.frontend/src/components/Page. 進行下列變更以修正邊框間距：
```
.page {
  max-width: 1024px;
  margin: 0 auto;
  padding: 12px;
  padding-top: 50px;
}
```
返回瀏覽器時間： http://localhost:3000/content/wknd-spa-react/us/en/home.html. 您應會立即看到應用程式的變更反映在內。

您可以繼續在AEM中更新內容，並查看 webpack-dev-server，因為我們代理內容。
使用停止Webpack開發伺服器 ctrl+c 在終端機。

將SPA更新部署至AEM

對 Header 目前僅可透過 webpack-dev-server. 將更新的SPA部署至AEM以查看變更。

導覽至專案的根目錄(aem-guides-wknd-spa)，並使用Maven將專案部署至AEM:
```
$ cd ..
$ mvn clean install -PautoInstallSinglePackage
```
導覽至 http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. 您應會看到更新 Header 和樣式。

現在更新的SPA已在AEM中，製作即可繼續。

恭喜！

恭喜，您已更新SPA並探索與AEM的整合！您現在知道如何使用，針對AEM JSON模型API開發SPA webpack-dev-server.

後續步驟

將SPA元件對應至AEM元件 — 了解如何使用AEM SPA Editor JS SDK將React元件對應至Adobe Experience Manager(AEM)元件。元件對應可讓使用者在AEM SPA編輯器中對SPA元件進行動態更新，與傳統AEM製作類似。

（額外獎勵）Webpack開發伺服器 — 模擬JSON API

另一種快速開發的方法是使用靜態JSON檔案作為JSON模型。借由「模擬」JSON，我們移除了對本機AEM例項的相依性。此外，前端開發人員也能更新JSON模型，以測試功能，並推動對JSON API的變更，JSON API稍後將由後端開發人員實作。

模擬JSON的初始設定可 需要本機AEM例項.

返回IDE並導航到 ui.frontend/public 並添加名為 mock-content.
建立名為 mock.model.json 在 ui.frontend/public/mock-content.
在瀏覽器中導覽至 http://localhost:4502/content/wknd-spa-react/us/en.model.json.

這是由AEM匯出的JSON，此JSON會驅動應用程式。複製JSON輸出。
將上一步的JSON輸出貼到檔案中 mock.model.json.
開啟檔案 index.html at ui.frontend/public/index.html. 更新AEM頁面模型的中繼資料屬性以指向變數 %REACT_APP_PAGE_MODEL_PATH%:
```
    
    <meta
       property="cq:pagemodel_root_url"
       content="%REACT_APP_PAGE_MODEL_PATH%"
    />
```
將變數用於 cq:pagemodel_root_url 可讓您在proxy和模擬json模型之間切換。

開啟檔案 ui.frontend/.env.development 並進行下列更新，以註解的先前值 REACT_APP_PAGE_MODEL_PATH 和 REACT_APP_API_HOST:

+ PUBLIC_URL=/
- PUBLIC_URL=/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react/resources

- REACT_APP_PAGE_MODEL_PATH=/content/wknd-spa-react/us/en.model.json
+ REACT_APP_PAGE_MODEL_PATH=/mock-content/mock.model.json

- REACT_APP_API_HOST=http://localhost:4502
+ #REACT_APP_API_HOST=http://localhost:4502

REACT_APP_ROOT=/content/wknd-spa-react/us/en/home.html

如果目前執行中，請停止 webpack-dev-server. 啟動 webpack-dev-server 從終端：
```
$ cd ui.frontend
$ npm start
```
導覽至 http://localhost:3000/content/wknd-spa-react/us/en/home.html 而且您應會看到SPA中使用的相同內容代理 json。
對 mock.model.json 檔案。您應會看到更新的內容立即反映在 webpack-dev-server.

能夠操控JSON模型並查看即時SPA上的效果，可協助開發人員了解JSON模型API。它還允許前端和後端開發並行進行。

您現在可以切換使用JSON內容的位置，方法是切換 env.development 檔案：

# JSON API via proxy to AEM
#REACT_APP_PAGE_MODEL_PATH=/content/wknd-spa-react/us/en.model.json
#REACT_APP_API_HOST=http://localhost:4502

# JSON API via static mock file
REACT_APP_PAGE_MODEL_PATH=/mock-content/mock.model.json

整合SPA

目標

您將建置的

必備條件

整合方法

Inspect SPA整合

新增靜態SPA元件

Webpack開發伺服器 — 代理JSON API

將SPA更新部署至AEM

恭喜！

後續步驟

（額外獎勵）Webpack開發伺服器 — 模擬JSON API

Business.Adobe.com 資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe