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 aplicación WKND GraphQL, una aplicación React que consume AEM contenido de fragmentos de contenido sobre AEM API de GraphQL, pero no proporciona ninguna creación en contexto de contenido SPA.

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 como Cloud Service y consta de dos proyectos:

  1. El AEM proyecto contiene configuración y contenido que se deben implementar en AEM.
  2. WKND Appproject es el SPA que se integra con AEM SPA Editor

Último código

  • El código de este tutorial se encuentra en GitHub en la rama feature/spa-editor.

Requisitos previos

Este tutorial requiere lo siguiente:

Este tutorial supone:

  • Código Microsoft® Visual Studio como el IDE
  • Un directorio de trabajo de ~/Code/wknd-app
  • Ejecución del SDK de AEM como servicio de creación en http://localhost:4502
  • Ejecución del SDK de AEM con la cuenta local admin 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.

Configuración rápida

La configuración rápida le permite poner en marcha la aplicación WKND SPA y AEM SPA Editor en 15 minutos. Esta configuración acelerada le lleva directamente al estado final del tutorial, lo que le permite explorar la creación de la SPA en AEM Editor SPA.

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