La configurazione rapida AEM Headless ti consente di utilizzare AEM Headless utilizzando il contenuto del progetto di esempio del sito WKND e un esempio di app React (SPA) che consuma il contenuto rispetto alle API AEM Headless GraphQL.
Per eseguire questa configurazione rapida sono necessari i seguenti elementi:
Innanzitutto, crea un archivio Git di Cloud Manager utilizzato per distribuire il sito WKND. Il sito WKND è un progetto di esempio per un sito web AEM che contiene contenuti (frammenti di contenuto) e un endpoint AEM GraphQL utilizzato dall’app React della configurazione rapida.
Schermata dei passaggi
aem-headless-quick-setup-wknd
Una volta creato l’archivio Git di Cloud Manager, clona il codice sorgente del progetto del sito WKND da GitHub e invialo all’archivio Git di Cloud Manager. Ora Cloud Manager per accedere e distribuire il progetto del sito WKND nell’ambiente as a Cloud Service dell’AEM.
Schermata dei passaggi
Dalla riga di comando, clona il codice sorgente del progetto WKND Site di esempio da GitHub
$ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git
Aggiungere l’archivio Git di Cloud Manager come archivio remoto
Seleziona Archivi nella navigazione superiore
Seleziona Accedi a dati archivio dalla barra delle azioni superiore
Comando Execute trovato in Aggiungere un remoto all’archivio Git dalla riga di comando
$ cd aem-guides-wknd
$ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/
Invia il codice sorgente del progetto di esempio dall’archivio Git locale all’archivio Git di Cloud Manager
$ git push adobe main:main
Quando vengono richieste le credenziali, fornisci Nome utente e Password da Cloud Manager Informazioni archivio modale.
Quando il progetto del sito WKND viene inviato all’archivio Git di Cloud Manager, non può essere distribuito all’AEM as a Cloud Service tramite le pipeline di Cloud Manager.
Nota: il progetto del sito WKND fornisce contenuti di esempio che l’app React utilizza rispetto alle API GraphQL headless dell’AEM.
Schermata dei passaggi
Dev Deployment pipeline
aem-headless-quick-setup-wknd
nel Archivio casella di selezionemain
dal Ramo Git casella di selezioneCon AEM as a Cloud Service avviato con il contenuto del progetto del sito WKND, scarica e avvia l’app di reazione WKND di esempio che utilizza il contenuto del sito WKND sulle API GraphQL headless dell’AEM.
Schermata dei passaggi
Dalla riga di comando, clona il codice sorgente dell’app React da GitHub.
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
Apri la cartella ~/Code/aem-guides-wknd-graphql/react-app
nell’IDE.
Nell’IDE, apri il file .env.development
.
Indicare l’AEM as a Cloud Service Pubblica URI host del servizio da REACT_APP_HOST_URI
proprietà.
REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
...
Per trovare l'URI host del servizio di pubblicazione as a Cloud Service dell'AEM:
Nell’IDE, salva le modifiche apportate a .env.development
Dalla riga di comando, esegui React App
$ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
L’app React, in esecuzione localmente, inizia il http://localhost:3000 e visualizza un elenco di avventure, derivate dall’AEM as a Cloud Service utilizzando le API GraphQL dell’AEM Headless.
Con l’app di esempio WKND React che si connette e utilizza i contenuti delle API GraphQL headless dell’AEM, crea contenuti nel servizio di authoring dell’AEM e scopri come l’esperienza dell’app React si aggiorna insieme.
Schermata dei passaggi
Accedi al servizio di authoring as a Cloud Service per AEM
Accedi a Assets > File > WKND Condiviso > Inglese > Avventure
Apri Ciclismo nello Utah meridionale Cartella
Seleziona la Ciclismo nello Utah meridionale Frammento di contenuto e seleziona Modifica dalla barra delle azioni superiore
Aggiorna alcuni campi del frammento di contenuto, ad esempio:
Cycling Utah's National Parks
6 Days
Intermediate
3500
/content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg
Seleziona Salva nella barra delle azioni superiore
Seleziona Pubblicazione rapida dalla barra delle azioni superiore …
Aggiorna l’app React in esecuzione su http://localhost:3000.
Nell’app React, seleziona l’avventura Ciclismo ora aggiornata e verifica le modifiche al contenuto apportate al frammento di contenuto.
Con lo stesso approccio, nel servizio di authoring dell’AEM:
Se non hai familiarità con la creazione e la pubblicazione di nuovi frammenti di contenuto o con l’annullamento della pubblicazione di frammenti di contenuto esistenti, guarda la schermata precedente.
Congratulazioni. Hai utilizzato correttamente AEM Headless per alimentare un’app React.
Per comprendere in dettaglio come l’app React utilizza contenuti provenienti da AEM as a Cloud Service, vedi tutorial AEM headless. Il tutorial esplora come vengono creati i frammenti di contenuto in AEM e come questa app React utilizza i contenuti come JSON.