Bootstrap遠端SPA for SPA編輯器

可編輯區域可新增至遠端SPA之前，必須先以AEM SPA編輯器JavaScript SDK及一些其他設定引導。

安裝AEM SPA Editor JS SDK npm相依性

首先，檢閱React專案的AEM SPA npm相依性並加以安裝。

@adobe/aem-spa-page-model-manager :提供從AEM擷取內容的API。
@adobe/aem-spa-component-mapping :提供將AEM內容對應至SPA元件的API。
@adobe/aem-react-editable-components v2 :提供用於建置自訂SPA元件的API，並提供常用實作，例如 AEMPage 反應元件。

$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install @adobe/aem-spa-page-model-manager
$ npm install @adobe/aem-spa-component-mapping
$ npm install @adobe/aem-react-editable-components

檢閱SPA環境變數

數個環境變數必須公開給遠端SPA，以便其了解如何與AEM互動。

在開啟遠端SPA專案 ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app 在IDE中
開啟檔案 .env.development
在檔案中，請特別注意索引鍵，並視需要更新：
```
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
```
請記住，React中的自訂環境變數必須加上前置詞 REACT_APP_.
- REACT_APP_HOST_URI:遠端SPA所連線之AEM服務的配置和主機。
  - 如果AEM環境（本機、開發、預備或生產）和AEM服務類型（製作與發佈），此值會隨之變更
- REACT_APP_USE_PROXY:這可借由向react開發伺服器告知proxy AEM請求(例如 /content, /graphql, .model.json 使用 http-proxy-middleware 模組。
- REACT_APP_AUTH_METHOD:AEM已呈現請求的驗證方法、選項為「service-token」、「dev-token」、「basic」，或留空供無驗證使用案例使用
  - 與AEM作者搭配使用必要
  - 與AEM Publish搭配使用可能需要（如果內容受到保護）
  - 針對AEM SDK進行開發可支援透過基本驗證的本機帳戶。這是本教學課程中使用的方法。
  - 與AEMas a Cloud Service整合時，請使用存取權杖
- REACT_APP_BASIC_AUTH_USER:AEM 用戶名 ，以在擷取AEM內容時進行驗證。
- REACT_APP_BASIC_AUTH_PASS:AEM 密碼，以在擷取AEM內容時進行驗證。

整合ModelManager API

使用應用程式可用的AEM SPA npm相依性，初始化AEM ModelManager 在項目的 index.js befor ReactDOM.render(...) 叫用的是。

此 ModelManager 負責連線至AEM以擷取可編輯的內容。

在IDE中開啟遠程SPA項目
開啟檔案 src/index.js

新增匯入 ModelManager 並在之前初始化 root.render(..) 調用，

...
import { ModelManager } from "@adobe/aem-spa-page-model-manager";

// Initialize the ModelManager before invoking root.render(..).
ModelManager.initializeAsync();

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

此 src/index.js 檔案看起來應該像這樣：

src/index.js

設定內部SPA代理

建立可編輯的SPA時，最好設定 SPA中的內部Proxy，此變數會設定為將適當的請求路由至AEM。這需使用 http-proxy-middleware npm模組，基本WKND GraphQL應用程式已安裝此模組。

在IDE中開啟遠程SPA項目
在開啟檔案 src/proxy/setupProxy.spa-editor.auth.basic.js

使用下列程式碼更新檔案：

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_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`,
                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

此代理設定執行兩項主要動作：

Proxy對SPA提出的特定請求(http://localhost:3000)到AEM http://localhost:4502
- 只有Proxy請求的路徑符合指示AEM應提供這些服務的模式，如 toAEM(path, req).
- 如中所定義，會將SPA路徑重新寫入對應的AEM頁面 pathRewriteToAEM(path, req)
它會將CORS標題新增至所有請求，以允許存取AEM內容(定義為 res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
- 如果未新增，則在SPA中載入AEM內容時會發生CORS錯誤。

開啟檔案 src/setupProxy.js

查看指向 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');
...

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

靜態SPA資源

靜態SPA資源（例如WKND標誌和載入圖形）需要更新其src URL，以強制從遠端SPA主機載入。若相對左，當SPA在SPA編輯器中載入以進行編寫時，這些URL預設會使用AEM主機，而非SPA，因此會產生404個要求，如下圖所示。

中斷的靜態資源

若要解決此問題，請讓遠端SPA托管的靜態資源使用包含遠端SPA來源的絕對路徑。

在IDE中開啟SPA專案
開啟SPA環境變數檔案 src/.env.development 並為SPA公用URI新增變數：
```
...
# The base URI the SPA is accessed from
REACT_APP_PUBLIC_URI=http://localhost:3000
```
部署至AEM as a Cloud Service時，您需要對應 .env 檔案。
開啟檔案 src/App.js

從SPA環境變數匯入SPA公用URI

const {  REACT_APP_PUBLIC_URI } = process.env;

function App() { ... }

為WKND徽標加上前置詞 <img src=.../> with REACT_APP_PUBLIC_URI 來強制對SPA。
```
<img src={REACT_APP_PUBLIC_URI + '/' +  logo} className="logo" alt="WKND Logo"/>
```

在中載入影像時也請執行相同操作 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>);
    }
}

對於 兩個例項 中的後按鈕 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.js, Loading.js，和 AdventureDetails.js 檔案應該如下：

靜態資源

AEM回應式格線

若要支援SPA編輯器的版面模式，以便在SPA中處理可編輯區域，我們必須將AEM Responsive Grid CSS整合至SPA。別擔心 — 此網格系統僅適用於可編輯的容器，並且您可以使用所選的網格系統來驅動其餘SPA的佈局。

將AEM回應式格線SCSS檔案新增至SPA。

在IDE中開啟SPA專案
下載以下兩個檔案並複製到 src/styles
- _grid.scss
  - AEM回應式格線SCSS產生器
- _grid-init.scss
  - 調用 _grid.scss 使用SPA的特定中斷點（案頭和行動裝置）和欄(12)。
開啟 src/App.scss 和匯入 ./styles/grid-init.scss
```
...
@import './styles/grid-init';
...
```

此 _grid.scss 和 _grid-init.scss 檔案應該如下：

AEM回應式格線SCSS

現在，SPA包含新增至AEM容器之元件支援AEM版面模式所需的CSS。

實用程式類

將下列公用程式類別中的內容複製到您的React應用程式專案。

RoutedLink.js to ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/RoutedLink.js
EditorPlaceholder.js to ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/EditorPlaceholder.js
withConditionalPlaceholder.js to ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withConditionalPlaceholder.js
withStandardBaseCssClass.js to ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withStandardBaseCssClass.js

遠程SPA實用程式類

啟動SPA

現在SPA正在啟動以便與AEM整合，讓我們執行SPA並查看看看看起來是什麼樣子！

使用一般命令啟動SPA（如果尚未執行）

$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install
$ npm run start

在上瀏覽SPA http://localhost:3000. 一切都應該好看！

SPA在http://localhost:3000上執行

在AEM SPA編輯器中開啟SPA

當SPA執行時 http://localhost:3000，請使用AEM SPA編輯器開啟它。 SPA中尚無可編輯的項目，這只會驗證AEM中的SPA。

登入AEM作者
導覽至 網站> WKND應用程式>我們>結束
選取 WKND應用首頁 點選編輯，則會顯示SPA。
切換至預覽使用右上角的模式切換器
按一下週圍的SPA

恭喜！

您已引導遠端SPA以相容AEM SPA編輯器！您現在知道如何：

將AEM SPA Editor JS SDK npm相依性新增至SPA專案
設定SPA環境變數
將ModelManager API與SPA整合
設定SPA的內部代理，以便將適當的內容要求路由至AEM
解決在SPA Editor中解決靜態SPA資源的問題
新增AEM Responsive Grid CSS以支援AEM可編輯容器中的版面配置

後續步驟

現在，我們已取得與AEM SPA Editor相容性的基準，可以開始介紹可編輯的區域。我們先看看如何固定可編輯元件在SPA中。

全新的改善搜尋

Bootstrap遠端SPA for SPA編輯器

安裝AEM SPA Editor JS SDK npm相依性

檢閱SPA環境變數

整合ModelManager API

設定內部SPA代理

靜態SPA資源

AEM回應式格線

實用程式類

啟動SPA

在AEM SPA編輯器中開啟SPA

恭喜！

後續步驟

Business.Adobe.com 資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe