Información general
SPA AEM AEM SPA Bienvenido al tutorial de varias partes para desarrolladores que buscan aumentar un contenido remoto basado en React (o Next.js) existente con contenido editable de la mediante el Editor de contenido de la aplicación.
Este tutorial se basa en WKND GraphQL App, una aplicación de React que consume contenido de fragmentos de contenido de la red de contenido (FDA) de la red de aplicaciones (API) de GraphQL SPA, pero que no proporciona ninguna creación de contenido en contexto de la red de aplicaciones (API) de la red de aplicaciones de AEM AEM de la red de.
Información sobre el tutorial
SPA SPA AEM AEM El tutorial tiene por objeto ilustrar cómo se puede actualizar un remoto, o una aplicación que se ejecuta fuera del contexto de la, para consumir y entregar contenido creado en la aplicación de la manera más rápida y sencilla. En este ejemplo, se puede crear un tutorial de.
La mayoría de las actividades del tutorial se centran en el desarrollo de JavaScript AEM; sin embargo, se cubren aspectos esenciales que giran en torno a la. AEM SPA AEM Estos aspectos incluyen la definición de dónde se crea el contenido y dónde se almacena en las rutas de acceso de la y la asignación de rutas de acceso a las páginas de la página de destino.
El tutorial está diseñado para funcionar con AEM as a Cloud Service y se compone de dos proyectos:
- AEM AEM El Proyecto de contiene configuración y contenido que deben implementarse para la implementación de los elementos de la interfaz de usuario de la interfaz de usuario de la interfaz de usuario de.
- SPA AEM SPA El proyecto WKND App es el proyecto que se va a integrar con el Editor de de la aplicación de
Ú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 supone lo siguiente:
- Microsoft® Visual Studio Code como IDE
- Un directorio de trabajo de
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial - AEM Ejecución del SDK de la como servicio de autor en
http://localhost:4502 - AEM Ejecutando el SDK de la con la cuenta
adminlocal con la contraseñaadmin - SPA Ejecutando el recurso de la cuenta de usuario el
http://localhost:3000
AEM SPA 1. Configurar la para el Editor de
AEM SPA AEM SPA Se requieren configuraciones de para integrar el con el Editor de. AEM Estas configuraciones se administran e implementan mediante un proyecto de. En este capítulo, aprenderá qué configuraciones son necesarias y cómo definirlas.
2. Bootstrap SPA de la
AEM SPA SPA SPA Para que el Editor de integre un elemento de trabajo en el contexto de creación de un elemento de trabajo, se deben realizar algunas adiciones a la.
3. Componentes fijos editables
SPA 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 lista de componentes de la lista de componentes de la. 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
SPA A continuación, explore la adición de un "componente contenedor" editable a la. SPA Esto ilustra cómo un desarrollador puede colocar un componente contenedor en la interfaz de usuario de. Los componentes de contenedor permiten a los autores colocar el componente permitido en él y ajustar el diseño de los componentes.
5. Rutas dinámicas y componentes editables
Por último, utilice los conceptos explicados en capítulos anteriores para crear rutas dinámicas; rutas que muestren contenido diferente en función del parámetro de la ruta. AEM SPA Esto ilustra cómo se puede utilizar el Editor de código para crear contenido en rutas controladas y derivadas mediante programación.