Erstellen eines Projekts spa-editor-project

Öffnen Sie ein Befehlszeilen-Terminal und geben Sie den folgenden Maven-Befehl ein:

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=35 \
 -D appTitle="WKND SPA React" \
 -D appId="wknd-spa-react" \
 -D artifactId="aem-guides-wknd-spa.react" \
 -D groupId="com.adobe.aem.guides.wkndspa.react" \
 -D frontendModule="react" \
 -D aemVersion="cloud"

Achten Sie auf die Eigenschaft frontendModule=react. Dadurch wird der AEM-Projektarchetyp angewiesen, das Projekt mit einer React-Code-Starterbasis für die Verwendung mit dem AEM-SPA-Editor per Bootstrapping zu aktivieren. Eigenschaften wie appTitle, appId, artifactId und groupId werden verwendet, um das Projekt und den Zweck zu identifizieren.

Eine vollständige Liste der verfügbaren Eigenschaften zum Konfigurieren eines Projekts finden Sie hier.

Die folgende Ordner- und Dateistruktur wird vom Maven-Archetyp in Ihrem lokalen Dateisystem generiert:

|--- aem-guides-wknd-spa.react/
    |--- LICENSE
    |--- README.md
    |--- all/
    |--- archetype.properties
    |--- core/
    |--- dispatcher/
    |--- it.tests/
    |--- pom.xml
    |--- ui.apps/
    |--- ui.apps.structure/
    |--- ui.config/
    |--- ui.content/
    |--- ui.frontend/
    |--- ui.tests /
    |--- .gitignore

Jeder Ordner stellt ein einzelnes Maven-Modul dar. In diesem Tutorial arbeiten wir hauptsächlich mit dem Modul ui.frontend, d. h. der React-App. Weitere Informationen zu den einzelnen Modulen finden Sie in der Dokumentation zum AEM-Projektarchetyp.

Stellen Sie sicher, dass eine AEM-Instanz lokal über Port 4502 ausgeführt wird.

Navigieren Sie in der Befehlszeile zum Projektverzeichnis aem-guides-wknd-spa.react.

$ cd aem-guides-wknd-spa.react

Führen Sie den folgenden Befehl aus, um das gesamte Projekt zu erstellen und in AEM bereitzustellen:

$ mvn clean install -PautoInstallSinglePackage

Der Erstellvorgang dauert etwa eine Minute und sollte mit der folgenden Meldung enden:

...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for aem-guides-wknd-spa.react 1.0.0-SNAPSHOT:
[INFO]
[INFO] aem-guides-wknd-spa.react .......................... SUCCESS [  0.257 s]
[INFO] WKND SPA React - Core .............................. SUCCESS [ 12.553 s]
[INFO] WKND SPA React - UI Frontend ....................... SUCCESS [01:46 min]
[INFO] WKND SPA React - Repository Structure Package ...... SUCCESS [  1.082 s]
[INFO] WKND SPA React - UI apps ........................... SUCCESS [  8.237 s]
[INFO] WKND SPA React - UI content ........................ SUCCESS [  5.633 s]
[INFO] WKND SPA React - UI config ......................... SUCCESS [  0.234 s]
[INFO] WKND SPA React - All ............................... SUCCESS [  0.643 s]
[INFO] WKND SPA React - Integration Tests ................. SUCCESS [ 12.377 s]
[INFO] WKND SPA React - Dispatcher ........................ SUCCESS [  0.066 s]
[INFO] WKND SPA React - UI Tests .......................... SUCCESS [  0.074 s]
[INFO] WKND SPA React - Project Analyser .................. SUCCESS [ 31.287 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

Das Maven-Profil autoInstallSinglePackage kompiliert die einzelnen Module des Projekts und stellt der AEM-Instanz ein einziges Paket bereit. Standardmäßig wird dieses Paket in einer AEM-Instanz bereitgestellt, die lokal über den Port 4502 und mit den Anmeldeinformationen von admin:admin ausgeführt wird.

Navigieren Sie in Ihrer lokalen AEM-Instanz zu Package Manager: http://localhost:4502/crx/packmgr/index.jsp.

Es sollten mehrere Pakete mit dem Präfix aem-guides-wknd-spa.react zu sehen sein.

AEM Package Manager

Der gesamte für das Projekt benötigte benutzerspezifische Code wird in diesen Paketen gebündelt und in der AEM-Umgebung installiert.

Navigieren Sie zur Sites-Konsole: http://localhost:4502/sites.html/content.

Die WKND-SPA enthält eine grundlegende Website-Struktur mit einem Land, einer Sprache und einer Startseite. Diese Hierarchie basiert auf den Standardwerten des Archetyps für language_country und isSingleCountryWebsite. Diese Werte können überschrieben werden, indem die verfügbaren Eigenschaften beim Erstellen eines Projekts aktualisiert werden.

Öffnen Sie die Seite us > en > WKND SPA React Home Page, indem Sie die Seite auswählen und in der Menüleiste auf Bearbeiten klicken.

Eine Textkomponente wurde der Seite bereits hinzugefügt. Sie können diese Komponente wie jede andere Komponente in AEM bearbeiten.

Fügen Sie der Seite eine zusätzliche Textkomponente hinzu.

Beachten Sie, dass das Authoring-Erlebnis dem herkömmlichen AEM Sites-Seitenerlebnis ähnelt. Derzeit ist eine begrenzte Anzahl von Komponenten verfügbar, die verwendet werden können. Im Laufe des Tutorials kommen weitere hinzu.

Klicken Sie im Seiten-Editor auf die Schaltfläche Seiteninformationen und dann auf Als veröffentlicht anzeigen:

Dadurch wird eine neue Registerkarte mit dem Abfrageparameter ?wcmmode=disabled geöffnet, wodurch der AEM-Editor deaktiviert wird: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Zeigen Sie den Quell-Code der Seite an. Sie werden feststellen, dass weder der Text Hello World noch der andere Inhalt vorhanden ist. Stattdessen sollten Sie HTML-Code wie den folgenden sehen:

...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="spa-root"></div>
    <script type="text/javascript" src="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react.lc-xxxx-lc.min.js"></script>
</body>
...

clientlib-react.min.js ist die React-SPA, die auf die Seite geladen wird und für das Rendering des Inhalts verantwortlich ist.

Aber woher kommt der Inhalt eigentlich?

Kehren Sie zur Registerkarte zurück: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Öffnen Sie die Entwickler-Tools des Browsers und überprüfen Sie den Netzwerk-Traffic der Seite während einer Aktualisierung. Zeigen Sie die XHR-Anfragen an:

Es sollte eine Anfrage an http://localhost:4502/content/wknd-spa-react/us/en.model.json vorhanden sein. Diese enthält den gesamten Inhalt, formatiert in JSON, für die SPA.

Öffnen Sie Folgendes auf einer neuen Registerkarte: http://localhost:4502/content/wknd-spa-react/us/en.model.json

Die Anfrage en.model.json stellt das Inhaltsmodell für die Anwendung dar. Überprüfen Sie die JSON-Ausgabe. Sie sollten den Code-Ausschnitt finden können, der für die Text-Komponente(n) steht.

...
":items": {
    "text": {
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
}
...

Im nächsten Kapitel untersuchen wir, wie dieser JSON-Inhalt von AEM-Komponenten zu SPA-Komponenten zugeordnet wird, um die Grundlage für das AEM-SPA-Editor-Erlebnis zu bilden.