Integrieren der SPA

Letzte Aktualisierung: 2023-12-05

Themen:
SPA Editor
Weitere Informationen zu diesem Thema

Erstellt für:
Beginner

Developer

Erfahren Sie, wie der Quellcode für eine Single Page Application (SPA), die in React geschrieben wurde, in ein Adobe Experience Manager (AEM)-Projekt integriert werden kann. Finden Sie heraus, wie Sie mit modernen Frontend-Tools wie einem webpack-Dev-Server die SPA schnell für die AEM-JSON-Modell-API entwickeln können.

Ziel

Erfahren Sie, wie das SPA-Projekt mit Client-seitigen Bibliotheken in AEM integriert wird
Erfahren Sie, wie Sie einen Webpack Development Server für die dedizierte Frontend-Entwicklung verwenden.
Erkunden Sie die Verwendung eines Proxys und einer statischen Pseudodatei für die Entwicklung mit der AEM JSON-Modell-API.

Was Sie erstellen werden

In diesem Kapitel nehmen Sie einige kleine Änderungen an der SPA vor, um zu verstehen, wie sie in AEM integriert wird.
In diesem Kapitel wird beschrieben, wie der SPA eine einfache Header-Komponente hinzugefügt wird. Im Zuge der Erstellung einer statischen Header-Komponente werden verschiedene Ansätze zur Entwicklung einer AEM SPA verwendet.

Neuer Header in AEM

Die SPA wird um eine statische Header-Komponente erweitert.

Voraussetzungen

Vergegenwärtigen Sie sich die erforderlichen Tools und Anweisungen zum Einrichten einer lokalen Entwicklungsumgebung. Dieses Kapitel ist eine Fortsetzung des Kapitels Erstellen eines Projekts. Um diesem Kapitel zu folgen, benötigen Sie lediglich ein funktionierendes SPA-aktiviertes AEM-Projekt.

Integrationsansatz

Im Rahmen des AEM-Projekts wurden zwei Module erstellt: ui.apps und ui.frontend.

Das Modul ui.frontend ist ein webpack-Projekt, das den gesamten SPA-Quellcode enthält. Ein Großteil der SPA-Entwicklung und -Tests erfolgt im webpack-Projekt. Wenn ein Produktions-Build ausgelöst wird, wird die SPA mithilfe von webpack erstellt und kompiliert. Die kompilierten Artefakte (CSS und JavaScript) werden in das Modul ui.apps kopiert, das dann für die AEM-Runtime bereitgestellt wird.

Hochrangige Architektur von ui.frontend

Eine Darstellung der SPA-Integration auf hoher Ebene.

Weitere Informationen zum Frontend-Build finden Sie hier.

Überprüfen der SPA-Integration

Überprüfen Sie anschließend das ui.frontend-Modul, um die SPA zu verstehen, die automatisch vom AEM-Projektarchetyp generiert wurde.

Ö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.

Hinzufügen einer statischen SPA-Komponente

Fügen Sie anschließend eine neue Komponente zum SPA hinzu und stellen Sie die Änderungen auf einer lokalen AEM-Instanz bereit. Dies ist eine einfache Änderung, nur um zu veranschaulichen, wie das SPA aktualisiert wird.

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.

webpack-Dev-Server – Proxy für JSON-API

Wie in den vorherigen Übungen gezeigt, dauert es einige Minuten, einen Build durchzuführen und die Client-Bibliothek mit einer lokalen Instanz von AEM zu synchronisieren. Dies ist für Endtests akzeptabel, aber nicht ideal für den Großteil der SPA-Entwicklung.

Ein webpack-dev-server kann zur schnellen Entwicklung der SPA verwendet werden. Der SPA liegt ein von AEM erstelltes JSON-Modell zugrunde. In dieser Übung wird der JSON-Inhalt einer laufenden Instanz von AEM über einen Proxy auf den Entwicklungs-Server übertragen.

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.

HINWEIS

Aufgrund der Sicherheitsanforderungen von AEM müssen Sie in der lokalen AEM-Instanz (http://localhost:4502) im selben Browser, aber in einer anderen Registerkarte angemeldet sein.
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;
}

VSCode IDE

Ö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.

Bereitstellen von SPA-Updates für AEM

Die Änderungen am Header sind derzeit nur über den webpack-dev-server sichtbar. Stellen Sie die aktualisierte SPA für AEM bereit, um die Änderungen anzuzeigen.

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.

Herzlichen Glückwunsch!

Herzlichen Glückwunsch, Sie haben die SPA aktualisiert und die Integration mit AEM untersucht! Sie wissen jetzt, wie Sie die SPA mit der JSON-Modell-API von AEM unter Verwendung eines webpack-dev-server entwickeln können.

Nächste Schritte

Zuordnen von SPA-Komponenten zu AEM-Komponenten: Erfahren Sie, wie Sie React-Komponenten mit dem AEM SPA Editor JS SDK auf Adobe Experience Manager (AEM)-Komponenten abbilden können. Die Komponentenzuordnung ermöglicht es Benutzenden, im AEM-SPA-Editor dynamische Aktualisierungen an SPA-Komponenten vorzunehmen, ähnlich wie beim herkömmlichen AEM-Authoring.

(Bonus) Webpack Dev Server – Pseudo-JSON-API

Eine weitere Möglichkeit, die Entwicklung zu beschleunigen, besteht darin, eine statische JSON-Datei als JSON-Modell zu verwenden. Durch JSON-„Mocking“ entfernen wir die Abhängigkeit von einer lokalen AEM-Instanz. Außerdem können dadurch Frontend-Entwicklerinnen und -Entwickler das JSON-Modell aktualisieren, um die Funktionalität zu testen und Änderungen an der JSON-API vorzunehmen, die später von Backend-Entwicklerinnen und -Entwicklern implementiert werden.

Die Ersteinrichtung des JSON-Pseudomodells erfordert eine lokale AEM-Instanz.

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:
```
    
    <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.

Die Fähigkeit, das JSON-Modell zu bearbeiten und die Auswirkungen auf eine Live-SPA zu sehen, kann Entwicklerinnen und Entwicklern dabei helfen, die JSON-Modell-API zu verstehen. Außerdem können Frontend- und Backend-Entwicklung parallel erfolgen.

Sie können jetzt umschalten, wo der JSON-Inhalt verwendet werden soll, indem Sie die Einträge in der Datei env.development umschalten:

# JSON API via proxy to AEM
#REACT_APP_PAGE_MODEL_PATH=/content/wknd-spa-react/us/en.model.json
#REACT_APP_API_HOST=http://localhost:4502

# JSON API via static mock file
REACT_APP_PAGE_MODEL_PATH=/mock-content/mock.model.json

Vorherige Seite

Integrieren der SPA

Ziel

Was Sie erstellen werden

Voraussetzungen

Integrationsansatz

Überprüfen der SPA-Integration

Hinzufügen einer statischen SPA-Komponente

webpack-Dev-Server – Proxy für JSON-API

Bereitstellen von SPA-Updates für AEM

Herzlichen Glückwunsch!

Nächste Schritte

(Bonus) Webpack Dev Server – Pseudo-JSON-API

Auf dieser Seite

Als Nächstes anzeigen:

Lernressourcen

Dokumentation

Community

Support

Ressourcen

Adobe-Konto

Adobe