Configuração de um ambiente de desenvolvimento local

Um ambiente de desenvolvimento local é essencial para um desenvolvimento rápido de sites entregues pelo Edge Delivery Services. O ambiente usa o código desenvolvido localmente enquanto fornece conteúdo do Edge Delivery Services, permitindo que desenvolvedores visualizem instantaneamente as alterações no código. Essa configuração permite um desenvolvimento e testes rápidos e iterativos.

As ferramentas e os processos de desenvolvimento de um projeto de site do Edge Delivery Services foram projetados para serem familiares aos desenvolvedores da web e para fornecer uma experiência de desenvolvimento rápida e eficiente.

Topologia de desenvolvimento

Este vídeo fornece uma visão geral da topologia de desenvolvimento para um projeto de site do Edge Delivery Services que seja editável com o editor universal.

Pré-requisitos

Antes de iniciar o desenvolvimento, instale o seguinte no seu computador:

Clone o repositório do GitHub

Clone o repositório do GitHub criado no novo capítulo de projeto de código que contém o projeto de código do Edge Delivery Services do AEM para seu ambiente de desenvolvimento local.

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

Uma nova pasta aem-wknd-eds-ue é criada no diretório Code, que serve como raiz do projeto. Embora o projeto possa ser clonado em qualquer local na máquina, este tutorial usa ~/Code como o diretório raiz.

Instalar dependências do projeto

Navegue até a pasta do projeto e instale as dependências necessárias com npm install. Embora os projetos do Edge Delivery Services não usem sistemas de compilação de Node.js tradicionais, como Webpack ou Vite, eles ainda exigem várias dependências para o desenvolvimento local.

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

$ npm install

Instalar a CLI do AEM

A CLI do AEM é uma ferramenta de linha de comando de Node.js criada para simplificar o desenvolvimento de sites do AEM baseados no Edge Delivery Services, fornecendo um servidor de desenvolvimento local para agilizar o desenvolvimento e teste do seu site.

Para instalar a CLI do AEM, execute:

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

$ npm install @adobe/aem-cli

A CLI do AEM também pode ser instalada globalmente com npm install --global @adobe/aem-cli.

Iniciar o servidor de desenvolvimento local do AEM

O comando aem up inicia o servidor de desenvolvimento local e abre automaticamente uma janela do navegador com o URL do servidor. Esse servidor atua como um proxy reverso para o ambiente do Edge Delivery Services, veiculando o conteúdo a partir desse local e usando sua base de código local para desenvolvimento.

$ 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

A CLI do AEM abre o site no navegador, em http://localhost:3000/. As alterações no projeto são recarregadas automaticamente no navegador da web, enquanto que as alterações no conteúdo exigem a publicação no ambiente de visualização e a atualização do navegador da web.

Se o site for aberto com uma página 404, é provável que o fstab.yaml ou paths.json atualizado no novo projeto de código esteja configurado incorretamente ou que as alterações não tenham sido confirmadas na ramificação main.

Criar fragmentos de JSON

Os projetos do Edge Delivery Services criados com o modelo XWalk padronizado do AEM dependem das configurações de JSON que permitem a criação de blocos no editor universal.

O modelo de projeto XWalk padronizado do AEM inclui um gancho Husky de pré-confirmação que detecta alterações nos fragmentos de JSON e as compila nos arquivos component-*.json apropriados em git commit.

Embora os seguintes scripts de NPM possam ser executados manualmente por meio do npm run para criar os arquivos JSON, isso geralmente é desnecessário, pois o gancho Husky de pré-confirmação os manipula automaticamente.

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

npm run build:json

Limpeza

A limpeza garante a qualidade e a consistência do código, que são exigidas em projetos do Edge Delivery Services antes de mesclar alterações com a ramificação main.

Os scripts de NPM podem ser executados via npm run, como neste exemplo:

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

$ npm run lint

Corrigir problemas de limpeza automaticamente

É possível resolver problemas de limpeza automaticamente por adicionar estes scripts ao package.json do projeto, os quais podem ser executados via npm run:

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

$ npm run lint:fix

Esses scripts não vêm pré-configurados com o modelo XWalk padronizado do AEM, mas podem ser adicionados ao arquivo 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",
    ...
  ]
  ...
}