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 anentrypoints 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
-
The application must be able to initialize in a
<div id="root"></div>
underneath thebody
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 asling: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.