Panoramica

Ti diamo il benvenuto nell’esercitazione in più parti per gli sviluppatori che desiderano potenziare un SPA remoto basato su React (o Next.js) esistente con contenuto AEM modificabile utilizzando AEM SPA Editor.

Questa esercitazione si basa sull’ app GraphQL WKND, un’app React che consuma AEM contenuto di frammenti di contenuto rispetto AEM API GraphQL, ma non fornisce alcuna creazione contestuale di contenuto SPA.

Informazioni sull’esercitazione

L’esercitazione ha lo scopo di illustrare come è possibile aggiornare un SPA remoto o un SPA in esecuzione al di fuori del contesto di AEM per utilizzare e distribuire contenuti creati in AEM.

La maggior parte delle attività nell'esercitazione si concentra sullo sviluppo JavaScript, tuttavia vengono trattati aspetti critici che ruotano intorno a AEM. Questi aspetti includono la definizione della posizione in cui il contenuto viene creato e memorizzato in AEM e la mappatura SPA percorsi alle pagine AEM.

L’esercitazione è progettata per funzionare con AEM come Cloud Service ed è composta da due progetti:

  1. Il AEM Project contiene la configurazione e il contenuto da distribuire in AEM.
  2. WKND Appproject è il SPA da integrare con AEM Editor SPA

Codice più recente

  • Il codice di questa esercitazione si trova su GitHub nel ramo feature/spa-editor.

Prerequisiti

Questa esercitazione richiede quanto segue:

Questa esercitazione presuppone:

  • Microsoft® Visual Studio Code come IDE
  • Una directory di lavoro di ~/Code/wknd-app
  • Esecuzione dell'SDK AEM come servizio Author su http://localhost:4502
  • Esecuzione dell'SDK AEM con l'account locale admin con password admin
  • Esecuzione del SPA su http://localhost:3000
NOTA

Hai bisogno di aiuto per configurare l’ambiente di sviluppo locale? Consulta la seguente guida per configurare un ambiente di sviluppo locale utilizzando SDK di AEM as a Cloud Service.

Configurazione rapida

Configurazione rapida ti permette di iniziare a usare l’SPA dell’app WKND e l’editor SPA di AEM in 15 minuti. Questa configurazione accelerata consente di passare direttamente allo stato finale dell’esercitazione, consentendoti di esplorare la creazione del SPA in AEM Editor SPA.

1. Configurare AEM per l’editor SPA

Sono necessarie configurazioni AEM per integrare il SPA con AEM SPA Editor. Queste configurazioni vengono gestite e distribuite tramite un progetto AEM. In questo capitolo, scopri quali configurazioni sono necessarie e come definirle.

2. Bootstrap il SPA

Affinché AEM editor di SPA possa integrare un SPA nel suo contesto di authoring, è necessario apportare alcune aggiunte al SPA.

3. Componenti fissi modificabili

Innanzitutto, esplora l’aggiunta di un "componente fisso" modificabile al SPA. Questo illustra come uno sviluppatore può inserire un componente modificabile specifico nella SPA. L’autore può modificare il contenuto del componente, ma non può rimuoverlo o modificarne il posizionamento, il posizionamento o le dimensioni.

4. Componenti del contenitore modificabili

Quindi, esplora l’aggiunta di un "componente contenitore" modificabile al SPA. Questo illustra come uno sviluppatore può inserire un componente contenitore nella SPA. I componenti contenitore consentono agli autori di inserire nel componente consentito e regolare il layout dei componenti.

5. Instradamenti dinamici e componenti modificabili

Infine, utilizzare i concetti illustrati nei capitoli precedenti per tracciare percorsi dinamici; percorsi che visualizzano contenuti diversi in base al parametro della route. Questo illustra come AEM editor di SPA può essere utilizzato per creare contenuti su percorsi guidati e derivati a livello di programmazione.

Altro materiale di riferimento

In questa pagina