外部 SPA と AEM の間でどのレベルの統合を行うかを決める際に、AEM 内で SPA を表示して編集できる必要があることはよくあります。RemotePage コンポーネントは、この目的のためのカスタムページコンポーネントです。
RemotePage コンポーネントは、アプリケーションで生成された asset-manifest.json
から必要なアセットをすべて取得し、これを使用して AEM 内の SPA +をレンダリングします。
AEM の編集可能な外部 SPA の詳細については、AEM 内の外部 SPA の編集を参照してください。
entrypoints property
にリストする asset-manifest.json
ファイルをドメインルートに公開する必要があります。
https://github.com/shellscape/webpack-manifest-plugin
https://github.com/webdeveric/webpack-assets-manifest
https://github.com/mugi-uno/parcel-plugin-bundle-manifest
body
要素の下の <div id="root"></div>
で初期化できる必要があります。アプリケーションで異なるマークアップをインスタンス化する必要がある場合は、sling:resourceSuperType="spa-project-core/components/remotepage
を持つプロキシコンポーネントの HTL スクリプトで適宜調整する必要があります。AEM SPA プロジェクトの他の部分と同様、RemotePage コンポーネントもオープンソースです。RemotePage コンポーネントの技術的な詳細については、GitHub リポジトリを参照してください。