Ü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:
- Das AEM-Projekt enthält Konfigurationen und Inhalte, die für AEM bereitgestellt werden müssen.
- 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 Kennwortadmin - 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.
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.