Ökning
Välkommen till flerdelssjälvstudiekursen för utvecklare som vill utöka en befintlig React-baserad (eller Next.js) SPA med redigerbart AEM med AEM SPA Editor.
Den här självstudiekursen bygger på WKND GraphQL App, en React-app som förbrukar AEM Content Fragment-innehåll framför AEM GraphQL-API:er, men har ingen sammanhangsberoende redigering av SPA.
Om självstudiekursen
Självstudiekursen är tänkt att illustrera hur en SPA, eller en SPA som körs utanför AEM, kan uppdateras för att använda och leverera innehåll som skapats i AEM.
De flesta aktiviteter i självstudiekursen fokuserar på JavaScript-utveckling, men de viktigaste aspekterna beskrivs som kretsar kring AEM. Dessa aspekter kan vara att definiera var innehållet skapas och lagras i AEM och mappa SPA till AEM sidor.
Självstudiekursen är utformad för att fungera med AEM as a Cloud Service och består av två projekt:
- AEM-projektet innehåller konfiguration och innehåll som måste distribueras till AEM.
- WKND App -projektet är SPA som ska integreras med AEM SPA
Senaste kod
- Startpunkten för den här självstudiekursens kod finns i GitHub i mappen
remote-spa-tutorial.
Förutsättningar
Den här självstudiekursen kräver följande:
I den här självstudien förutsätts:
- Microsoft® Visual Studio Code som IDE
- En arbetskatalog för
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial - Kör AEM SDK som en författartjänst på
http://localhost:4502 - Kör AEM SDK med det lokala
admin-kontot med lösenordetadmin - SPA körs på
http://localhost:3000
1. Konfigurera AEM för SPA Editor
AEM konfigurationer krävs för att integrera SPA med AEM SPA. Dessa konfigurationer hanteras och distribueras via ett AEM projekt. Läs om vilka konfigurationer som är nödvändiga och hur du definierar dem i det här kapitlet.
2. Bootstrap SPA
För att AEM redigeraren ska kunna integrera en SPA i sitt redigeringssammanhang måste några tillägg göras i SPA.
3. Redigerbara fasta komponenter
Börja med att utforska hur du lägger till en redigerbar"fast komponent" i SPA. Detta visar hur en utvecklare kan placera en viss redigerbar komponent i SPA. Även om författaren kan ändra komponentens innehåll kan de inte ta bort komponenten eller ändra dess placering, placering eller storlek.
4. Redigerbara behållarkomponenter
Utforska sedan att lägga till en redigerbar"behållarkomponent" i SPA. Detta visar hur en utvecklare kan placera en behållarkomponent i SPA. Med behållarkomponenter kan författare placera tillåtna komponenter i den och justera komponenternas layout.
5. Dynamiska vägar och redigerbara komponenter
Slutligen bör du använda de koncept som beskrivs i tidigare kapitel för dynamiska vägar, dvs. vägar som visar olika innehåll baserat på flödets parameter. Detta visar hur AEM redigerare kan användas för att skapa innehåll på vägar som är programmässigt drivna och härledda.