Visão geral
Bem-vindo ao tutorial em várias partes para desenvolvedores que buscam aumentar um SPA remoto baseado no React (ou Next.js) existente com conteúdo de AEM editável usando o Editor de SPA AEM.
Este tutorial se baseia no Aplicativo WKND GraphQL, um aplicativo React que consome conteúdo do Fragmento de conteúdo do AEM em vez das APIs do GraphQL SPA do AEM, no entanto, não fornece nenhuma criação em contexto do conteúdo do.
Sobre o tutorial
O tutorial destinado a ilustrar como um SPA remoto, ou SPA executado fora do contexto do AEM AEM, pode ser atualizado para consumir e entregar conteúdo criado no.
A maioria das atividades do tutorial foca no desenvolvimento de JavaScript, no entanto, são abordados aspectos críticos que giram em torno do AEM. Esses aspectos incluem definir onde o conteúdo é criado e armazenado no AEM e mapear rotas do SPA para páginas do AEM.
O tutorial foi projetado para funcionar com o AEM as a Cloud Service e é composto por dois projetos:
- O Projeto AEM contém a configuração e o conteúdo que devem ser implantados para AEM.
- O projeto WKND App é o SPA a ser integrado ao editor SPA do AEM do do
Código mais recente
- O ponto de partida do código deste tutorial pode ser encontrado no GitHub da pasta
remote-spa-tutorial.
Pré-requisitos
Este tutorial requer o seguinte:
Este tutorial pressupõe:
- Microsoft® Visual Studio Code como IDE
- Um diretório de trabalho de
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial - Executando o SDK do AEM como um serviço de Autor em
http://localhost:4502 - Executando o SDK do AEM com a conta local
admincom a senhaadmin - Executando o SPA em
http://localhost:3000
1. Configurar o SPA para o Editor de AEM
Configurações de AEM são necessárias para integrar o SPA com o editor de AEM SPA. Essas configurações são gerenciadas e implantadas por meio de um projeto AEM. Neste capítulo, saiba quais configurações são necessárias e como defini-las.
2. Bootstrap do SPA
Para o SPA Editor integrar um SPA SPA ao contexto de criação, algumas adições devem ser feitas ao AEM.
3. Componentes fixos editáveis
Primeiro, explore a adição de um "componente fixo" editável ao SPA. Isso ilustra como um desenvolvedor pode colocar um componente editável específico no SPA. Embora o autor possa alterar o conteúdo do componente, ele não pode remover o componente ou alterar sua disposição, posicionamento ou tamanho.
4. Componentes editáveis do contêiner
Em seguida, explore a adição de um "componente de contêiner" editável ao SPA. Isso ilustra como um desenvolvedor pode colocar um componente de contêiner no SPA. Os componentes do contêiner permitem que os autores coloquem o componente permitido nele e ajustem o layout dos componentes.
5. Rotas dinâmicas e componentes editáveis
Por fim, use os conceitos explicados nos capítulos anteriores para rotas dinâmicas; rotas que exibem conteúdo diferente com base no parâmetro da rota. AEM Isso ilustra como o Editor de SPA pode ser usado para criar conteúdo em rotas que são orientadas e derivadas de forma programática.