Visão geral

Bem-vindo ao tutorial de várias partes para desenvolvedores que procuram aumentar um SPA Remoto baseado em Reação (ou Next.js) existente com conteúdo AEM editável usando AEM Editor SPA.

Este tutorial baseia-se no Aplicativo GraphQL WKND, um aplicativo React que consome AEM conteúdo do Fragmento de conteúdo sobre AEM APIs GraphQL, no entanto, não fornece nenhuma criação de contexto de conteúdo SPA.

Sobre o tutorial

O tutorial tem como objetivo ilustrar como um SPA Remoto, ou um SPA executado fora do contexto de AEM, pode ser atualizado para consumir e fornecer conteúdo criado em AEM.

A maioria das atividades no tutorial se concentra no desenvolvimento do JavaScript, no entanto, os aspectos críticos são abordados e giram em torno do AEM. Esses aspectos incluem a definição de onde o conteúdo é criado e armazenado em AEM e o mapeamento SPA rotas para páginas AEM.

O tutorial foi projetado para funcionar com AEM como um Cloud Service e é composto de dois projetos:

  1. O AEM Projeto contém configuração e conteúdo que devem ser implantados em AEM.
  2. O Appproject WKND é o SPA a ser integrado AEM Editor SPA

Código mais recente

  • O código deste tutorial pode ser encontrado em GitHub na ramificação feature/spa-editor.

Pré-requisitos

Este tutorial requer o seguinte:

Este tutorial presume:

  • Microsoft® Visual Studio Codeas o IDE
  • Um diretório de trabalho de ~/Code/wknd-app
  • Executar o SDK do AEM como um serviço de Autor em http://localhost:4502
  • Execução do SDK AEM com a conta local admin com a senha admin
  • Execução do SPA em http://localhost:3000
OBSERVAÇÃO

Precisa de ajuda para configurar seu ambiente de desenvolvimento local? Consulte o guia a seguir para configurar um ambiente de desenvolvimento local usando o SDK do AEM as a Cloud Service.

Configuração rápida

A Configuração rápida ativa você com o SPA de aplicativos WKND e AEM Editor de SPA em 15 minutos. Essa configuração acelerada leva você diretamente ao estado final do tutorial, permitindo explorar a criação do SPA no AEM Editor SPA.

1. Configurar AEM para SPA Editor

AEM configurações são necessárias para integrar o SPA com AEM Editor de SPA. Essas configurações são gerenciadas e implantadas por meio de um AEM Project. Neste capítulo, saiba mais sobre as configurações necessárias e como defini-las.

2. Bootstrap do SPA

Para que AEM SPA Editor integre um SPA ao seu contexto de criação, algumas adições devem ser feitas ao SPA.

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 seu posicionamento, 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 último, utilizar os conceitos explicados nos capítulos anteriores para rotas dinâmicas; rotas que exibem conteúdo diferente com base no parâmetro da rota. Isso ilustra como AEM Editor de SPA pode ser usado para criar conteúdo em rotas que são orientadas e derivadas de forma programática.

Recursos adicionais

Nesta página