Configurare un ambiente di sviluppo locale

Un ambiente di sviluppo locale è essenziale per lo sviluppo rapido di siti web distribuiti da Edge Delivery Services. L’ambiente utilizza codice sviluppato localmente per contenuti forniti da Edge Delivery Services, consentendo agli sviluppatori di visualizzare immediatamente le modifiche apportate al codice. Questa configurazione supporta lo sviluppo e il test rapidi e iterativi.

Gli strumenti e i processi di sviluppo per un progetto di sito web Edge Delivery Services sono progettati per risultare familiari agli sviluppatori web e fornire un’esperienza di sviluppo veloce ed efficiente.

Topologia di sviluppo

Questo video offre una panoramica della topologia di sviluppo di un progetto di sito web Edge Delivery Services modificabile con l’editor universale.

Prerequisiti

Prima di avviare lo sviluppo, installa sul computer quanto segue:

Clonare l’archivio GitHub

Clona nell’ambiente di sviluppo locale l’archivio GitHub creato nel capitolo sul nuovo progetto di codice, contenente il progetto di codice AEM Edge Delivery Services.

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

Viene creata una nuova cartella aem-wknd-eds-ue nella directory Code, che funge da directory principale del progetto. Anche se il progetto può essere clonato in qualsiasi posizione sul computer, per questo tutorial viene utilizzato ~/Code come directory principale.

Installare le dipendenze del progetto

Passare alla cartella del progetto e installare le dipendenze richieste tramite npm install. Anche se i progetti Edge Delivery Services non utilizzano i sistemi di build Node.js tradizionali, come Webpack o Vite, richiedono comunque diverse dipendenze per lo sviluppo locale.

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

$ npm install

Installare le CLI di AEM

AEM CLI è uno strumento per riga di comando di Node.js progettato per semplificare lo sviluppo di siti web AEM basati su Edge Delivery Services, che fornisce un server di sviluppo locale per lo sviluppo e il test rapidi del sito web.

Per installare AEM CLI, esegui:

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

$ npm install @adobe/aem-cli

AEM CLI può essere installato anche a livello globale utilizzando npm install --global @adobe/aem-cli.

Avviare il server di sviluppo AEM locale

Il comando aem up avvia il server di sviluppo locale e apre automaticamente una finestra del browser all’URL del server. Questo server funge da proxy inverso per l’ambiente Edge Delivery Services, distribuendo i contenuti da tale ambiente e utilizzando la base di codice locale per lo sviluppo.

$ 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 apre il sito web nel browser all’indirizzo http://localhost:3000/. Le modifiche al progetto vengono effettuate con caricamento rapido automatico nel browser web, mentre le modifiche al contenuto richiedono la pubblicazione nell’ambiente di anteprima e l’aggiornamento del browser web.

Se il sito web si apre con una pagina 404, è probabile che i file fstab.yaml o paths.json aggiornati nel nuovo progetto di codice non siano configurati correttamente o che le modifiche non siano state applicate al ramo main.

Creare frammenti JSON

I progetti Edge Delivery Services, creati utilizzando il modello standard XWalk di AEM, si basano su configurazioni JSON che abilitano l’authoring dei blocchi nell’editor universale.

Il modello di progetto standard XWalk di AEM include un hook di pre-commit Husky che rileva le modifiche ai frammenti JSON e le compila nei file component-*.json appropriati al momento del git commit.

I seguenti script NPM possono essere eseguiti manualmente tramite npm run per generare i file JSON, ma in genere questo non è necessario in quanto l’hook di pre-commit Husky lo gestisce automaticamente.

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

npm run build:json

Linting

Il linting garantisce la qualità e la coerenza del codice, necessarie per i progetti Edge Delivery Services prima che si possa procedere all’unione delle modifiche nel ramo main.

Gli script NPM possono essere eseguiti tramite npm run, ad esempio:

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

$ npm run lint

Correzione automatica degli errori di linting

È possibile risolvere automaticamente gli errori di linting aggiungendo i seguenti scripts al file package.json del progetto ed eseguendoli tramite npm run:

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

$ npm run lint:fix

Questi script non vengono preconfigurati con il modello standard XWalk di AEM, ma possono essere aggiunti al file 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",
    ...
  ]
  ...
}