Panoramica
Ti diamo il benvenuto in questo tutorial in più parti progettato per gli sviluppatori che desiderano potenziare un’applicazione a pagina singola remota basata su React (o Next.js) con contenuti AEM modificabili tramite l’editor SPA di AEM.
Questo tutorial si basa sull’app GraphQL WKND, un’app React che utilizza contenuto di frammenti di contenuto AEM tramite le API GraphQL di AEM, ma non fornisce alcuna creazione di contenuti SPA nel contesto.
Informazioni sul tutorial
Il tutorial che illustra come aggiornare un’applicazione a pagina singola remota o in esecuzione al di fuori del contesto di AEM 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 legati ad AEM. Questi aspetti includono la definizione della posizione in cui il contenuto viene creato e memorizzato in AEM e la mappatura dei percorsi delle applicazioni a pagina singola nelle pagine AEM.
Il tutorial è progettato per utilizzare AEM as a Cloud Service ed è composto da due progetti:
- Il progetto AEM contiene la configurazione e il contenuto che devono essere distribuiti in AEM.
- Il progetto App WKND è l’applicazione a pagina singola (SPA) da integrare con l’editor di SPA di AEM
Codice più recente
- Il punto iniziale del codice di questo tutorial è disponibile in 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 di AEM SDK come servizio di authoring su
http://localhost:4502 - Esecuzione di AEM SDK con l’account
adminlocale con passwordadmin - Esecuzione dell’applicazione a pagina singola su
http://localhost:3000
1. Configurare AEM per l’editor di SPA
Per integrare un’applicazione a pagina singola con l’editor di SPA di AEM sono necessarie configurazioni di AEM. Queste configurazioni vengono gestite e distribuite tramite un progetto AEM. In questo capitolo, scoprirai quali configurazioni sono necessarie e come definirle.
2. Bootstrap dell’applicazione a pagina singola
Affinché l’editor SPA di AEM possa integrare un’applicazione a pagina singola nel contesto di authoring, è necessario apportare alcune aggiunte alla SPA.
3. Componenti fissi modificabili
Innanzitutto, prova ad aggiungere un “componente fisso” modificabile all’applicazione a pagina singola. Questo illustra come uno sviluppatore può posizionare un componente modificabile specifico nell’applicazione a pagina singola. L’autore può modificare il contenuto del componente, ma non può rimuoverlo né modificarne la posizione o le dimensioni.
4. Componenti dei contenitori modificabili
Successivamente, prova ad aggiungere un “componente contenitore” modificabile all’applicazione a pagina singola. Questo illustra come uno sviluppatore può posizionare un componente contenitore nell’applicazione a pagina singola. I componenti contenitore consentono agli autori di posizionare in essi il componente consentito e di regolare il layout dei componenti.
5. Percorsi dinamici e componenti modificabili
Infine, utilizza i concetti illustrati nei capitoli precedenti per i percorsi dinamici; percorsi che mostrano contenuti diversi in base al parametro del percorso. Questo illustra come l’editor di SPA di AEM può essere utilizzato per l’authoring di contenuti su percorsi guidati e derivati a livello di programmazione.