Información general

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.

Acerca del tutorial

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:

  1. La variable AEM proyecto contiene configuración y contenido que deben implementarse en AEM.
  2. Aplicación WKND es el SPA que se va a integrar con AEM SPA Editor

Último código

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

Requisitos previos

Este tutorial requiere lo siguiente:

Este tutorial supone:

  • Código Microsoft® Visual Studio como el IDE
  • Un directorio de trabajo de ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial
  • Ejecución del SDK de AEM como servicio de creación en http://localhost:4502
  • Ejecución del SDK de AEM con el admin cuenta con contraseña admin
  • Ejecución del SPA en 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.

1. Configurar AEM para SPA Editor

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.

2. Bootstrap del SPA

Para que AEM SPA Editor 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 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.

4. Componentes de contenedor editables

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.

5. Rutas dinámicas y componentes editables

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.

Recursos adicionales

En esta página