BootstrapSPA編輯SPA器

在可編輯區域添加到遠程中之前SPA,必須使用編輯器JavaScript SDK和其AEMSPA他幾種配置來引導可編輯區域。

下載WKND應用程式源

如果尚未下載WKND App的原始碼,請從Github.com下載,並切換包含對本教程中執行的更改的分支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

查看AEM編SPA輯器JS SDK npm依賴項

首先,審AEM查SPAReact項目的npm依賴項。

審SPA查環境變數

必須向遠程系統公開幾個環境變SPA量,以便它知道如何與其交AEM互。

  1. 開啟遠SPA程項目 ~/Code/wknd-app/aem-guides-wknd-graphql/react-app 在IDE中

  2. 開啟檔案 .env.development

  3. 在檔案中,請特別注意鍵:

    REACT_APP_HOST_URI=http://localhost:4502
    
    REACT_APP_USE_PROXY=true
    
    REACT_APP_AUTH_METHOD=basic
    
    REACT_APP_BASIC_AUTH_USER=admin
    REACT_APP_BASIC_AUTH_PASS=admin
    

    遠程SPA環境變數

    請記住,React中的自定義環境變數必須前置詞為 REACT_APP_

    • REACT_APP_HOST_URI:遠程連接到的AEM服務的方案SPA和主機。
      • 此值根據環境(本AEM地、開發、階段或生產)和服務類AEM型(作者與發佈)是否更改
    • REACT_APP_USE_PROXY:這通過向react開發伺服器通知代理請求(例如, /content, /graphql, .model.json 使用 http-proxy-middleware 中。
    • REACT_APP_AUTH_METHOD:服務請AEM求的驗證方法,選項為「service-token」、「dev-token」、「basic」或留空以用於無驗證用例
      • 與AEM作者一起使用時需要
      • 可能與AEM發佈一起使用(如果內容受保護)
      • 通過基AEM本身份驗證針對SDK進行開發支援本地帳戶。 這是本教程中使用的方法。
      • 與AEMas a Cloud Service整合 訪問令牌
    • REACT_APP_BASIC_AUTH_USER:AEM 用戶名 來驗SPA證內AEM容。
    • REACT_APP_BASIC_AUTH_PASS:AEM 密碼 來驗SPA證內AEM容。

整合ModelManager API

使AEM用應SPA用可用的npm依賴項初始AEM化 ModelManagerindex.jsReactDOM.render(...) 調用。

模型管理器 負責連接到檢AEM索可編輯內容。

  1. 在IDE中打SPA開遠程項目

  2. 開啟檔案 src/index.js

  3. 添加導入 ModelManager 並在 ReactDOM.render(..) 調用,

    ...
    import { ModelManager } from "@adobe/aem-spa-page-model-manager";
    
    // Initialize the ModelManager before invoking ReactDOM.render(...).
    ModelManager.initializeAsync();
    
    ReactDOM.render(...);
    

src/index.js 檔案應如下所示:

src/index.js

設定內部代SPA理

當從中獲取可編AEM輯內SPA容時,最好設定 內部代理SPA,配置為將相應請求路由到AEM。 這是通過 http代理中間件 npm模組,該模組已由基本WKND GraphQL應用安裝。

  1. 在IDE中打SPA開遠程項目

  2. 在以下位置開啟檔案 src/proxy/setupProxy.spa-editor.auth.basic.js

  3. 查看以下代碼:

    const { createProxyMiddleware } = require('http-proxy-middleware');
    const {REACT_APP_HOST_URI, REACT_APP_BASIC_AUTH_USER, REACT_APP_BASIC_AUTH_PASS } = process.env;
    
    /*
        Set up a proxy with AEM for local development
        In a production environment this proxy should be set up at the webserver level or absolute URLs should be used.
    */
    module.exports = function(app) {
    
        /**
        * Filter to check if the request should be re-routed to AEM. The paths to be re-routed at:
        * - Starts with /content (AEM content)
        * - Starts with /graphql (AEM graphQL endpoint)
        * - Ends with .model.json (AEM Content Services)
        *
        * @param {*} path the path being requested of the SPA
        * @param {*} req the request object
        * @returns true if the SPA request should be re-routed to AEM
        */
        const toAEM = function(path, req) {
            return path.startsWith('/content') ||
                path.startsWith('/graphql') ||
                path.endsWith('.model.json')
        }
    
        /**
        * Re-writes URLs being proxied to AEM such that they can resolve to real AEM resources
        * - The "root" case of `/.model.json` are rewritten to the SPA's home page in AEM
        * - .model.json requests for /adventure:xxx routes are rewritten to their corresponding adventure page under /content/wknd-app/us/en/home/adventure/
        *
        * @param {*} path the path being requested of the SPA
        * @param {*} req the request object
        * @returns returns a re-written path, or nothing to use the @param path
        */
        const pathRewriteToAEM = function (path, req) {
            if (path === '/.model.json') {
                return '/content/wknd-app/us/en/home.model.json';
            } else if (path.startsWith('/adventure:') && path.endsWith('.model.json')) {
                return '/content/wknd-app/us/en/home/adventure/' + path.split('/').pop();
            }
        }
    
        /**
        * Register the proxy middleware using the toAEM filter and pathRewriteToAEM rewriter
        */
        app.use(
            createProxyMiddleware(
                toAEM, // Only route the configured requests to AEM
                {
                    target: REACT_APP_HOST_URI,
                    changeOrigin: true,
                    // Pass in credentials when developing against an Author environment
                    auth: REACT_APP_AUTHORIZATION,
                    pathRewrite: pathRewriteToAEM // Rewrite SPA paths being sent to AEM
                }
            )
        );
    
        /**
        * Enable CORS on requests from the SPA to AEM
        *
        * If this rule is not in place, CORS errors will occur when running the SPA on http://localhost:3000
        */
        app.use((req, res, next) => {
            res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
            next();
        });
    };
    

    setupProxy.spa-editor.auth.basic.js 檔案應如下所示:

    src/proxy/setupProxy.spa-editor.auth.basic.js

    此代理配置可執行兩個主要操作:

    1. 特定於代理的請求SPA, http://localhost:3000 至AEM http://localhost:4502
      • 它僅代理其路徑與指示應由其提供服務的模式匹配的請求AEM,如中所定義 toAEM(path, req)
      • 它重寫SPA到其對應頁AEM面的路徑,如中所定義 pathRewriteToAEM(path, req)
    2. 它將CORS頭添加到所有請求中,以允許訪問AEM內容,如定義 res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
      • 如果未添加此項,則在中載入內容時AEM會出現SPACORS錯誤。
  4. 開啟檔案 src/setupProxy.js

  5. 查看指向 setupProxy.spa-editor.auth.basic 代理配置檔案:

    ...
    case BASIC:
    // Use user/pass for local development with Local Author Env
    return require('./proxy/setupProxy.spa-editor.auth.basic');
    ...
    

    setupProxy.js 檔案應如下所示:

    src/setupProxy.js

注意,對 src/setupProxy.js 或者引用的檔案需要重新啟SPA動。

靜態資SPA源

靜SPA態資源(如WKND徽標和載入圖形)需要更新其源URL,以強制從遠程主機SPA載入。 如果左側相對,SPA則在編SPA輯器中載入創作時,這些URL預設使用AEM主機而不SPA是主機,結果生成404個請求,如下圖所示。

中斷的靜態資源

要解決此問題,請使遠程承載的靜態資源使用SPA包含遠程源的絕SPA對路徑。

  1. 在IDESPA中開啟項目

  2. 開啟環SPA境變數檔案 src/.env.development 並為公共URI添SPA加變數:

    ...
    # The base URI the SPA is accessed from
    REACT_APP_PUBLIC_URI=http://localhost:3000
    

    部署到AEMas a Cloud Service時,需要對 .env 的子菜單。

  3. 開啟檔案 src/App.js

  4. 從環境SPA變數導入SPA公共URI

    const {  REACT_APP_PUBLIC_URI } = process.env;
    
    function App() { ... }
    
  5. 在WKND徽標前加前置詞 <img src=.../>REACT_APP_PUBLIC_URI 以迫使對方解SPA決。

    <img src={REACT_APP_PUBLIC_URI + '/' +  logo} className="logo" alt="WKND Logo"/>
    
  6. 對中載入影像執行相同操作 src/components/Loading.js

    const { REACT_APP_PUBLIC_URI } = process.env;
    
    class Loading extends Component {
    
        render() {
            return (<div className="loading">
                <img src={REACT_APP_PUBLIC_URI + '/' + loadingIcon} alt="Loading..." />
            </div>);
        }
    }
    
  7. 對於 兩個實例 按鈕 src/components/AdventureDetails.js

    const { REACT_APP_PUBLIC_URI } = process.env;
    
    function AdventureDetail(props) {
        ...
        render() {
            <img className="Backbutton-icon" src={REACT_APP_PUBLIC_URI + '/' + backIcon} alt="Return" />
        }
    }
    

App.jsLoading.js, AdventureDetails.js 檔案應該如下所示:

靜態資源

響AEM應網格

要支SPA持編輯器的佈局模式,SPA必須將AEMResponsive Grid CSS整合到SPA中。 不要擔心 — 此網格系統僅適用於可編輯的容器,並且您可以使用您選擇的網格系統來驅動其餘部分的布SPA局。

將響應AEM網格SCSS檔案添加到SPA。

  1. 在IDESPA中開啟項目

  2. 下載並將以下兩個檔案複製到 src/styles

    • _grid.scs
      • 響應網AEM格SCSS發生器
    • _grid-init.scss
      • 調用 _grid.scss 使用SPA特定斷點(案頭和移動)和列(12)。
  3. 開啟 src/App.scss 導入 ./styles/grid-init.scss

    ...
    @import './styles/grid-init';
    ...
    

_grid.scss_grid-init.scss 檔案應該如下所示:

響應AEM網格SCSS

現在SPA包括支援添加到容AEM器的元件的佈局模式所需AEM的CSS。

啟動SPA

現在SPA已啟動與的集AEM成,讓我們運行SPA並查看它的外觀!

  1. 在命令行上,導航到項目的根SPA部

  2. 使用SPA普通命令(如果尚未執行)啟動

    $ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm run start
    
  3. 瀏SPA覽 http://localhost:3000。 一切都應該好看!

SPA運行http://localhost:3000

在編SPA輯器中AEM打SPA開

運行SPA時 http://localhost:3000,讓我們使用編輯AEM器打SPA開它。 尚無可編輯SPA內容,這隻驗證SPA中的AEM。

  1. 登錄到AEM作者

  2. 導航到 站點> WKND應用>我們> en

  3. 選擇 WKND應用首頁 點擊 編輯,然後SPA顯示。

    編輯WKND應用首頁

  4. 切換到 預覽 使用右上角的模式切換器

  5. SPA運行http://localhost:3000

恭喜!

您已引導遠程編SPA輯器AEM兼SPA容! 您現在知道如何:

  • 將編AEM輯器SPAJS SDK npm依賴項添加到項SPA目
  • 配置環SPA境變數
  • 將ModelManager API與
  • 為設定內部代理SPA,以便將適當的內容請求路由到AEM
  • 在編輯器上SPA下文中解決靜態資源問SPA題
  • 添AEM加響應網格CSS以支援可編輯容器AEM的佈局

後續步驟

現在,我們已經實現了與編輯器的相容AEM性基SPA準,我們可以開始引入可編輯區域。 我們首先研究如何 固定可編輯元件 的上界SPA。

本頁內容