Übersicht

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 dem WKND GraphQL-App, eine React-App, die AEM Inhaltsfragmentinhalt ü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 as a Cloud Service und setzt sich aus zwei Projekten zusammen:

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

Neuester Code

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

Voraussetzungen

Dieses Tutorial erfordert Folgendes:

Dieses Tutorial setzt voraus, dass:

  • Microsoft® Visual Studio Code als IDE
  • Ein Arbeitsverzeichnis von ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial
  • Ausführen des AEM SDK als Autorendienst in http://localhost:4502
  • Ausführen des AEM SDK mit dem lokalen admin Konto mit 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 Befolgen Sie die Anleitung zum Einrichten einer lokalen Entwicklungsumgebung mit dem AEM as a Cloud Service SDK..

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