Configurer un environnement de développement local

Un environnement de développement local est essentiel pour développer rapidement les sites web diffusés par Edge Delivery Services. L’environnement utilise du code développé localement lors de l’approvisionnement du contenu à partir d’Edge Delivery Services, ce qui permet aux développeurs et développeuses d’afficher instantanément les modifications de code. Une telle configuration prend en charge le développement et les tests rapides et itératifs.

Les outils et processus de développement d’un projet de site web Edge Delivery Services sont conçus pour être familiers aux développeurs et développeuses web et fournir une expérience de développement rapide et efficace.

Topologie de développement

Cette vidéo présente une vue d’ensemble de la topologie de développement d’un projet de site web Edge Delivery Services modifiable avec l’éditeur universel.

Prérequis

Avant de commencer le développement, installez les éléments suivants sur votre ordinateur :

Cloner le référentiel GitHub

Clonez le référentiel GitHub créé dans le chapitre Nouveau projet de code qui contient le projet de code AEM Edge Delivery Services dans votre environnement de développement local.

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

Un nouveau dossier aem-wknd-eds-ue est créé dans le répertoire Code, qui sert de racine au projet. Bien que le projet puisse être cloné vers n’importe quel emplacement de l’ordinateur, ce tutoriel utilise ~/Code comme répertoire racine.

Installer des dépendances de projet

Accédez au dossier du projet et installez les dépendances requises avec npm install. Bien que les projets Edge Delivery Services n’utilisent pas les systèmes de génération Node.js traditionnels tels que Webpack ou Vite, ils nécessitent toujours plusieurs dépendances pour le développement local.

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

$ npm install

Installer l’interface de ligne de commande AEM

L’interface de ligne de commande AEM est un outil de ligne de commande Node.js conçu pour rationaliser le développement de sites web AEM basés sur Edge Delivery Services, fournissant un serveur de développement local pour le développement et le test rapides de votre site web.

Pour installer l’interface de ligne de commande AEM, exécutez ce qui suit :

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

$ npm install @adobe/aem-cli

L’interface de ligne de commande d’AEM peut également être installée globalement avec npm install --global @adobe/aem-cli.

Démarrer le serveur de développement AEM local

La commande aem up démarre le serveur de développement local et ouvre automatiquement une fenêtre de navigateur sur l’URL du serveur. Ce serveur agit comme un proxy inverse de l’environnement Edge Delivery Services, en y diffusant du contenu tout en utilisant votre base de code locale pour le développement.

$ 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

L’interface de ligne de commande AEM ouvre le site web dans votre navigateur à l’adresse http://localhost:3000/. Les modifications apportées au projet sont automatiquement rechargées à chaud dans le navigateur web, tandis que les modifications du contenu nécessitent une publication dans l’environnement de prévisualisation et une actualisation du navigateur web.

Si le site web s’ouvre avec une page 404, il est probable que les fichiers fstab.yaml ou paths.json mis à jour dans le nouveau projet de code ne soient pas correctement configurés, ou que les modifications n’aient pas été validées dans la branche main.

Créer des fragments JSON

Les projets Edge Delivery Services, créés à l’aide du modèle AEM Boilerplate XWalk, reposent sur des configurations JSON qui activent la création de blocs dans l’éditeur universel.

Le modèle de projet XWalk AEM Boilerplate comprend un hook de pré-validation Husky qui détecte les modifications apportées aux fragments JSON et les compile dans les fichiers component-*.json appropriés lors de la git commit.

Bien que les scripts NPM suivants puissent être exécutés manuellement via npm run pour créer les fichiers JSON, cela est généralement inutile, car le hook de pré-validation Husky les gère automatiquement.

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

npm run build:json

Linting

Le linting assure la qualité et la cohérence du code, ce qui est nécessaire pour les projets Edge Delivery Services avant de fusionner les modifications dans la branche main.

Les scripts NPM peuvent être exécutés via npm run, par exemple :

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

$ npm run lint

Correction automatique des problèmes de linting

Vous pouvez résoudre automatiquement les problèmes de linting en ajoutant les scripts suivants au package.json du projet. Ils peuvent être exécutés via npm run :

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

$ npm run lint:fix

Ces scripts ne sont pas préconfigurés avec le modèle AEM Boilerplate XWalk, mais peuvent être ajoutés au fichier 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",
    ...
  ]
  ...
}