Overzicht

[​ voor het publiceren van AEM Sites die Edge Delivery Services gebruiken, klik hier.]{class="badge positive" title="Publish van AEM naar Edge Delivery Services"}

Welkom bij de meerdelige zelfstudie voor ontwikkelaars die een bestaande, op React gebaseerde (of Next.js) externe SPA willen uitbreiden met bewerkbare AEM met AEM SPA Editor.

Dit leerprogramma bouwt op WKND GraphQL Appvoort, een React app die AEM inhoud van het Fragment van de Inhoud over AEM GraphQL APIs verbruikt, nochtans verstrekt geen in-context authoring van SPA inhoud.

Over de zelfstudie

De zelfstudie die is bedoeld om te illustreren hoe een externe SPA, of een SPA die buiten de context van AEM wordt uitgevoerd, kan worden bijgewerkt om inhoud te verbruiken en te leveren die in AEM is geschreven.

De meeste activiteiten in de zelfstudie richten zich op de ontwikkeling van JavaScript, maar er worden kritische aspecten behandeld die om AEM gaan. Deze aspecten omvatten het definiëren van waar de inhoud wordt geschreven en opgeslagen in AEM en het toewijzen SPA routes naar AEM pagina's.

Het leerprogramma wordt ontworpen om met AEM as a Cloud Service te werken en is samengesteld uit twee projecten:

Laatste code

Vereisten

Voor deze zelfstudie is het volgende vereist:

Deze zelfstudie gaat uit van:

1. Configureer AEM voor SPA Editor

AEM configuraties zijn vereist om de SPA te integreren met AEM SPA Editor. Deze configuraties worden beheerd en opgesteld via een AEM Project. In dit hoofdstuk, leer over welke configuraties noodzakelijk zijn en hoe te om hen te bepalen.

2. Bootstrap van de SPA

Om AEM SPA Editor een SPA te kunnen integreren in de ontwerpcontext, moeten er enkele toevoegingen aan de SPA worden aangebracht.

3. Bewerkbare vaste componenten

Verken eerst het toevoegen van een bewerkbare 'vaste' component aan de SPA. Dit illustreert hoe een ontwikkelaar een specifieke bewerkbare component in de SPA 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

Hierna kunt u een bewerkbare 'containercomponent' aan de SPA toevoegen. Dit illustreert hoe een ontwikkelaar een containercomponent in de SPA 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 AEM SPA Redacteur aan auteursinhoud op routes kan worden gebruikt die programmatically worden gedreven en worden afgeleid.

Aanvullende bronnen