Dev Quickstart
Ce guide guide les ingénieurs de Lab à travers la première heure de travail dans notre référentiel Edge Delivery Services — du clonage du projet, à la diffusion de la prévisualisation en direct avec l’auteur AEM, jusqu’à la création de votre premier commit. Utilisez les onglets ci-dessous pour trouver le flux de travail correspondant à ce que vous essayez de faire, puis copiez les commandes de démarrage rapide dans votre terminal.
Installez la CLI AEM globalement et dirigez le serveur de développement local vers l’origine de la preview de Lab. Cela vous donne un aperçu du rechargement à chaud qui http://localhost:3000 extrait du contenu de l’auteur AEM tout en servant le code bloc directement depuis votre copie de travail.
Confirmez que la version de votre Node est sur la piste LTS avant l’installation — la CLI utilise l’ESM natif et suppose Node 20+. Une aem up fois en cours, modifie n’importe quel fichier sous /blocks, /scripts, ou /styles recharge le navigateur en moins d’une seconde.
Chaque bloc Lab vit dans son propre dossier avec /blocks trois fichiers compagnons : un décorateur JavaScript, un fichier CSS avec portée sur le bloc, et un fichier optionnel _blockname.json qui décrit les composants que les auteurs verront dans Universal Editor.
La fonction décorateur reçoit l’élément bloc comme seul argument. Utilisez l’assistant moveInstrumentation pour transférer les attributs de données de l’auteur sur tout nouveau DOM que vous construisez, et cherchez des jetons sémantiques à styles/tokens/semantic.css partir de valeurs codées en dur.
Lab utilise un hook de pré-commit Husky qui s’exécute chaque fois que vous mettez en scène un JSON partiel composant. Le crochet fusionne chaque _*.json under /models et /blocks dans les trois fichiers racines (component-models.json, component-definition.json, component-filters.json) et re-met automatiquement le résultat.
Vous n’avez presque jamais besoin de l’exécuter npm run build:json vous-même — mais il est sûr de l’exécuter pendant le développement si vous souhaitez vérifier ce que l’Éditeur Universal verra avant de vous engager. La linting n’est pas automatique ; N’oubliez pas de courir npm run lint avant de pousser.
# Clone the PD Lab repository and install dependencies
git clone git@github.com:protiviti-it/pdlab.git
cd pdlab
npm install
# Start the local dev server against the AEM author preview origin
aem up --url https://main--pdlab--protiviti-it.aem.page
# Before pushing, lint your changes
npm run lint
Serveur local
Une fois que le serveur de développement est en marche, l’étape suivante naturelle est d’ouvrir la bibliothèque de blocs à /tools/automation/block-library et d’utiliser un des blocs de référence comme point de départ. À partir de là, appuiez-vous sur les building-blocks, content-modeling, et testing-blocks les compétences de Claude Code — chacune regroupe les conventions Lab évoquées ci-dessus dans un flux de travail étape par étape que vous pouvez invoquer directement depuis votre éditeur.