Ao decidir qual nível de integração você gostaria de ter entre seu SPA externo e o AEM, geralmente fica claro que é necessário visualizar e editar o SPA no AEM. O Componente RemotePage é um componente de página personalizado apenas para essa finalidade.
O componente RemotePage busca todos os ativos necessários do aplicativo gerado asset-manifest.json
O e o usa para renderizar a SPA no AEM.
Veja o artigo Edição de um SPA externo no AEM para obter mais detalhes sobre SPA editáveis e externos em AEM.
Habilitar CORS no desenvolvimento
Configurar o URL remoto nas Propriedades da página
Renderizar a SPA em AEM
A aplicação Web deve usar um manifesto de ativo do pacote como um dos itens a seguir e expor um arquivo asset-manifest.json na raiz do domínio que lista em uma propriedade de pontos de entrada todos os arquivos CSS e JS que devem ser carregados:
O aplicativo deve ser capaz de inicializar em um <div id="root"></div>
sob o elemento body . Se uma marcação diferente for esperada para o aplicativo instanciar, isso deverá ser ajustado adequadamente nos scripts HTL do componente proxy que tem uma sling:resourceSuperType="spa-project-core/components/remotepage
.
Como o resto do projeto de SPA de AEM, o Componente RemotePage é de código aberto. Para obter os detalhes técnicos completos do Componente de página remota, consulte o repositório GitHub.