Información general

Última actualización: 2024-01-25
  • Creado para:
  • Beginner
    Developer

Para publicar desde AEM Sites con Edge Delivery Services, haga clic aquí.

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 Aplicación WKND GraphQLAEM AEM , una aplicación de React que consume contenido de fragmentos de contenido de la red de contenido de la red de contenido de la red de Internet (React) de la red de contenido de GraphQL SPA, pero que no proporciona ninguna creación en contexto de contenido 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.

AEM La mayoría de las actividades del tutorial se centran en el desarrollo de JavaScript; sin embargo, se cubren aspectos críticos 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 trabajar con AEM as a Cloud Service y se compone de dos proyectos:

  1. El AEM Proyecto de AEM contiene la configuración y el contenido que deben implementarse para la implementación de la configuración de la.
  2. Aplicación WKND SPA AEM SPA El proyecto es el proyecto que se debe integrar con el Editor de la de trabajo

Último código

  • El punto de partida del código de este tutorial se encuentra en GitHub en el remote-spa-tutorial carpeta.

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 Ejecución del SDK de la con la variable local admin cuenta con contraseña admin
  • SPA Ejecución de la http://localhost:3000
NOTA

¿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 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.

Recursos adicionales

En esta página