Overzicht
Welkom bij de meerdelige zelfstudie voor ontwikkelaars die een bestaande React-based (of Next.js) Verre SPAs met editable AEM inhoud willen uitbreiden gebruikend de Redacteur van AEM SPA.
Dit leerprogramma bouwt op WKND GraphQL Appvoort, een React app die de inhoud van het Fragment van de Inhoud van AEM over AEM GraphQL APIs verbruikt, nochtans verstrekt geen in-context authoring van de inhoud van het KUUROORD.
Over de zelfstudie
Het leerprogramma bedoeld om te illustreren hoe een Verre KUUROORD, of een KUUROORD die buiten de context van AEM loopt, kan worden bijgewerkt om inhoud te verbruiken en te leveren die in AEM wordt authored.
De meeste activiteiten in de zelfstudie zijn gericht op de ontwikkeling van JavaScript, maar er worden kritische aspecten behandeld die rond AEM gaan. Deze aspecten omvatten het bepalen van waar de inhoud wordt geschreven en in AEM wordt opgeslagen en het in kaart brengen van de routes van het KUUROORD aan de Pagina's van AEM.
Het leerprogramma wordt ontworpen om met AEM as a Cloud Service te werken en is samengesteld uit twee projecten:
- Het Project van AEM bevat configuratie en inhoud die aan AEM moet worden opgesteld.
- WKND App project is het KUUROORD dat met de Redacteur van het KUUROORD van AEM moet worden geïntegreerd
Laatste code
- Het uitgangspunt van de code van dit leerprogramma kan op GitHubin de
remote-spa-tutorialomslag worden gevonden.
Vereisten
Voor deze zelfstudie is het volgende vereist:
Deze zelfstudie gaat uit van:
- Microsoft® Visual Studio Codeals winde
- Een werkmap van
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial - AEM SDK uitvoeren als een auteurservice op
http://localhost:4502 - AEM SDK uitvoeren met lokale
adminaccount met wachtwoordadmin - SPA uitvoeren op
http://localhost:3000
1. Vorm AEM for SPA Editor
De configuraties van AEM worden vereist om het KUUROORD met de Redacteur van AEM te integreren SPA. Deze configuraties worden beheerd en geïmplementeerd via een AEM-project. In dit hoofdstuk, leer over welke configuraties noodzakelijk zijn en hoe te om hen te bepalen.
2. Bootstrap de SPA
Voor de Redacteur van AEM SPA om een KUUROORD in het auteurskader te integreren, moeten een paar toevoegingen aan het KUUROORD worden gemaakt.
3. Bewerkbare vaste componenten
Eerst, onderzoek toevoegend een editable "vaste component"aan SPA. Dit illustreert hoe een ontwikkelaar een specifieke editable component, in het KUUROORD kan plaatsen. Hoewel de auteur de inhoud van de component kan wijzigen, kunnen deze de component niet verwijderen of de plaatsing, plaatsing of grootte ervan wijzigen.
4. Bewerkbare containercomponenten
Daarna, onderzoek toevoegend een editable "containercomponent"aan SPA. Dit illustreert hoe een ontwikkelaar een containercomponent in het KUUROORD kan plaatsen. Met containercomponenten kunnen auteurs toegestane componenten erin plaatsen en de lay-out van de componenten aanpassen.
5. Dynamische routes en bewerkbare componenten
Ten slotte, gebruik de concepten die in vorige hoofdstukken aan dynamische routes worden verklaard; routes die verschillende inhoud tonen die op de parameter van de route wordt gebaseerd. Dit illustreert hoe de Redacteur van AEM SPA aan auteursinhoud op routes kan worden gebruikt die programmatically worden gedreven en worden afgeleid.