Le damos la bienvenida al tutorial en varias partes para desarrolladores que buscan aumentar un SPA remoto basado en React (o Next.js) existente con contenido AEM editable mediante AEM editor SPA.
Este tutorial se basa en la variable Aplicación WKND GraphQL, una aplicación React que consume AEM contenido del fragmento de contenido sobre AEM API de GraphQL, sin embargo no proporciona ninguna creación en contexto de SPA contenido.
El tutorial pretende ilustrar cómo se puede actualizar un SPA remoto o un SPA que se ejecute fuera del contexto de AEM para consumir y entregar contenido creado en AEM.
La mayoría de las actividades del tutorial se centran en el desarrollo de JavaScript; sin embargo, se tratan aspectos críticos que giran en torno a la AEM. Estos aspectos incluyen la definición de dónde se crea y almacena el contenido en AEM y la asignación SPA rutas a páginas AEM.
El tutorial está diseñado para funcionar con AEM as a Cloud Service y está compuesto por dos proyectos:
remote-spa-tutorial
carpeta.Este tutorial requiere lo siguiente:
Este tutorial supone:
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial
http://localhost:4502
admin
cuenta con contraseña admin
http://localhost:3000
¿Necesita ayuda para configurar su entorno de desarrollo local? Consulte la siguiente guía para configurar un entorno de desarrollo local con el SDK de AEM as a Cloud Service.
AEM configuraciones son necesarias para integrar la SPA con AEM Editor SPA. Estas configuraciones se administran e implementan mediante un proyecto AEM. En este capítulo, conozca qué configuraciones son necesarias y cómo definirlas.
Para que AEM SPA Editor integre una SPA en su contexto de creación, se deben realizar algunas adiciones a la SPA.
En primer lugar, explore la posibilidad de añadir un "componente fijo" editable al 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.
A continuación, explore la posibilidad de agregar un "componente contenedor" editable al SPA. Esto ilustra cómo un desarrollador puede colocar un componente contenedor en el SPA. Los componentes de contenedor permiten a los autores colocar en él el componente permitido y ajustar el diseño de los componentes.
Por último, utilice los conceptos descritos en capítulos anteriores para las rutas dinámicas; rutas que muestran contenido diferente en función del parámetro de ruta. Esto ilustra cómo se puede utilizar AEM editor SPA para crear contenido en rutas que se dirigen mediante programación y se derivan.