Übersicht

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:

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
HINWEIS

Benötigen Sie Hilfe bei der Einrichtung Ihrer lokalen Entwicklungsumgebung? Lesen Sie die folgende Anleitung zum Einrichten einer lokalen Entwicklungsumgebung mit dem AEM as a Cloud Service-SDK.

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.

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.

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.

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.

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.

Zusätzliche Ressourcen

Auf dieser Seite