Konfigurera en lokal utvecklingsmiljö

En lokal utvecklingsmiljö är nödvändig för att snabbt utveckla webbplatser som levereras av Edge Delivery Services. Miljön använder lokalt utvecklad kod när man hämtar material från Edge Delivery Services, vilket gör att utvecklarna omedelbart kan se kodändringar. En sådan installation stöder snabb, iterativ utveckling och testning.

Utvecklingsverktygen och processerna för ett Edge Delivery Services webbplatsprojekt är utformade för att vara välkända för webbutvecklare och ge en snabb och effektiv utvecklingsupplevelse.

Utvecklingstopologi

I den här videon finns en översikt över utvecklingstopologin för ett Edge Delivery Services-webbplatsprojekt som kan redigeras med Universal Editor.

Förutsättningar

Installera följande på datorn innan du påbörjar utvecklingen:

Klona GitHub-databasen

Klona GitHub-databasen som skapats i det nya kodprojektkapitlet ​ som innehåller AEM Edge Delivery Services-kodprojektet till din lokala utvecklingsmiljö.

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

En ny aem-wknd-eds-ue-mapp skapas i katalogen Code som fungerar som projektets rot. Även om projektet kan klonas till vilken plats som helst på datorn använder den här självstudien ~/Code som rotkatalog.

Installera projektberoenden

Navigera till projektmappen och installera nödvändiga beroenden med npm install. Även om Edge Delivery Services-projekt inte använder traditionella Node.js-byggsystem som Webpack eller Vite, kräver de ändå flera beroenden för lokal utveckling.

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

$ npm install

Installera AEM CLI

AEM CLI är ett kommandoradsverktyg för Node.js som har utformats för att effektivisera utvecklingen av Edge Delivery Services-baserade AEM-webbplatser, vilket ger en lokal utvecklingsserver för snabb utveckling och testning av er webbplats.

Installera AEM CLI genom att köra:

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

$ npm install @adobe/aem-cli

AEM CLI kan också installeras globalt med npm install --global @adobe/aem-cli.

Starta den lokala AEM-utvecklingsservern

Kommandot aem up startar den lokala utvecklingsservern och öppnar automatiskt ett webbläsarfönster till serverns URL. Den här servern fungerar som en omvänd proxy till Edge Delivery Services-miljön och levererar innehåll därifrån samtidigt som den lokala kodbasen används för utveckling.

$ 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

AEM CLI öppnar webbplatsen i webbläsaren på http://localhost:3000/. Ändringar i projektet läses automatiskt in på nytt i webbläsaren, medan innehållsändringar i kräver publicering i förhandsvisningsmiljön och uppdatering av webbläsaren.

Om webbplatsen öppnas med en 404-sida är det sannolikt att fstab.yaml eller paths.json som uppdaterats i nytt kodprojekt är felaktigt konfigurerade eller att ändringarna inte har implementerats i main-grenen.

Bygg JSON-fragment

Edge Delivery Services-projekt som skapats med AEM-mallen XWalk ​ förlitar sig på JSON-konfigurationer som aktiverar blockredigering i Universell redigerare.

AEM-mallens XWalk-projektmall ​ innehåller en Husky-förimplementeringsfunktion som identifierar ändringar i JSON-fragment och kompilerar dem till lämpliga component-*.json-filer vid git commit.

Följande NPM-skript kan köras manuellt via npm run för att skapa JSON-filer, men detta är vanligtvis inte nödvändigt eftersom den himiska pre-commit-kroken hanterar den automatiskt.

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

npm run build:json

Linting

Linting säkerställer kodkvalitet och konsekvens, vilket krävs för Edge Delivery Services-projekt innan du sammanfogar ändringar i grenen main.

NPM-skripten kan köras via npm run, till exempel:

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

$ npm run lint

Korrigera lintingproblem automatiskt

Du kan lösa problem med linting automatiskt genom att lägga till följande scripts i projektets package.json och sedan köra via npm run:

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

$ npm run lint:fix

Dessa skript levereras inte förkonfigurerade med AEM-mallen XWalk, men kan läggas till i filen 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",
    ...
  ]
  ...
}