Integrieren der SPA developer-workflow

Öffnen Sie Ihr AEM-Projekt in der IDE Ihrer Wahl. In diesem Tutorial wird die Visual Studio Code-IDE verwendet.

Erweitern und überprüfen Sie den Ordner ui.frontend. Öffnen Sie die Datei ui.frontend/package.json

Unter dependencies sollten Sie mehrere mit react zusammenhängende Angaben finden, darunter react-scripts

ui.frontend ist eine React-App, die auf der Create React App oder kurz CRA basiert. Die react-scripts-Version gibt an, welche Version von CRA verwendet wird.

Es gibt auch mehrere Abhängigkeiten mit dem Präfix @adobe:

"@adobe/aem-react-editable-components": "~1.1.2",
"@adobe/aem-spa-component-mapping": "~1.1.0",
"@adobe/aem-spa-page-model-manager": "~1.3.3",
"@adobe/aem-core-components-react-base": "1.1.8",
"@adobe/aem-core-components-react-spa": "1.1.7",

Die oben genannten Module bilden das AEM SPA Editor JS SDK und stellen die Funktionalität bereit, mit der es möglich ist, SPA-Komponenten AEM-Komponenten zuzuordnen.

Ebenfalls enthalten sind AEM WCM-Komponenten – React-Core-Implementierung und AEM WCM-Komponenten – SPA-Editor – React-Core-Implementierung. Hierbei handelt es sich um einen Satz wiederverwendbarer Komponenten der Benutzeroberfläche, die vordefinierten AEM-Komponenten zugeordnet sind. Sie können sie so verwenden, wie sie sind, und sie an die Anforderungen Ihres Projekts anpassen.

In der Datei package.json sind mehrere scripts definiert:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && clientlib",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
}

Dies sind Standard-Build-Skripte, die durch die Create React App verfügbar gemacht werden.

Der einzige Unterschied ist die Hinzufügung von && clientlib zum build-Skript. Diese zusätzliche Anweisung ist für das Kopieren der kompilierten SPA in das ui.apps-Modul als Client-seitige Bibliothek während eines Builds verantwortlich.

Das npm-Modul aem-clientlib-generator wird verwendet, um dies zu erleichtern.

Überprüfen Sie die Datei ui.frontend/clientlib.config.js. Diese Konfigurationsdatei wird von aem-clientlib-generator verwendet, um zu bestimmen, wie die Client-Bibliothek erstellt wird.

Überprüfen Sie die Datei ui.frontend/pom.xml. Durch diese Datei wird aus dem Ordner ui.frontend ein Maven-Modul. Die Datei pom.xml wurde aktualisiert, um die SPA während eines Maven-Builds mithilfe von frontend-maven-plugin zu testen und zu erstellen.

Überprüfen Sie die Datei index.js unter ui.frontend/src/index.js:

//ui.frontend/src/index.js
...
document.addEventListener('DOMContentLoaded', () => {
    ModelManager.initialize().then(pageModel => {
        const history = createBrowserHistory();
        render(
        <Router history={history}>
            <App
            history={history}
            cqChildren={pageModel[Constants.CHILDREN_PROP]}
            cqItems={pageModel[Constants.ITEMS_PROP]}
            cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
            cqPath={pageModel[Constants.PATH_PROP]}
            locationPathname={window.location.pathname}
            />
        </Router>,
        document.getElementById('spa-root')
        );
    });
});

index.js ist der Einstiegspunkt der SPA. ModelManager wird vom AEM SPA Editor JS SDK bereitgestellt. Es ist für das Aufrufen und Einfügen von pageModel (der JSON-Inhalt) in die Anwendung verantwortlich.

Überprüfen Sie die Datei import-components.js unter ui.frontend/src/components/import-components.js. Diese Datei importiert die vorkonfigurierten React-Kernkomponenten und stellt sie für das Projekt zur Verfügung. Wir werden die Zuordnung von AEM-Inhalten zu SPA-Komponenten im nächsten Kapitel untersuchen.

Erstellen Sie im ui.frontend-Modul unterhalb von ui.frontend/src/components einen neuen Ordner namens Header.

Erstellen Sie eine Datei namens Header.js unterhalb des Ordners Header.

Füllen Sie Header.js wie folgt:

//Header.js
import React, {Component} from 'react';

export default class Header extends Component {

    render() {
        return (
                <header className="Header">
                    <div className="Header-container">
                        <h1>WKND</h1>
                    </div>
                </header>
        );
    }
}

Oben ist eine standardmäßige React-Komponente, die eine statische Textzeichenfolge ausgibt.

Öffnen Sie die Datei ui.frontend/src/App.js. Dies ist der Einstiegspunkt der Anwendung.

Nehmen Sie die folgenden Aktualisierungen an App.js vor, um den statischen Header einzubeziehen:

  import { Page, withModel } from '@adobe/aem-react-editable-components';
  import React from 'react';
+ import Header from './components/Header/Header';

  // This component is the application entry point
  class App extends Page {
  render() {
      return (
      <div>
+       <Header />
         {this.childComponents}
         {this.childPages}
     </div>

Öffnen Sie ein neues Terminal, navigieren Sie in den Ordner ui.frontend und führen Sie den Befehl npm run build aus:

$ cd aem-guides-wknd-spa
$ cd ui.frontend
$ npm run build
...
Compiled successfully.

File sizes after gzip:

118.95 KB (-33 B)  build/static/js/2.489f399a.chunk.js
1.11 KB (+48 B)    build/static/js/main.6cfa5095.chunk.js
806 B              build/static/js/runtime-main.42b998df.js
451 B              build/static/css/main.e57bbe8a.chunk.css

Navigieren Sie zum Ordner ui.apps. Unter ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-react sollten Sie sehen, dass die kompilierten SPA-Dateien aus dem Ordnerui.frontend/build kopiert wurden.

Kehren Sie zum Terminal zurück und navigieren Sie zum Ordner ui.apps. Führen Sie den folgenden Maven-Befehl aus:

$ cd ../ui.apps
$ mvn clean install -PautoInstallPackage
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  9.629 s
[INFO] Finished at: 2020-05-04T17:48:07-07:00
[INFO] ------------------------------------------------------------------------

Dadurch wird das Paket ui.apps in einer lokal ausgeführten Instanz von AEM bereitgestellt.

Öffnen Sie eine Browser-Registerkarte und navigieren Sie zu http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Sie sollten nun den Inhalt der Header-Komponente in der SPA angezeigt bekommen.

Die oben genannten Schritte werden automatisch ausgeführt, wenn ein Maven-Build aus dem Stammverzeichnis des Projekts (d. h. mvn clean install -PautoInstallSinglePackage) ausgelöst wird. Sie sollten jetzt die Grundlagen der Integration zwischen der SPA und Client-seitigen AEM-Bibliotheken verstehen. Beachten Sie, dass Sie in AEM weiterhin Text-Komponenten unterhalb der statischen Header-Komponente bearbeiten und hinzufügen können.

Kehren Sie zur IDE zurück und öffnen Sie die Datei ui.frontend/package.json.

Suchen Sie nach einer Zeile ähnlich der folgenden:

"proxy": "http://localhost:4502",

Die Create React App bietet einen einfachen Mechanismus, um API-Anfragen zu proxieren. Alle unbekannten Anfragen werden über localhost:4502, den lokalen AEM-Schnellstart, weitergeleitet.

Öffnen Sie ein Terminalfenster und navigieren Sie zum Ordner ui.frontend. Führen Sie den Befehl npm start aus:

$ cd ui.frontend
$ npm start
...
Compiled successfully!

You can now view wknd-spa-react in the browser.

Local:            http://localhost:3000
On Your Network:  http://192.168.86.136:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Öffnen Sie eine neue Browser-Registerkarte (falls noch nicht geöffnet) und navigieren Sie zu http://localhost:3000/content/wknd-spa-react/us/en/home.html.

Sie sollten denselben Inhalt wie in AEM sehen, jedoch ohne dass eine der Authoring-Funktionen aktiviert ist.

Kehren Sie zur IDE zurück und erstellen Sie eine Datei mit dem Namen Header.css im Ordner src/components/Header.

Befüllen Sie Header.css mit dem Folgenden:

.Header {
    background-color: #FFEA00;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24);
}

.Header-container {
    display: flex;
    max-width: 1024px;
    margin: 0 auto;
    padding: 12px;
}

.Header-container h1 {
    letter-spacing: 0;
    font-size: 48px;
}

Öffnen Sie Header.js erneut und fügen Sie die folgende Zeile als Referenz ein Header.css:

  //Header.js
  import React, {Component} from 'react';
+ require('./Header.css');

Speichern Sie die Änderungen.

Navigieren Sie zu http://localhost:3000/content/wknd-spa-react/us/en/home.html, um zu sehen, dass die Stiländerungen automatisch widergespiegelt werden.

Öffnen Sie die Datei Page.css unter ui.frontend/src/components/Page. Nehmen Sie die folgenden Änderungen am Skript vor, um das Padding zu richten:

.page {
  max-width: 1024px;
  margin: 0 auto;
  padding: 12px;
  padding-top: 50px;
}

Kehren Sie zurück zum Browser unter http://localhost:3000/content/wknd-spa-react/us/en/home.html. Sie sollten die Änderungen an der App sofort sehen.

Sie können weiterhin Inhaltsaktualisierungen in AEM vornehmen und sehen, dass diese in webpack-dev-server reflektiert werden, da wir für den Inhalt einen Proxy verwenden.

Beenden Sie den Webpack Development Server mit ctrl+c im Terminal.

Navigieren Sie zum Stammverzeichnis des Projekts (aem-guides-wknd-spa) und stellen Sie das Projekt mithilfe von Maven für AEM bereit:

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Navigieren Sie zu http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Sie sollten den aktualisierten Header und die angewandten Stile sehen.

Nachdem sich jetzt die aktualisierte SPA in AEM befindet, kann die Bearbeitung fortgesetzt werden.

Kehren Sie zur IDE zurück, navigieren Sie zu ui.frontend/public und fügen Sie einen neuen Ordner mit dem Namen mock-content hinzu.

Erstellen Sie eine neue Datei mit dem Namen mock.model.json unter ui.frontend/public/mock-content.

Navigieren Sie im Browser zu http://localhost:4502/content/wknd-spa-react/us/en.model.json.

Hierbei handelt es sich um den von AEM exportierten JSON-Inhalt, von dem die Anwendung gesteuert wird. Kopieren Sie die JSON-Ausgabe.

Fügen Sie die JSON-Ausgabe aus dem vorherigen Schritt in die Datei mock.model.json ein.

Öffnen Sie die Datei index.html unter ui.frontend/public/index.html. Aktualisieren Sie die Metadateneigenschaft für das AEM Seitenmodell so, dass sie auf eine Variable %REACT_APP_PAGE_MODEL_PATH% verweist:

    <!-- AEM page model -->
    <meta
       property="cq:pagemodel_root_url"
       content="%REACT_APP_PAGE_MODEL_PATH%"
    />

Die Verwendung einer Variablen für den Wert von cq:pagemodel_root_url erleichtert das Umschalten zwischen dem Proxy- und dem Pseudo-JSON-Modell.

Öffnen Sie die Datei ui.frontend/.env.development und nehmen Sie die folgenden Aktualisierungen vor, um den vorherigen Wert für REACT_APP_PAGE_MODEL_PATH und REACT_APP_API_HOST auszukommentieren:

+ PUBLIC_URL=/
- PUBLIC_URL=/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react/resources

- REACT_APP_PAGE_MODEL_PATH=/content/wknd-spa-react/us/en.model.json
+ REACT_APP_PAGE_MODEL_PATH=/mock-content/mock.model.json

- REACT_APP_API_HOST=http://localhost:4502
+ #REACT_APP_API_HOST=http://localhost:4502

REACT_APP_ROOT=/content/wknd-spa-react/us/en/home.html

Halten Sie den webpack-Dev-Server an, falls er aktuell ausgeführt wird. Starten Sie den webpack-dev-server vom Terminal aus:

$ cd ui.frontend
$ npm start

Navigieren Sie zu http://localhost:3000/content/wknd-spa-react/us/en/home.html. Sie sollten jetzt die SPA mit dem gleichen Inhalt sehen, der in der Proxy-JSON verwendet wird.

Nehmen Sie eine kleine Änderung an der zuvor erstellten Datei mock.model.json vor. Sie sollten den aktualisierten Inhalt sofort im webpack-dev-server sehen.