Bootstrap遠端SPA for SPA編輯器

上次更新： 2023-12-04

主題：
SPA Editor
檢視有關此主題的更多資訊
APIs
檢視有關此主題的更多資訊
Developing
檢視有關此主題的更多資訊

建立對象：
Beginner

Developer

將可編輯區域新增到遠端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 React元件。

$ 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開發伺服器代理AEM請求(例如 /content, /graphql, .model.json 使用 http-proxy-middleware 模組。
- REACT_APP_AUTH_METHOD：適用於AEM服務請求的驗證方法，選項為「service-token」、「dev-token」、「basic」或對「無驗證」使用案例保留空白
  - 與AEM Author搭配使用時需要使用
  - 可能需要搭配AEM Publish使用（如果內容受到保護）
  - 針對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 ModelManager 在專案的 index.js 早於 ReactDOM.render(...) 叫用的是。

此模型管理員負責連線至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 Proxy

建立可編輯的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
- 它只會代理其路徑符合模式的請求，這些模式表示這些請求應該由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 proxy設定檔：

...
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
```
部署至AEMas a Cloud Service時，您需要 .env 檔案。
開啟檔案 src/App.js

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

const {  REACT_APP_PUBLIC_URI } = process.env;

function App() { ... }

為WKND標誌加上前置詞 <img src=.../> 替換為 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回應式格線CSS整合至SPA。別擔心 — 此格線系統僅適用於可編輯的容器，而您可以使用您選擇的格線系統來驅動SPA其餘部分的版面。

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

在IDE中開啟SPA專案
下載下列兩個檔案並複製到中 src/styles
- _格線.scss
  - AEM回應式格線SCSS產生器
- _格線 — 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 至 ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/RoutedLink.js
editorplaceholder.js 至 ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/EditorPlaceholder.js
withConditionalPlaceholder.js 至 ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withConditionalPlaceholder.js
withstandardBaseCssClass.js 至 ~/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. 應該一切正常！

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

在SPA SPA編輯器中開啟AEM

當SPA執行於時 http://localhost:3000，接著使用AEM SPA Editor將其開啟。在SPA中尚無法編輯任何專案，這只會驗證AEM中的SPA。

登入AEM Author
瀏覽至 網站> WKND應用程式>我們>英文
選取 WKND應用程式首頁 然後點選編輯，則會出現SPA。
切換至預覽使用右上方的模式切換器
在SPA周圍按一下

恭喜！

您已啟動遠端SPA，使其與AEM SPA Editor相容！您現在知道如何：

將AEM SPA編輯器JS SDK npm相依性新增至SPA專案
設定您的SPA環境變數
將ModelManager API與SPA整合
為SPA設定內部Proxy，以便將適當的內容要求路由傳送至AEM
解決在SPA編輯器內容中解析靜態SPA資源的問題
新增AEM回應式格線CSS以支援AEM可編輯容器中的版面配置

後續步驟

我們與AEM SPA Editor的相容性已達底線，現在可以開始匯入可編輯區域了。我們先來看一下如何放置固定可編輯元件在SPA中。