Panoramica
Benvenuti al tutorial in più parti per gli sviluppatori che desiderano integrare un SPA remoto basato su React (o Next.js) esistente con contenuti AEM modificabili tramite l’editor AEM SPA.
Questo tutorial si basa sull'app WKND GraphQL, un'app React che utilizza contenuti di frammenti di contenuto AEM tramite le API GraphQL dell'AEM, ma non fornisce alcuna funzione di authoring nel contesto dei contenuti SPA.
Informazioni sull’esercitazione
Il tutorial che illustra come un SPA remoto, o un SPA in esecuzione al di fuori del contesto dell’AEM, può essere aggiornato per utilizzare e distribuire contenuti creati in AEM.
La maggior parte delle attività del tutorial si concentrano sullo sviluppo di JavaScript, tuttavia vengono trattati gli aspetti critici che ruotano intorno all’AEM. Questi aspetti includono la definizione di dove il contenuto viene creato e memorizzato nell'AEM e la mappatura delle vie dell'SPA verso le Pagine AEM.
Il tutorial è progettato per funzionare con AEM as a Cloud Service ed è composto da due progetti:
- Il progetto AEM contiene configurazione e contenuto che devono essere distribuiti all'AEM.
- Il progetto App WKND è l'SPA da integrare con l'editor SPA dell'AEM
Codice più recente
- Il punto iniziale del codice di questo tutorial si trova su GitHub nella cartella
remote-spa-tutorial.
Prerequisiti
Questo tutorial richiede quanto segue:
Questo tutorial presuppone:
- Microsoft® Visual Studio Code come IDE
- Una directory di lavoro di
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial - Esecuzione dell'SDK AEM come servizio Author in
http://localhost:4502 - Esecuzione dell'SDK AEM con l'account
adminlocale con passwordadmin - Esecuzione dell'SPA su
http://localhost:3000
1. Configurare AEM per l’editor SPA
Per integrare l’SPA con l’Editor SPA dell’AEM sono necessarie configurazioni dell’AEM. Queste configurazioni vengono gestite e implementate tramite un progetto AEM. In questo capitolo, scopri quali configurazioni sono necessarie e come definirle.
2. Bootstrap dell’SPA
Affinché l'AEM SPA Editor possa integrare un SPA nel proprio contesto di authoring, è necessario apportare alcune aggiunte all'SPA.
3. Componenti fissi modificabili
Innanzitutto, esplora la possibilità di aggiungere un "componente fisso" modificabile all’SPA. Questo illustra come uno sviluppatore può inserire un componente modificabile specifico nell’SPA. L’autore può modificare il contenuto del componente, ma non può rimuoverlo né modificarne la posizione o le dimensioni.
4. Componenti dei contenitori modificabili
Quindi, prova ad aggiungere un "componente contenitore" modificabile all’SPA. Questo illustra come uno sviluppatore può inserire un componente contenitore nell’SPA. I componenti Contenitore consentono agli autori di inserire in essi il componente consentito e di regolare il layout dei componenti.
5. Percorsi dinamici e componenti modificabili
Infine, utilizzare i concetti illustrati nei capitoli precedenti per le route dinamiche, ovvero route che visualizzano contenuti diversi in base al parametro della route. Questo illustra come utilizzare l’Editor SPA dell’AEM per creare contenuti su route guidate e derivate da programma.