Übersicht

Zum Veröffentlichen aus AEM Sites unter Verwendung der Edge Delivery Services klicken Sie hier.

Willkommen beim mehrteiligen Tutorial für Entwickler, die eine vorhandene React-basierte (oder Next.js-) Remote-SPA mit bearbeitbaren AEM-Inhalten mithilfe des AEM-SPA-Editors erweitern möchten.

Dieses Tutorial baut auf der WKND GraphQL App auf, einer React-App, die AEM Inhaltsfragmentinhalte über GraphQL-APIs von AEM nutzt, jedoch keine kontextbezogene Bearbeitung von SPA-Inhalten bereitstellt.

Über das Tutorial

Das Tutorial soll veranschaulichen, wie eine Remote-SPA oder eine SPA, die außerhalb von AEM ausgeführt wird, aktualisiert werden kann, um in AEM erstellte Inhalte zu nutzen und bereitzustellen.

Die meisten Aktivitäten im Tutorial konzentrieren sich auf die JavaScript-Entwicklung. Kritische Aspekte, die sich um AEM drehen, werden jedoch auch behandelt. Zu diesen Aspekten gehören die Definition des Ortes, an dem der Inhalt erstellt und in AEM gespeichert wird, sowie die Zuordnung von SPA-Routen zu AEM-Seiten.

Das Tutorial wurde für die Verwendung mit AEM as a Cloud Service konzipiert und setzt sich aus zwei Projekten zusammen:

1. Das AEM-Projekt enthält Konfigurationen und Inhalte, die für AEM bereitgestellt werden müssen.
2. Das WKND-App-Projekt ist die SPA, das in den SPA-Editor von AEM integriert werden soll

Neuester Code

• Den Ausgangspunkt für den Code dieses Tutorials finden Sie auf GitHub im Ordner remote-spa-tutorial.

Voraussetzungen

Dieses Tutorial erfordert Folgendes:

• AEM as a Cloud Service-SDK
• Node.js v18
• Java™ 11
• Maven 3.6+
• Git
• aem-guides-wknd.all-2.1.0.zip oder höher
• aem-guides-wknd-graphql-Quellcode

Dieses Tutorial setzt Folgendes voraus:

• Microsoft® Visual Studio Code als IDE
• Ein Arbeitsverzeichnis von ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial
• Ausführen des AEM SDK als Autoren-Service in http://localhost:4502
• Ausführen des AEM SDK mit dem lokalen admin-Konto mit Kennwort admin
• Ausführen der SPA auf http://localhost:3000

1. Konfigurieren von AEM für SPA-Editor

AEM-Konfigurationen sind erforderlich, um die SPA mit dem AEM-SPA-Editor zu integrieren. Diese Konfigurationen werden über ein AEM-Projekt verwaltet und bereitgestellt. In diesem Kapitel erfahren Sie, welche Konfigurationen erforderlich sind und wie sie definiert werden.

• Erfahren Sie, wie Sie AEM für den SPA-Editor konfigurieren

2. Bootstrapping des SPA

Damit der AEM-SPA-Editor eine SPA in den Authoring-Kontext integrieren kann, müssen einige Ergänzungen an der SPA vorgenommen werden.

• Erfahren Sie, wie Sie das Bootstrapping der SPA für den AEM-SPA-Editor durchführen.

3. Bearbeitbare feste Komponenten

Erfahren Sie zunächst, wie Sie der SPA eine bearbeitbare „feste Komponente“ hinzufügen. Dies zeigt, wie Entwicklerinnen und Entwickler eine bestimmte bearbeitbare Komponente in die SPA platzieren können. Autorinnen und Autoren können zwar den Inhalt der Komponente ändern, sie können jedoch weder die Komponente entfernen noch ihre Platzierung, Position oder Größe ändern.

• Erfahren Sie mehr über bearbeitbare feste Komponenten

4. Bearbeitbare Container-Komponenten

Erkunden Sie als Nächstes das Hinzufügen einer bearbeitbaren „Container-Komponente“ zur SPA. Dies veranschaulicht, wie Entwicklerinnen und Entwickler eine Container-Komponente in der SPA platzieren können. Mit Container-Komponenten können Autorinnen und Autoren erlaubte Komponenten darin platzieren und das Komponenten-Layout anpassen.

• Erfahren Sie mehr über bearbeitbare Container-Komponenten

5. Dynamische Routen und bearbeitbare Komponenten

Verwenden Sie schließlich die in den vorangegangenen Kapiteln erläuterten Konzepte für dynamische Routen, d. h. Routen, die je nach Parameter der Route unterschiedliche Inhalte anzeigen. Dies veranschaulicht, wie der AEM -SPA-Editor verwendet werden kann, um Inhalte auf programmgesteuerten und abgeleiteten Routen zu erstellen.

• Erfahren Sie mehr über dynamische Routen und bearbeitbare Komponenten

Zusätzliche Ressourcen

• AEM SPA React Editable Components