Configuración de un entorno de desarrollo local

Un entorno de desarrollo local es esencial para el rápido desarrollo de los sitios web distribuidos por Edge Delivery Services. El entorno utiliza código desarrollado localmente mientras obtiene contenido de Edge Delivery Services, lo que permite a los desarrolladores ver instantáneamente los cambios en el código. Esta configuración admite pruebas y desarrollo rápidos e iterativos.

Las herramientas y los procesos de desarrollo de un proyecto de sitio web de Edge Delivery Services están diseñados para resultarles familiares a los desarrolladores web y proporcionar una experiencia de desarrollo rápida y eficaz.

Topología de desarrollo

En este vídeo se ofrece información general sobre la topología de desarrollo para un proyecto de sitio web de Edge Delivery Services que se puede editar con el editor universal.

Requisitos previos

Antes de iniciar el desarrollo, instale lo siguiente en su equipo:

Clonación del repositorio de GitHub

Clone el repositorio de GitHub creado en el capítulo del proyecto de código nuevo que contiene el proyecto de código Edge Delivery Services de AEM en su entorno de desarrollo local.

$ cd ~/Code
$ git clone git@github.com:<YOUR_ORG>/aem-wknd-eds-ue.git

Se crea una nueva carpeta aem-wknd-eds-ue en el directorio Code, que sirve como raíz del proyecto. Aunque el proyecto se puede clonar en cualquier ubicación del equipo, este tutorial utiliza ~/Code como directorio raíz.

Instalación de las dependencias del proyecto

Vaya a la carpeta del proyecto e instale las dependencias necesarias con npm install. Aunque los proyectos de Edge Delivery Services no utilizan sistemas de compilación tradicionales de Node.js, como Webpack o Vite, siguen precisando varias dependencias para el desarrollo local.

# ~/Code/aem-wknd-eds-ue

$ npm install

Instalación de la CLI de AEM

La CLI de AEM es una herramienta de línea de comandos Node.js diseñada para optimizar el desarrollo de sitios web de AEM basados en Edge Delivery Services, proporcionando un servidor de desarrollo local para acelerar el desarrollo y las pruebas de su sitio web.

Para instalar la CLI de AEM, ejecute lo siguiente:

# ~/Code/aem-wknd-eds-ue

$ npm install @adobe/aem-cli

La CLI de AEM también se puede instalar globalmente usando npm install --global @adobe/aem-cli.

Inicio del servidor de desarrollo local de AEM

El comando aem up inicia el servidor de desarrollo local y abre automáticamente una ventana del explorador en la dirección URL del servidor. Este servidor actúa como proxy inverso para el entorno Edge Delivery Services y sirve contenido desde allí mientras utiliza el código local base para el desarrollo.

$ cd ~/Code/aem-wknd-eds-ue
$ aem up

    ___    ________  ___                          __      __
   /   |  / ____/  |/  /  _____(_)___ ___  __  __/ /___ _/ /_____  _____
  / /| | / __/ / /|_/ /  / ___/ / __ `__ \/ / / / / __ `/ __/ __ \/ ___/
 / ___ |/ /___/ /  / /  (__  ) / / / / / / /_/ / / /_/ / /_/ /_/ / /
/_/  |_/_____/_/  /_/  /____/_/_/ /_/ /_/\__,_/_/\__,_/\__/\____/_/

info: Starting AEM dev server version x.x.x
info: Local AEM dev server up and running: http://localhost:3000/
info: Enabled reverse proxy to https://main--aem-wknd-eds-ue--<YOUR_ORG>.aem.page

La CLI de AEM abre el sitio web en el explorador en http://localhost:3000/. Los cambios en el proyecto se vuelven a cargar automáticamente en el explorador web, mientras que los cambios de contenido requieren la publicación en el entorno de vista previa y la actualización del explorador web.

Si el sitio web se abre con una página 404, es probable que fstab.yaml o paths.json actualizado en el nuevo proyecto de código esté configurado incorrectamente, o que los cambios no se hayan confirmado en la rama main.

Generación de fragmentos JSON

Los proyectos de Edge Delivery Services, creados con la plantilla XWalk del elemento repetitivo de AEM, dependen de las configuraciones de JSON que habilitan la creación de bloques en el editor universal.

La plantilla de proyecto XWalk del elemento repetitivo de AEM incluye un enlace previo a la confirmación de Husky que detecta cambios en fragmentos JSON y los compila en los archivos component-*.json correspondientes tras git commit.

Aunque los siguientes scripts NPM se pueden ejecutar manualmente a través de npm run para generar los archivos JSON, esto generalmente no es necesario, ya que el enlace husky de preconfirmación lo gestiona automáticamente.

# ~/Code/aem-wknd-eds-ue

npm run build:json

Limpieza

La limpieza garantiza la calidad y coherencia del código, que es necesaria para los proyectos de Edge Delivery Services antes de combinar los cambios en la rama main.

Los scripts NPM se pueden ejecutar a través de npm run, por ejemplo:

# ~/Code/aem-wknd-eds-ue

$ npm run lint

Corrección automática de los problemas de limpieza

Puede resolver automáticamente los problemas de limpieza, añadiendo los siguientes scripts al archivo package.json del proyecto, y se pueden ejecutar a través de npm run:

# ~/Code/aem-wknd-eds-ue

$ npm run lint:fix

Estos scripts no vienen preconfigurados con la plantilla XWalk del elemento repetitivo de AEM, pero se pueden añadir al archivo package.json:

{
  ...
  "scripts": [
    ...,
    "lint:js:fix": "npm run lint:js -- --fix",
    "lint:css:fix": "npm run lint:css -- --fix",
    "lint:fix": "npm run lint:js:fix && npm run lint:css:fix",
    ...
  ]
  ...
}