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.
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:
feature/spa-editor
.Dieses Tutorial erfordert Folgendes:
Dieses Tutorial setzt voraus, dass:
~/Code/wknd-app
http://localhost:4502
admin
-Konto mit dem Kennwort admin
http://localhost:3000
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.
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.
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.
Damit AEM SPA Editor einen SPA in den Authoring-Kontext integrieren kann, müssen einige SPA hinzugefügt werden.
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.
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.
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.