Überblick

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

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

Über die Schulung

Das Tutorial soll veranschaulichen, wie eine Remote-SPA oder eine SPA, die außerhalb des 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 behandelt. Zu diesen Aspekten gehört die Definition, wo der Inhalt in AEM erstellt und gespeichert wird, und die Zuordnung SPA Routen zu AEM Seiten.

Das Tutorial wurde für die Verwendung mit AEM als Cloud Service entwickelt und umfasst zwei Projekte:

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

Neuester Code

  • Der Code dieses Tutorials befindet sich auf GitHub der Verzweigung feature/spa-editor.

Voraussetzungen

Dieses Tutorial erfordert Folgendes:

Dieses Tutorial setzt voraus, dass:

  • Microsoft® Visual Studio- Codeas als IDE
  • Ein Arbeitsverzeichnis von ~/Code/wknd-app
  • Ausführen des AEM SDK als Autorendienst auf http://localhost:4502
  • Ausführen des AEM SDK mit dem lokalen admin-Konto mit dem Kennwort admin
  • Ausführen des SPA auf http://localhost:3000
HINWEIS

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

Schnell-Setup

Quick Setup bringt Sie in 15 Minuten mit dem WKND-App-SPA und AEM SPA Editor. Durch dieses beschleunigte Setup gelangen Sie direkt zum Endstatus des Tutorials, sodass Sie das Authoring der SPA im AEM SPA Editor untersuchen können.

1. AEM für SPA Editor konfigurieren

AEM Konfigurationen sind erforderlich, um die SPA in AEM 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. Bootstrap des SPA

Damit AEM SPA Editor einen SPA in den Authoring-Kontext integrieren kann, müssen einige SPA hinzugefügt werden.

3. Bearbeitbare feste Komponenten

Erfahren Sie zunächst, wie Sie dem SPA eine bearbeitbare "feste Komponente"hinzufügen. Dies zeigt, wie ein Entwickler eine bestimmte bearbeitbare Komponente in die SPA platzieren kann. Der Autor kann zwar den Inhalt der Komponente ändern, kann jedoch die Komponente weder 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"zum SPA. Dies zeigt, wie ein Entwickler eine Container-Komponente in die SPA platzieren kann. Container-Komponenten ermöglichen es Autoren, zulässige Komponenten darin zu platzieren und das Layout der Komponenten anzupassen.

5. Dynamische Routen und bearbeitbare Komponenten

Verwenden Sie abschließend die in vorherigen Kapiteln erläuterten Konzepte für dynamische Routen. Routen, die je nach Parameter der Route unterschiedliche Inhalte anzeigen. Dies veranschaulicht, wie AEM SPA Editor verwendet werden kann, um Inhalte auf Routen zu erstellen, die programmgesteuert gesteuert gesteuert und abgeleitet werden.

Zusätzliche Ressourcen

Auf dieser Seite