Willkommen zu diesem mehrteiligen Tutorial. Es richtet sich an Entwicklerinnen und Entwickler, die die Funktion SPA-Editor von Adobe Experience Manager (AEM) noch nicht verwendet haben. Dieses mehrteilige Tutorial führt Sie durch die Implementierung einer React-App für eine fiktive Lifestyle-Marke namens WKND. Die React-App wurde für die Bereitstellung mit dem SPA-Editor von AEM entwickelt, der React-Komponenten AEM-Komponenten zuordnet. Die fertiggestellte SPA wird in AEM bereitgestellt und kann mit herkömmlichen Inline-Bearbeitungswerkzeugen von AEM dynamisch bearbeitet werden.
SPA-Implementierung von WKND
Das Tutorial wurde für die Verwendung mit AEM as a Cloud Service entwickelt und ist abwärtskompatibel mit AEM 6.5.4+ und AEM 6.4.8+.
Den gesamten Tutorial-Code finden Sie auf GitHub.
Die aktuelle Code-Basis ist in Form von herunterladbaren AEM-Paketen verfügbar.
Bevor Sie mit diesem Tutorial beginnen, benötigen Sie Folgendes:
Es ist zwar nicht erforderlich, jedoch von Vorteil, über ein grundlegendes Verständnis von der Entwicklung herkömmlicher AEM Sites-Komponenten zu verfügen.
Für die Durchführung dieses Tutorials ist eine lokale Entwicklungsumgebung erforderlich. Screenshots und Videos werden mit dem AEM as a Cloud Service-SDK erfasst, das in einer macOS-Umgebung mit Visual Studio Code als IDE ausgeführt wird. Befehle und Code sollten unabhängig vom lokalen Betriebssystem sein, sofern nicht anders angegeben.
Neu bei AEM as a Cloud Service? Sehen Sie sich eine detaillierte Anleitung zum Einrichten einer lokalen Entwicklungsumgebung mit dem AEM as a Cloud Service-SDK an.
Neu bei AEM 6.5? Sehen Sie sich die folgende Anleitung zum Einrichten einer lokalen Entwicklungsumgebung an.
Keine Zeit verlieren! Starten Sie das Tutorial, indem Sie zum Kapitel Projekt erstellen gehen, und erfahren Sie, wie Sie ein Projekt mit aktiviertem SPA-Editor mithilfe des AEM-Projekt-Archetyps erstellen.