Visão geral
Boas vindas ao tutorial em várias partes para desenvolvedores que desejam ampliar um SPA remoto existente baseado em React (ou Next.js) com conteúdo editável do AEM por meio do editor de SPA do AEM.
Este tutorial baseia-se no aplicativo em GraphQL da WKND, um aplicativo em React que consome conteúdo de fragmentos de conteúdo do AEM nas APIs em GraphQL do AEM. No entanto, ele não fornece nenhuma criação com contexto de conteúdo de SPA.
Sobre o tutorial
O tutorial tem como objetivo ilustrar como um SPA remoto ou um SPA executado fora do contexto do AEM pode ser atualizado para consumir e fornecer conteúdo criado no AEM.
A maioria das atividades do tutorial se concentra no desenvolvimento de JavaScript, mas também são abordados aspectos cruciais associados ao AEM. Esses aspectos incluem definir onde o conteúdo é criado e armazenado no AEM e como mapear rotas do SPA para páginas do AEM.
O tutorial foi projetado para funcionar com o AEM as a Cloud Service e consiste em dois projetos:
- O projeto do AEM contém a configuração e o conteúdo que devem ser implantados no AEM.
- O projeto do aplicativo da WKND é o SPA a ser integrado ao editor de SPA do AEM
Código mais recente
- O ponto de partida do código deste tutorial pode ser encontrado no GitHub, na pasta
remote-spa-tutorial.
Pré-requisitos
Este tutorial requer o seguinte:
Este tutorial pressupõe que você possui:
- Microsoft® Visual Studio Code como IDE
- Um diretório de trabalho de
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial - Execução do SDK do AEM como um serviço de criação no
http://localhost:4502 - Executar o SDK do AEM com a conta
adminlocal e a senhaadmin - Execução do SPA em
http://localhost:3000
1. Configurar o AEM para o editor de SPA
As configurações do AEM são necessárias para integrar o SPA ao editor de SPA do AEM. Essas configurações são gerenciadas e implantadas por meio de um projeto do AEM. Neste capítulo, saiba quais configurações são necessárias e como defini-las.
2. Inicializar o SPA
Para que o editor de SPA do AEM integre um SPA a seu contexto de criação, é necessário adicionar alguns elementos ao SPA.
3. Componentes fixos editáveis
Primeiro, aprenda a adicionar um “componente fixo” editável ao SPA. Isso ilustra como um desenvolvedor pode inserir um componente editável específico no SPA. Embora o criador possa alterar o conteúdo do componente, não é possível remover o componente nem alterar sua inserção, posicionamento ou tamanho.
4. Componentes de container editáveis
Em seguida, aprenda a adicionar um “componente de container” editável ao SPA. Isso ilustra como um(a) desenvolvedor(a) pode inserir um componente de container no SPA. Os componentes de container permitem que os criadores insiram o componente permitido e ajustem o layout dos componentes.
5. Rotas dinâmicas e componentes editáveis
Por fim, use os conceitos explicados nos capítulos anteriores sobre rotas dinâmicas, as quais exibem um conteúdo diferente com base no parâmetro da rota em questão. Isso ilustra como o editor de SPA do AEM pode ser usado para criar conteúdo em rotas orientadas e derivadas de forma programática.