La configurazione rapida è una procedura dettagliata che illustra come installare ed eseguire l’app WKND e come SPA remota e come crearla utilizzando AEM Editor SPA.
La configurazione rapida consente di passare direttamente allo stato finale dell'esercitazione.
Un video dettagliato sulla configurazione rapida
Questa esercitazione richiede quanto segue:
Questa esercitazione presuppone:
~/Code/wknd-app
http://localhost:4502
admin
con password admin
http://localhost:3000
Scarica e installa AEM SDK Quickstart sulla porta 4502, con le credenziali admin/admin
predefinite.
Decomprimi l'SDK AEM in ~/aem-sdk
Esegui AEM SDK Quickstart Jar
$ java -jar aem-sdk-quickstart-xxx.jar
# Provide `admin` as the admin user's password
AEM SDK verrà avviato e avviato automaticamente il http://localhost:4502. Accedi utilizzando le seguenti credenziali:
admin
admin
Questa esercitazione dipende dal progetto WKND 0.3.0+ (per contenuti).
aem-guides-wknd.all.x.x.x.zip
admin
.aem-guides-wknd.all.x.x.x.zip
download al passaggio 1aem-guides-wknd.all-x.x.x.zip
Per eseguire una configurazione rapida, vengono forniti pacchetti AEM che contengono la configurazione AEM finale e il contenuto dell’esercitazione.
admin
.wknd-app.all.x.x.x.zip
download al passaggio 1wknd-app.all.x.x.x.zip
wknd-app.ui.content.sample.x.x.x.zip
download al passaggio 2wknd-app.ui.content.sample.x.x.x.zip
Scarica il codice sorgente dell’app WKND da Github.com e cambia il ramo contenente le modifiche alle SPA eseguite in questa esercitazione.
$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql
Dalla directory principale del progetto, installa le dipendenze npm dei progetti SPA ed esegui l’applicazione.
$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start
Se si verificano degli errori durante l'esecuzione di npm install
, prova i seguenti passaggi:
$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start
Verifica che il SPA sia in esecuzione in http://localhost:3000.
Prima di creare contenuti, disponi le finestre del browser in modo che AEM Author (http://localhost:4502
) sia a sinistra e il SPA remoto (http://localhost:3000
) esegua a destra. Questa disposizione ti consente di vedere in che modo le modifiche ai contenuti di origine AEM si riflettono immediatamente nel SPA.
admin
http://localhost:3000
e osserva che le modifiche sono riflessehttp://localhost:3000
e osserva che le modifiche sono riflessehttp://localhost:3000
e osserva che le modifiche sono riflesseLe nuove pagine AEM sotto la Home page dell'app WKND > Avventura deve hanno un nome di pagina AEM che corrisponde al nome del frammento di contenuto dell'avventura corrispondente. Questo perché il percorso SPA per AEM mappatura pagina è basato sull’ultimo segmento del percorso, che è il nome del frammento di contenuto.
Hai appena avuto un rapido assaggio di come AEM editor SPA può migliorare il tuo SPA con aree controllate e modificabili! Se sei interessato, controlla il resto dell’esercitazione, ma assicurati di iniziare da zero, poiché in questa configurazione rapida l’ambiente di sviluppo locale è ora nello stato di fine dell’esercitazione!