RemotePage 组件

决定 集成级别 您希望在外部SPA和AEM之间使用，通常可以清楚地看到并编辑AEM中的SPA。 RemotePage组件是一个自定义页面组件，仅用于此目的。

概述

RemotePage组件从应用程序生成的所有必需资产中获取 asset-manifest.json 并将其用于在AEM中渲染SPA。

• RemotePage允许您将SPA的脚本和样式表注入AEM页面组件的正文中。
• 虚拟前端组件允许在AEM SPA编辑器中将部分标记为可编辑。
• 同时，可以使在其他域上托管的SPA在AEM中可编辑。

请参阅文章 在AEM中编辑外部SPA 有关AEM中可编辑外部SPA的更多详细信息。

要求

• 在开发中启用CORS
• 在页面属性中配置远程URL
• 在AEM中渲染SPA
• Web应用程序必须像以下任一内容一样使用捆绑资产清单，并公开 asset-manifest.json 在 entrypoints property 要加载的所有CSS和JS文件：

  • https://github.com/shellscape/webpack-manifest-plugin

  • https://github.com/webdeveric/webpack-assets-manifest

  • https://github.com/mugi-uno/parcel-plugin-bundle-manifest

    

• 应用程序必须能够在 <div id="root"></div> 在 body 元素。 如果应用程序要实例化需要其他标记，则必须在具有 sling:resourceSuperType="spa-project-core/components/remotepage.

限制

• RemotePage组件希望该实施提供与资产清单类似的资产清单 此处找到。 但是， RemotePage组件仅经过测试，可与React框架（以及通过远程页面下一个组件的Next.js）配合使用，因此不支持从其他框架(如Angular)远程加载应用程序。
• 在AEM中进行远程渲染时，在应用程序的根HTML文件中定义的内部CSS以及根DOM节点上的内联CSS将不可用。

技术详细信息

与AEM SPA项目的其余部分一样， RemotePage组件是开源组件。 有关RemotePage组件的完整技术详细信息，请 请参阅GitHub存储库。

Business.Adobe.com 资源