Ao decidir qual nível de integração você gostaria de ter entre seu SPA externo e AEM, geralmente fica claro que você precisa ser capaz de visualizar e editar o SPA dentro do AEM. O componente RemotePage é um componente de página personalizado apenas para esta finalidade.
O componente RemotePage busca todos os ativos necessários do aplicativo gerado asset-manifest.json
e usa isso para renderizar o SPA dentro do AEM.
Consulte o artigo Edição de um AEM externo no SPA para obter mais detalhes sobre SPA externo editável no AEM.
Ativar o CORS em desenvolvimento
Configurar o URL remoto nas Propriedades da página
Renderizar o AEM no SPA
O aplicativo da Web deve usar um manifesto de ativo de pacote como um dos seguintes 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>
abaixo do elemento body. Se uma marcação diferente for esperada para o aplicativo instanciar, ela deverá ser ajustada de acordo nos scripts HTL do componente proxy que tem um sling:resourceSuperType="spa-project-core/components/remotepage
.
AEM Como o restante do projeto SPA, o componente RemotePage é de código aberto. Para obter todos os detalhes técnicos do componente RemotePage, consulte o repositório do GitHub.