Bootstrap远程SPA for SPA编辑器

必须先使用AEM SPA Editor JavaScript SDK和其他一些配置引导可编辑区域,然后才能将其添加到远程SPA。

安装AEM SPA编辑器JS SDK npm依赖项

首先,查看React项目的AEM SPA npm依赖项,并安装它们。

$ 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交互。

  1. 在IDE中的~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app处打开远程SPA项目

  2. 打开文件.env.development

  3. 在文件中,请特别注意键值,并根据需要进行更新:

    code language-none
    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:远程SPA连接到的AEM服务的方案和主机。

      • 此值根据AEM环境(本地、开发、暂存或生产)和AEM服务类型(创作与Publish)的状态而变化
    • REACT_APP_USE_PROXY:通过告知react开发服务器使用http-proxy-middleware模块代理AEM请求(例如/content, /graphql, .model.json),从而避免了在开发期间出现CORS问题。

    • REACT_APP_AUTH_METHOD:为AEM提供的请求提供身份验证方法,选项为“service-token”、“dev-token”、“basic”或对于no-auth用例保留为空

      • 需要与AEM Author一起使用
      • 可能需要与AEM Publish一起使用(如果内容受保护)
      • 针对AEM SDK进行开发时,可通过基本身份验证支持本地帐户。 这是本教程中使用的方法。
      • 与AEM as a Cloud Service集成时,使用访问令牌
    • REACT_APP_BASIC_AUTH_USER:检索AEM内容时,SPA验证的AEM 用户名

    • REACT_APP_BASIC_AUTH_PASS:检索AEM内容时SPA验证的AEM 密码

集成ModelManager API

利用应用程序可用的AEM SPA npm依赖项,在调用ReactDOM.render(...)之前,初始化项目index.js中的AEM ModelManager

ModelManager负责连接到AEM以检索可编辑的内容。

  1. 在IDE中打开远程SPA项目

  2. 打开文件src/index.js

  3. 添加导入ModelManager并在root.render(..)调用之前对其进行初始化,

    code language-javascript
    ...
    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🔗中设置内部代理,将其配置为将相应的请求路由到AEM。 这是通过使用http-proxy-middleware npm模块完成的,该模块已由基本WKND GraphQL应用程序安装。

  1. 在IDE中打开远程SPA项目

  2. src/proxy/setupProxy.spa-editor.auth.basic.js处打开文件

  3. 使用以下代码更新文件:

    code language-javascript
    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

    此代理配置主要执行两项操作:

    1. 将向SPA (http://localhost:3000)发出的特定请求代理到AEM http://localhost:4502

      • 它仅代理其路径与指示应由AEM提供服务的模式匹配的请求(如toAEM(path, req)中所定义)。
      • 它将SPA路径重写为其对应的AEM页面,如pathRewriteToAEM(path, req)中所定义
    2. 它会将CORS标头添加到所有请求,以允许对res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);定义的AEM内容的访问

      • 如果未添加此设置,则在SPA中加载AEM内容时将会发生CORS错误。
  4. 打开文件src/setupProxy.js

  5. 查看指向setupProxy.spa-editor.auth.basic代理配置文件的行:

    code language-none
    ...
    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源的绝对路径。

  1. 在IDE中打开SPA项目

  2. 打开SPA环境变量文件src/.env.development并为SPA公共URI添加变量:

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

    部署到AEM as a Cloud Service时,您需要对相应的.env文件执行相同的操作。

  3. 打开文件src/App.js

  4. 从SPA环境变量导入SPA公共URI

    code language-javascript
    const {  REACT_APP_PUBLIC_URI } = process.env;
    
    function App() { ... }
    
  5. 为WKND徽标<img src=.../>添加前缀REACT_APP_PUBLIC_URI以强制对SPA进行解析。

    code language-html
    <img src={REACT_APP_PUBLIC_URI + '/' +  logo} className="logo" alt="WKND Logo"/>
    
  6. src/components/Loading.js中加载图像时执行相同操作

    code language-javascript
    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中返回按钮的​ 两个实例

    code language-javascript
    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.jsAdventureDetails.js文件应类似于:

静态资源

AEM响应式网格

要支持SPA编辑器对SPA中可编辑区域的布局模式,我们必须将AEM响应式网格CSS集成到SPA中。 不必担心 — 此网格系统仅适用于可编辑的容器,您可以使用所选的网格系统来驱动SPA其余部分的布局。

将AEM响应式网格SCSS文件添加到SPA。

  1. 在IDE中打开SPA项目

  2. 将以下两个文件下载并复制到src/styles

  3. 打开src/App.scss并导入./styles/grid-init.scss

    code language-scss
    ...
    @import './styles/grid-init';
    ...
    

_grid.scss_grid-init.scss文件应类似于:

AEM响应式网格SCSS

现在,对于添加到AEM容器的组件,SPA包含了支持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并查看它看起来是什么样的!

  1. 在命令行中,导航到SPA项目的根目录

  2. 使用普通命令启动SPA(如果尚未这样做)

    code language-shell
    $ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
    $ npm install
    $ npm run start
    
  3. 浏览http://localhost:3000上的SPA。 一切应该看起来不错!

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

在AEM SPA编辑器中打开SPA

http://localhost:3000上运行SPA时,让我们使用AEM SPA编辑器将其打开。 SPA中尚无可编辑的内容,这仅验证AEM中的SPA。

  1. 登录AEM Author

  2. 导航到​ 站点> WKND应用程序>我们> en

  3. 选择​ WKND应用程序主页 ​并点按​ 编辑,将显示SPA。

    编辑WKND应用程序主页

  4. 使用右上角的模式切换器切换到​ 预览

  5. 单击SPA周围

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

恭喜!

您已引导远程SPA使其与AEM SPA Editor兼容! 您现在知道如何:

  • 将AEM SPA编辑器JS SDK npm依赖项添加到SPA项目
  • 配置SPA环境变量
  • 将ModelManager API与SPA集成
  • 为SPA设置内部代理,以便将相应的内容请求路由到AEM
  • 解决在SPA Editor上下文中解析静态SPA资源的问题
  • 添加AEM响应式网格CSS以支持AEM可编辑容器中的布局

后续步骤

现在,我们已经达到了与AEM SPA Editor的兼容性基准,我们可以开始引入可编辑区域。 我们首先了解如何在SPA中放置可编辑的固定组件

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4