整合SPA

瞭解在React中寫入的單頁應用程式(SPA)的原始碼如何與Adobe Experience Manager()項AEM目整合。 學習使用現代前端工具(如webpack dev伺服器)快速開發SPAJSON模AEM型API。

目標

  1. 瞭解項SPA目如何與客AEM戶端庫整合。
  2. 瞭解如何使用Webpack開發伺服器進行專用前端開發。
  3. 探索使用 代理 靜態 嘲弄 用於針對AEMJSON模型API進行開發的檔案。

您將構建的

在本章中,您將對進行幾SPA個小的更改,以瞭解它是如何與整合AEM的。
本章將添加一個簡單 Header 元件SPA。 在構建過程中 靜態 Header 將採用AEM多SPA種發展方式。

中的新標題AEM

擴展SPA以添加靜態 Header 元件

必備條件

查看所需的工具和設定 地方開發環境。 本章是 建立項目 但是,後續的所有需要都是啟用工作SPA的項AEM目。

整合方法

作為項目的一部分,建立了兩AEM個模組: ui.appsui.frontend

ui.frontend 模組是 網路包 包含所有原始碼的SPA項目。 大部分開發SPA和測試將在webpack項目中完成。 觸發生產生成時,使用SPAwebpack生成並編譯。 編譯的對象(CSS和Javascript)將複製到 ui.apps 模組,然後部署到運AEM行時。

ui.front高級體系結構

整合的高級描SPA述。

有關前端構建的其他資訊可以 此處

Inspect整SPA合

接下來,檢查 ui.frontend 模組,SPA以瞭解 項AEM目原型

  1. 在您選擇的IDE中開啟AEM項目。 本教程將使用 Visual Studio代碼IDE

    VSCode - AEM WKND項SPA目

  2. 展開並檢查 ui.frontend 的子菜單。 開啟檔案 ui.frontend/package.json

  3. dependencies 你應該看到幾個 react 包括 react-scripts

    ui.frontend 是基於 建立React應用 或者簡稱CRA。 的 react-scripts 版本指示使用的CRA版本。

  4. 還有幾個以前置詞的依賴項 @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輯器JS SDK 並提供功能,使「元件」(Components)可以映射SPA到「組AEM件」(Components)。

    還包括 WCMAEM元件 — 反應核心實施WCMAEM元件 — Spa編輯器 — React Core實施。 這些是一組可重用的UI元件,它們映射到出廠設AEM備。 這些設計旨在按原樣使用,並按照項目的需要設計樣式。

  5. package.json 檔案有幾個 scripts 定義:

    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build && clientlib",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
    }
    

    這些是標準生成指令碼 可用 按鈕

    唯一的區別是 && clientlibbuild 的下界。 此額外指令負責將編譯後SPA的 ui.apps 模組,作為生成期間的客戶端庫。

    npm模組 aem-clientlib生成器 用來促進這一過程。

  6. Inspect檔案 ui.frontend/clientlib.config.js。 此配置檔案由 aem-clientlib生成器 確定如何生成客戶端庫。

  7. Inspect檔案 ui.frontend/pom.xml。 此檔案轉換 ui.frontend 資料夾 馬文模。 的 pom.xml 已更新檔案以使用 前面的插件test構建 在馬SPA文建造時。

  8. Inspect檔案 index.jsui.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器SPAJS SDK提供。 它負責呼叫和注入 pageModel (JSON內容)。

  9. Inspect檔案 import-component.jsui.frontend/src/import-components.js。 此檔案將從框外導入 反應核心元件 讓它們能被項目使用。 我們將在下一章中檢AEM查內SPA容到元件的映射。

添加靜態組SPA件

接下來,將新元件添加SPA到並將更改部署到本地AEM實例。 這將是一個簡單的變化,僅僅用於說明如SPA何更新。

  1. ui.frontend 模組下 ui.frontend/src/components 建立名為 Header

  2. 建立名為 Header.js 在下面 Header 的子菜單。

    頭資料夾和檔案

  3. 填充 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元件,它將輸出靜態文本字串。

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

  5. 進行以下更新 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>
    
  6. 開啟新終端並導航到 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
    
  7. 導航到 ui.apps 的子菜單。 在下面 ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-react 您應看到已編SPA譯的檔案已從ui.frontend/build 的子菜單。

    在ui.apps中生成的客戶端庫

  8. 返回到終端並導航到 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。

  9. 開啟瀏覽器頁籤並導航到 http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html。 您現在應看到 Header 顯示的組SPA件。

    初始頭實現

    當從項目的根觸發Maven生成時(即 mvn clean install -PautoInstallSinglePackage)。 您現在應該瞭解與客戶端庫之間集SPA成AEM的基本知識。 請注意,您仍然可以編輯和添加 Text 靜AEM態下 Header 元件。

Webpack開發伺服器 — 代理JSON API

如前幾個練習所示,執行生成並將客戶端庫同步到本地實例需要幾AEM分鐘的時間。 這對於最終測試是可以接受的,但對於大多數開發來說並不SPA理想。

A WebPack-Dev伺服器 可用於快速開發SPA。 由生SPA成的JSON模型驅動AEM。 在本練習中,運行實例的JSON內AEM容將 代理 進入開發伺服器。

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

    查找類似以下行:

    "proxy": "http://localhost:4502",
    

    建立React應用 提供了一種簡單的代理API請求的機制。 所有未知請求都將通過代理 localhost:4502,本地快速啟AEM動。

  2. 開啟終端窗口並導航到 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.
    
  3. 開啟新瀏覽器頁籤(如果尚未開啟)並導航到 http://localhost:3000/content/wknd-spa-react/us/en/home.html

    Webpack dev伺服器 — 代理json

    您應該看到與中相同的內AEM容,但未啟用任何創作功能。

    注意

    由於安全要求,AEM您需要登錄到同一瀏覽器AEM中但位於其他頁籤中的本地實例(http://localhost:4502)。

  4. 返回到IDE並建立名為 Header.csssrc/components/Header 的子菜單。

  5. 填充 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

  6. 重新開啟 Header.js 並添加以下行以供參考 Header.css:

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

    儲存變更。

  7. 導航到 http://localhost:3000/content/wknd-spa-react/us/en/home.html 來查看自動反映的樣式更改。

  8. 開啟檔案 Page.cssui.frontend/src/components/Page。 進行以下更改以修復填充:

    .page {
      max-width: 1024px;
      margin: 0 auto;
      padding: 12px;
      padding-top: 50px;
    }
    
  9. 返回到瀏覽器,位於 http://localhost:3000/content/wknd-spa-react/us/en/home.html。 您應立即看到對應用所做的更改。

    添加到頁眉的樣式

    您可以繼續在中更新內容AEM,並在中查看 WebPack-Dev伺服器,因為我們正在代理內容。

  10. 停止Webpack Dev伺服器 ctrl+c 在終端。

將更SPA新部署到AEM

Header 當前僅通過 WebPack-Dev伺服器。 部署更新SPA的AEM以查看更改。

  1. 導航到項目的根(aem-guides-wknd-spa)並將項目部署AEM到Maven :

    $ cd ..
    $ mvn clean install -PautoInstallSinglePackage
    
  2. 導航到 http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html。 您應看到更新的 Header 的子菜單。

    更新的標題AEM

    現在已更新SPA,創AEM作可以繼續。

恭喜!

祝賀您,您已更新SPA並探索與的整合AEM! 您知道如何使用SPAJSON模AEM型API WebPack-Dev伺服器

後續步驟

將組SPA件映射到組AEM件 — 瞭解如何使用Editor JS SDK將React元件映射AEM到Adobe Experience Manager(AEMSPA)元件。 元件映射使用戶能夠對編輯器SPA中的元件進行AEM動SPA態更新,與傳AEM統創作類似。

(額外)Webpack開發伺服器 — 模擬JSON API

另一種快速開發的方法是使用靜態JSON檔案作為JSON模型。 通過「嘲弄」JSON,我們刪除了對本地實例的依AEM賴性。 它還允許前端開發人員更新JSON模型,以便test功能並驅動對JSON API的更改,這些更改隨後將由後端開發人員實施。

模擬JSON的初始設定 需要本地實AEM例

  1. 返回到IDE並導航到 ui.frontend/public 並添加名為 mock-content

  2. 建立名為 mock.model.jsonui.frontend/public/mock-content

  3. 在瀏覽器中導航到 http://localhost:4502/content/wknd-spa-react/us/en.model.json

    這是驅動應用程AEM序的JSON導出。 複製JSON輸出。

  4. 貼上檔案上一步的JSON輸出 mock.model.json

    模型Json檔案

  5. 開啟檔案 index.htmlui.frontend/public/index.html。 更新頁面模型的AEM元資料屬性以指向變數 %REACT_APP_PAGE_MODEL_PATH%:

        <!-- AEM page model -->
        <meta
           property="cq:pagemodel_root_url"
           content="%REACT_APP_PAGE_MODEL_PATH%"
        />
    

    將變數用於 cq:pagemodel_root_url 將使代理和mock json模型之間的切換更加容易。

  6. 開啟檔案 ui.frontend/.env.development 並進行以下更新以注釋掉以前的值 REACT_APP_PAGE_MODEL_PATHREACT_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
    
  7. 如果當前正在運行,請停止 WebPack-Dev伺服器。 啟動 WebPack-Dev伺服器 從終端:

    $ cd ui.frontend
    $ npm start
    

    導航到 http://localhost:3000/content/wknd-spa-react/us/en/home.html 您應該看到SPA與 代理 json。

  8. mock.model.json 檔案。 您應看到更新的內容立即反映在 WebPack-Dev伺服器

    模型json更新

能夠操作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

本頁內容