Ökning
Välkommen till den självstudiekurs i flera delar för utvecklare som vill utöka en befintlig React-baserad (eller Next.js) fjärr-SPA med redigerbart AEM-innehåll med AEM SPA Editor.
Den här självstudiekursen bygger på WKND GraphQL App, en React-app som använder AEM Content Fragment-innehåll i stället för AEM GraphQL API:er, men har ingen kontextredigering av SPA-innehåll.
Om självstudiekursen
Självstudiekursen illustrerar hur en Remote 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 aktiviteterna i självstudiekursen fokuserar på JavaScript utveckling, men de viktigaste aspekterna beskrivs som gäller AEM. Dessa aspekter kan vara att definiera var innehållet skapas och lagras i AEM och mappa SPA-vägar till AEM Pages.
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 den SPA som ska integreras med AEM SPA Editor
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öra AEM SDK som en författartjänst på
http://localhost:4502 - Kör AEM SDK med det lokala
admin-kontot med lösenordetadmin - Kör SPA på
http://localhost:3000
1. Konfigurera AEM för SPA Editor
AEM-konfigurationer krävs för att integrera SPA med AEM SPA Editor. 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 och SPA
För att AEM SPA Editor ska kunna integrera en SPA i sitt redigeringssammanhang måste ytterligare några läggas till i SPA-filen.
3. Redigerbara fasta komponenter
Börja med att utforska hur du lägger till en redigerbar"fast komponent" i SPA-filen. Detta visar hur en utvecklare kan placera en viss redigerbar komponent i SPA-filen. Ä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-filen. 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 SPA Editor kan användas för att skapa innehåll på vägar som styrs och härleds programmatiskt.