Een lokale ontwikkelomgeving instellen

Een lokale ontwikkelomgeving is essentieel voor het snel ontwikkelen van websites die door Edge Delivery Services worden geleverd. De omgeving gebruikt lokaal ontwikkelde code terwijl inhoud van Edge Delivery Services wordt opgehaald, zodat ontwikkelaars direct wijzigingen in de code kunnen bekijken. Een dergelijke installatie ondersteunt snelle, iteratieve ontwikkeling en tests.

De ontwikkelingstools en -processen voor een Edge Delivery Services-websiteproject zijn ontworpen om vertrouwd te zijn met webontwikkelaars en een snelle en efficiënte ontwikkelervaring te bieden.

Ontwikkelingstopologie

Deze video biedt een overzicht van de ontwikkelingstopologie voor een Edge Delivery Services-websiteproject dat kan worden bewerkt met Universal Editor.

Vereisten

Installeer het volgende op uw computer voordat u de ontwikkeling start:

Clone the GitHub repository

Kloon de ​ bewaarplaats GitHub die in het nieuwe hoofdstuk van het codeproject ​ wordt gecreeerd dat het de codeproject van AEM Edge Delivery Services aan uw lokale ontwikkelomgeving bevat.

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

Er wordt een nieuwe map aem-wknd-eds-ue gemaakt in de map Code , die als hoofdmap van het project fungeert. Hoewel het project kan worden gekloond aan om het even welke plaats op de computer, gebruikt dit leerprogramma ~/Code als wortelfolder.

Projectafhankelijkheden installeren

Navigeer naar de projectmap en installeer de vereiste afhankelijkheden met npm install . Hoewel Edge Delivery Services-projecten geen gebruik maken van traditionele Node.js-constructiesystemen zoals Webpack of Vite, vereisen ze nog steeds verschillende afhankelijkheden voor lokale ontwikkeling.

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

$ npm install

AEM CLI installeren

De AEM CLI is een opdrachtregelprogramma Node.js dat is ontworpen om de ontwikkeling van AEM-websites in Edge Delivery Services te stroomlijnen en een lokale ontwikkelingsserver te bieden voor snelle ontwikkeling en het testen van uw website.

Voer de volgende handelingen uit om de AEM CLI te installeren:

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

$ npm install @adobe/aem-cli

De AEM CLI kan ook globaal worden geïnstalleerd met npm install --global @adobe/aem-cli.

De lokale AEM-ontwikkelingsserver starten

Met de opdracht aem up wordt de lokale ontwikkelingsserver gestart en wordt automatisch een browservenster naar de URL van de server geopend. Deze server fungeert als een reverse-proxy voor de Edge Delivery Services-omgeving, zodat inhoud van die server wordt aangeboden terwijl uw lokale codebasis voor ontwikkeling wordt gebruikt.

$ 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

De AEM CLI opent de website in uw browser op http://localhost:3000/. De veranderingen in het project worden automatisch heet-opnieuw geladen in Webbrowser, terwijl de inhoudsveranderingen ​ het publiceren aan het voorproefmilieu ​ vereisen en Webbrowser verfrissen.

Als de website met een 404 pagina opent, is het waarschijnlijk ​ fstab.yaml of paths.json ​ bijgewerkt in ​ nieuw codeproject ​ verkeerd gevormd, of de veranderingen zijn niet begaan aan aan de main tak.

JSON-fragmenten maken

De projecten van Edge Delivery Services, die gebruikend het ​ malplaatje van AEM Boilerplate XWalk ​ worden gecreeerd, baseren zich op configuraties JSON die blokauthoring in de Universele Redacteur toelaten.

Het ​ AEM Boilerplate XWalk projectmalplaatje ​ omvat a ​ Eigen ​ precommit haak die veranderingen in fragmenten JSON ontdekt en hen compileert in de aangewezen component-*.json dossiers op git commit.

Hoewel de volgende NPM-scripts handmatig via npm run kunnen worden uitgevoerd om de JSON-bestanden samen te stellen, is dit gewoonlijk niet nodig omdat deze automatisch door de husky pre-commit haak wordt afgehandeld.

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

npm run build:json

Koppeling

Koppelingen zorgen voor kwaliteit en consistentie van de code. Dit is vereist voor Edge Delivery Services-projecten voordat wijzigingen worden samengevoegd in de main -vertakking.

De NPM-scripts kunnen bijvoorbeeld via npm run worden uitgevoerd:

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

$ npm run lint

Verbindingsproblemen automatisch corrigeren

U kunt problemen met koppelingen automatisch oplossen door de volgende scripts aan het project package.json toe te voegen en u kunt deze via npm run uitvoeren:

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

$ npm run lint:fix

Deze scripts zijn niet vooraf geconfigureerd met de AEM Boilerplate XWalk-sjabloon, maar kunnen wel aan het package.json -bestand worden toegevoegd:

{
  ...
  "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",
    ...
  ]
  ...
}