DocumentazioneAEMTutorial su AEMTutorial su AEM Sites

Configurare un ambiente di sviluppo locale

Last update: Tue Feb 11 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Principiante
  • Sviluppatore

Un ambiente di sviluppo locale è essenziale per lo sviluppo rapido di siti web forniti da Edge Delivery Services. L’ambiente utilizza codice sviluppato localmente per l’approvvigionamento dei contenuti da Edge Delivery Services, consentendo agli sviluppatori di visualizzare immediatamente le modifiche 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 essere 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 Edge Delivery Services per siti Web modificabile con Universal Editor.

video poster

https://video.tv.adobe.com/v/3443986/?learn=on&enablevpops&captions=ita

Vedi ulteriori dettagli sulla topologia di sviluppo

  • Archivio GitHub:

    • Scopo: ospita il codice del sito Web (CSS e JavaScript).
    • Struttura: il ramo principale contiene codice pronto per la produzione, mentre altri rami contengono codice funzionante.
    • Funzionalità: il codice da qualsiasi ramo può essere eseguito negli ambienti production o preview senza influire sul sito Web attivo.

  • Servizio di authoring di AEM:

    • Scopo: funge da archivio dei contenuti canonici in cui il contenuto del sito Web viene modificato e gestito.
    • Funzionalità: il contenuto viene letto e scritto da Universal Editor. Il contenuto modificato è pubblicato in Edge Delivery Services in ambienti di produzione o anteprima.

  • Editor universale:

    • Scopo: fornisce un'interfaccia di WYSIWYG per la modifica del contenuto del sito Web.
    • Funzionalità: legge e scrive nel servizio AEM Author. Può essere configurato per utilizzare il codice di qualsiasi ramo nell'archivio GitHub per testare e convalidare le modifiche.

  • Edge Delivery Services:

    • Ambiente di produzione:

      • Scopo: consegna il contenuto e il codice del sito Web attivo agli utenti finali.
      • Funzionalità: fornisce il contenuto pubblicato dal servizio AEM Author utilizzando il codice del ramo principale dell'archivio GitHub.

    • Anteprima ambiente:

      • Scopo: fornisce un ambiente di gestione temporanea per testare e visualizzare in anteprima il contenuto e il codice prima della distribuzione.
      • Funzionalità: gestisce il contenuto pubblicato dal servizio AEM Author utilizzando il codice di qualsiasi ramo dell'archivio GitHub, consentendo l'esecuzione di test approfonditi senza influire sul sito Web attivo.

  • Ambiente sviluppatore locale:

    • Scopo: consente agli sviluppatori di scrivere e testare il codice (CSS e JavaScript) localmente.

    • Struttura:

      • Clone locale dell'archivio GitHub per lo sviluppo basato su ramo.
      • AEM CLI, che funge da server di sviluppo, applica le modifiche al codice locale all'ambiente di anteprima per un'esperienza di ricaricamento a caldo.

    • Flusso di lavoro: gli sviluppatori scrivono il codice localmente, eseguono il commit delle modifiche in un ramo di lavoro, inviano il ramo a GitHub, lo convalidano nell'Editor universale (utilizzando il ramo specificato) e lo uniscono nel ramo principale quando è pronto per la distribuzione nell'ambiente di produzione.

Prerequisiti

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

  1. Git
  2. Node.js e npm
  3. Microsoft Visual Studio Code (o editor di codice simile)

Clonare l’archivio GitHub

Clona l'archivio GitHub creato nel nuovo capitolo del progetto di codice che contiene il progetto di codice Edge Delivery Services di AEM nell'ambiente di sviluppo locale.

Clone archivio GitHub 

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

Nella directory Code viene creata una nuova cartella aem-wknd-eds-ue che funge da radice del progetto. Anche se il progetto può essere clonato in qualsiasi posizione sul computer, questa esercitazione utilizza ~/Code come directory principale.

Installare le dipendenze del progetto

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

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

$ npm install

Installare AEM CLI

AEM CLI è uno strumento da 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.

Avvia 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 in http://localhost:3000/. Le modifiche al progetto vengono ricaricate automaticamente a caldo 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 viene aperto con una pagina 404, è probabile che 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 XWalk boilerplate di AEM, si basano su configurazioni JSON che abilitano l'authoring dei blocchi nell'editor universale.

  • Frammenti JSON: memorizzati con i blocchi associati e definiscono i modelli di blocco, le definizioni e i filtri.

    • Frammenti modello: archiviati in /blocks/example/_example.json.
    • Frammenti di definizione: archiviati in /blocks/example/_example.json.
    • Frammenti filtro: archiviati in /blocks/example/_example.json.

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

Anche se i seguenti script NPM possono essere eseguiti manualmente tramite npm run per generare i file JSON, 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
Script NPM
Descrizione
build:json
Crea tutti i file JSON dai frammenti e li aggiunge ai file component-*.json appropriati.
build:json:models
Genera frammenti JSON bloccati e li compila in /component-models.json.
build:json:definitions
Genera frammenti JSON della pagina e li compila in /component-definitions.json.
build:json:filters
Genera frammenti JSON della pagina e li compila in /component-filters.json.
TIP
Esegui npm run build:json dopo eventuali modifiche ai file di frammento per rigenerare i file JSON principali.

Linting

L'indicazione garantisce la qualità e la coerenza del codice, necessarie per i progetti Edge Delivery Services prima di unire le modifiche nel ramo main.

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

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

$ npm run lint
Script NPM
Descrizione
lint:js
Esegue i controlli di linting di JavaScript.
lint:css
Esegue i controlli di linting CSS.
lint
Esegue sia i controlli di linting JavaScript che CSS.

Correzione automatica dei problemi di linting

È possibile risolvere automaticamente i problemi di assegnazione dei punteggi aggiungendo i scripts seguenti al progetto package.json ed eseguendoli tramite npm run:

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

$ npm run lint:fix

Questi script non sono preconfigurati con il modello XWalk Boilerplate di AEM, ma possono essere aggiunti al file package.json:

Script aggiuntivi
Script NPM
Comando
Descrizione
lint:js:fix
npm run lint:js -- --fix
Corregge automaticamente i problemi di linting di JavaScript.
lint:css:fix
stylelint blocks/**/*.css styles/*.css -- --fix
Corregge automaticamente i problemi di linting CSS.
lint:fix
npm run lint:js:fix && npm run lint:css:fix
Esegue gli script di correzione JS e CSS per la pulizia rapida.
esempio package.json

Le seguenti voci di script possono essere aggiunte all'array scripts di 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",
    ...
  ]
  ...
}
recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d