Requirements

  • Enable CORS in development

  • Configure remote URL in Page Properties

  • Render the SPA in AEM

  • The web application must use a bundler asset manifest like one of the following, and expose an asset-manifest.json file at the domain root that lists in an entrypoints property all CSS and JS files that are to be loaded:

    • https://github.com/shellscape/webpack-manifest-plugin
    • https://github.com/webdeveric/webpack-assets-manifest
    • https://github.com/mugi-uno/parcel-plugin-bundle-manifest
      entrypoints property example
  • The application must be able to initialize in a <div id="root"></div> underneath the body element. If a different markup is expected for the app to instantiate, then this must be adjusted accordingly in the HTL scripts of the proxy component that has a sling:resourceSuperType="spa-project-core/components/remotepage.

Limitations

  • The RemotePage component expects that the implementation provides an asset-manifest like the one found here. The RemotePage component, however, has only been tested to work with the React framework (and Next.js by way of the remote-page-next component), and therefore does not support remotely loading applications from other frameworks, such as Angular.
  • Internal CSS defined in the application’s root HTML file and inline CSS on the root DOM node will not be available when doing remote rendering in AEM.