Información general
Bienvenido al tutorial de varias partes para desarrolladores que buscan aumentar las SPA remotas basadas en una biblioteca React (o Next.js) existente con contenido editable de AEM mediante el editor de SPA de AEM.
Este tutorial se basa en la aplicación WKND GraphQL React, esta consume contenido de fragmentos de contenido de AEM a través de las API de GraphQL de AEM; sin embargo, no proporciona ninguna creación contextual de contenido de SPA.
Información sobre el tutorial
El tutorial muestra cómo actualizar una SPA remota o una SPA que se ejecute fuera del contexto de AEM para consumir y enviar contenido creado en AEM.
La mayoría de las actividades del tutorial se centran en el desarrollo de JavaScript; también se tratan aspectos esenciales de AEM. Estos aspectos incluyen la definición de dónde se crea y almacena el contenido en AEM y la asignación de rutas de SPA a páginas de AEM.
El tutorial está diseñado para funcionar con AEM as a Cloud Service, y se compone de los dos proyectos siguientes:
- El proyecto de AEM contiene la configuración y el contenido que se debe implementar en AEM.
- El proyecto Aplicación WKND es la SPA que se integra con el editor de SPA de AEM
Último código
- El punto de partida del código de este tutorial se encuentra en GitHub, en la carpeta
remote-spa-tutorial.
Requisitos previos
Este tutorial requiere lo siguiente:
Este tutorial utiliza lo siguiente:
- Microsoft® Visual Studio Code como IDE
- Un directorio de trabajo de
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial - Ejecución del SDK de AEM como un servicio de Author en
http://localhost:4502 - Ejecución del SDK de AEM con la cuenta local
admincon la contraseñaadmin - Ejecución de la SPA en
http://localhost:3000
1. Configurar AEM para el editor de SPA
Se requieren configuraciones de AEM para integrar la SPA con el editor de SPA de AEM. Estas configuraciones se administran e implementan mediante un proyecto de AEM. En este capítulo, aprenderá qué configuraciones son necesarias y cómo definirlas.
2. Arrancar la SPA
Para que el editor de SPA de AEM integre una SPA en su contexto de creación, se deben realizar algunas adiciones a la SPA.
3. Componentes fijos editables
En primer lugar, explore la adición de un “componente fijo” editable a la SPA. Esto ilustra cómo un desarrollador puede colocar un componente editable específico en la SPA. Aunque el autor puede cambiar el contenido del componente, no puede quitarlo ni cambiar su ubicación, posición o tamaño.
4. Componentes editables del contenedor
A continuación, explore la adición de un “componente del contenedor” editable a la SPA. Esto ilustra cómo un desarrollador puede colocar un componente del contenedor en la SPA. Los componentes del contenedor permiten a los autores colocar el componente permitido y ajustar su diseño.
5. Rutas dinámicas y componentes editables
Por último, utilice los conceptos que se explican en los capítulos anteriores para crear rutas dinámicas; estas rutas muestran contenido diferente en función del parámetro de la ruta. Esto ilustra cómo se puede utilizar el editor de SPA de AEM para crear contenido en rutas controladas y derivadas mediante programación.