La configurazione rapida AEM Headless ti permette di utilizzare AEM Headless utilizzando il contenuto del progetto di esempio del sito WKND e un esempio di app React (a SPA) che consuma il contenuto sopra AEM API GraphQL headless.
Per eseguire questa configurazione rapida, è necessario quanto segue:
Innanzitutto, crea un archivio Git di Cloud Manager utilizzato per distribuire il sito WKND. Il sito WKND è un esempio AEM progetto web che contiene contenuto (frammenti di contenuto) e un endpoint GraphQL AEM utilizzato dall'app React dell'impostazione rapida.
Schermata dei passaggi
aem-headless-quick-setup-wknd
Con l’archivio Git di Cloud Manager creato, clona il codice sorgente del progetto WKND Site da GitHub e invialo all’archivio Git di Cloud Manager. Ora Cloud Manager consente di accedere al progetto WKND Site e di distribuirlo nell’ambiente as a Cloud Service AEM.
Schermata dei passaggi
Dalla riga di comando, duplica 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 remoto
Seleziona Repository nella navigazione superiore
Seleziona Accesso alle informazioni sul repository dalla barra delle azioni superiore
Esegui comando 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 viene richiesto di specificare le credenziali, fornisci Nome utente e Password da Cloud Manager Informazioni archivio modale.
Con il progetto WKND Site inviato all’archivio Git di Cloud Manager, non può essere distribuito AEM as a Cloud Service utilizzando le pipeline di Cloud Manager.
Tieni presente che il progetto Sito WKND fornisce contenuti di esempio che l’app React consuma rispetto AEM API GraphQL headless.
Schermata dei passaggi
Dev Deployment pipeline
aem-headless-quick-setup-wknd
in Archivio casella di selezionemain
dal Ramo Git casella di selezioneCon AEM as a Cloud Service avviato con il contenuto del progetto WKND Site , scarica e avvia l’app di reazione WKND di esempio che consuma il contenuto del sito WKND rispetto AEM API GraphQL headless.
Schermata dei passaggi
Dalla riga di comando, duplica 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
.
Punta alla AEM as a Cloud Service Pubblica URI host del servizio dal REACT_APP_HOST_URI
proprietà.
REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
...
Per trovare l'URI host del servizio Publish AEM as a Cloud Service:
Nell’IDE, salva le modifiche apportate a .env.development
Dalla riga di comando, esegui l’app React
$ 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 delle avventure, provenienti da AEM as a Cloud Service utilizzando AEM API GraphQL di Headless.
Con l’app React WKND di esempio che si collega e consuma contenuti dalle API GraphQL AEM headless, crea contenuti nel servizio Author di AEM e osserva come l’esperienza dell’app React si aggiorna di concerto.
Schermata dei passaggi
Accedi a AEM servizio Author as a Cloud Service
Passa a Risorse > 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 ciclica ora aggiornata e verifica le modifiche apportate al contenuto nel frammento di contenuto.
Utilizzando lo stesso approccio, nel servizio AEM Author:
Se non hai dimestichezza con la creazione e la pubblicazione di frammenti di contenuto nuovi o con l’annullamento della pubblicazione di frammenti di contenuto esistenti, guarda la schermata precedente.
Congratulazioni! Hai utilizzato con successo AEM Headless per alimentare un'app React!
Per capire in dettaglio come l’app React consuma contenuti da AEM as a Cloud Service, effettua il check-out tutorial AEM Headless. L’esercitazione esplora il modo in cui i frammenti di contenuto in AEM sono stati creati e come l’app React utilizza i loro contenuti come JSON.