Integrieren einer SPA

Erfahren Sie, wie der Quell-Code für eine in Angular geschriebene Single Page Application (SPA) 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, wie ein lokaler Entwicklungs-Server für die dedizierte Frontend-Entwicklung verwendet wird
Verwenden eines Proxys und einer statischen Pseudodatei zur Entwicklung für die AEM-JSON-Modell-API

Was Sie erstellen werden

In diesem Kapitel wird beschrieben, wie der SPA eine einfache Header-Komponente hinzugefügt wird. Während der Erstellung dieser statischen Header-Komponente werden verschiedene Ansätze für die AEM-SPA-Entwicklung 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.

Abrufen des Codes

Laden Sie den Ausgangspunkt für dieses Tutorial über Git herunter:

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/integrate-spa-start

Stellen Sie die Code-Basis mithilfe von Maven in einer lokalen AEM-Instanz bereit:
```
$ mvn clean install -PautoInstallSinglePackage
```
Fügen Sie bei Verwendung von AEM 6.x das Profil classic hinzu:
```
$ mvn clean install -PautoInstallSinglePackage -Pclassic
```

Sie können den fertigen Code jederzeit auf GitHub ansehen oder den Code lokal auschecken, indem Sie zur Verzweigung Angular/integrate-spa-solution wechseln.

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 Modul ui.frontend, um die automatisch vom AEM-Projektarchetyp erstellte SPA zu verstehen.

Öffnen Sie in der IDE Ihrer Wahl das AEM-Projekt für die WKND-SPA. 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 mehrere @angular-Abhängigkeiten zu sehen sein:

"@angular/animations": "~9.1.11",
"@angular/common": "~9.1.11",
"@angular/compiler": "~9.1.11",
"@angular/core": "~9.1.11",
"@angular/forms": "~9.1.10",
"@angular/platform-browser": "~9.1.10",
"@angular/platform-browser-dynamic": "~9.1.10",
"@angular/router": "~9.1.10",

Das Modul ui.frontend ist eine Angular-Anwendung, die mithilfe des Angular-Befehlszeilen-Tools (Command Line Interface, CLI) erstellt wurde und Routing-Funktionen umfasst.

Es sind auch drei @adobe-Abhängigkeiten vorhanden:
```
"@adobe/cq-angular-editable-components": "^2.0.2",
"@adobe/cq-spa-component-mapping": "^1.0.3",
"@adobe/cq-spa-page-model-manager": "^1.1.3",
```
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.
In der Datei package.json sind unter scripts mehrere Skripte definiert:
```
"scripts": {
    "start": "ng serve --open --proxy-config ./proxy.conf.json",
    "build": "ng lint && ng build && clientlib",
    "build:production": "ng lint && ng build --prod && clientlib",
    "test": "ng test",
    "sync": "aemsync -d -w ../ui.apps/src/main/content"
}
```
Diese Skripte basieren auf gängigen Angular-Befehlszeilenbefehlen, die zur Verwendung mit dem größeren AEM-Projekt allerdings geringfügig verändert wurden.

start führt die Angular-App lokal über einen lokalen Webserver aus. Er wurde aktualisiert, um den Inhalt der lokalen AEM-Instanz heranzuziehen.

build kompiliert die Angular-App für die Produktionsverteilung. Durch Hinzufügen von && clientlib wird die kompilierte SPA während eines Build-Vorgangs als Client-seitige Bibliothek in das Modul ui.apps kopiert. Das npm-Modul aem-clientlib-generator wird verwendet, um dies zu erleichtern.

Weitere Informationen zu den verfügbaren Skripten finden Sie hier.
Ü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 app.component.ts unter ui.frontend/src/app/app.component.ts:

import { Constants } from '@adobe/cq-angular-editable-components';
import { ModelManager } from '@adobe/cq-spa-page-model-manager';
import { Component } from '@angular/core';

@Component({
selector: '#spa-root', // tslint:disable-line
styleUrls: ['./app.component.css'],
templateUrl: './app.component.html'
})
export class AppComponent {
    ...

    constructor() {
        ModelManager.initialize().then(this.updateData);
    }

    private updateData = pageModel => {
        this.path = pageModel[Constants.PATH_PROP];
        this.items = pageModel[Constants.ITEMS_PROP];
        this.itemsOrder = pageModel[Constants.ITEMS_ORDER_PROP];
    }
}

app.component.js ist der Einstiegspunkt der SPA. ModelManager wird vom AEM SPA Editor JS SDK bereitgestellt. Darüber wird pageModel (der JSON-Inhalt) aufgerufen und in die Anwendung eingefügt.

Hinzufügen einer Header-Komponente

Als Nächstes fügen Sie eine neue Komponente zur SPA hinzu und stellen die Änderungen in einer lokalen AEM-Instanz bereit, um sich die Integration anzeigen zu lassen.

Öffnen Sie ein neues Terminal-Fenster und navigieren Sie zum Ordner ui.frontend:
```
$ cd aem-guides-wknd-spa/ui.frontend
```
Installieren Sie das Angular-Befehlszeilen-Tool global, um die Angular-Komponenten zu generieren und die Angular-Anwendung mit dem Befehl ng zu erstellen und zu bedienen.
```
$ npm install -g @angular/cli
```
VORSICHT

Die von diesem Projekt verwendete @angular/cli-Version ist 9.1.7. Es wird empfohlen, die Version des Angular-Befehlszeilen-Tools synchron zu halten.

Erstellen Sie eine neue Header-Komponente, indem Sie den Angular-Befehlszeilenbefehl ng generate component im Ordner ui.frontend ausführen.

$ ng generate component components/header

CREATE src/app/components/header/header.component.css (0 bytes)
CREATE src/app/components/header/header.component.html (21 bytes)
CREATE src/app/components/header/header.component.spec.ts (628 bytes)
CREATE src/app/components/header/header.component.ts (269 bytes)
UPDATE src/app/app.module.ts (1809 bytes)

Dadurch wird ein Skelett für die neue Angular-Header-Komponente unter ui.frontend/src/app/components/header erstellt.

Öffnen Sie das Projekt aem-guides-wknd-spa in der IDE Ihrer Wahl. Navigieren Sie zum Ordner ui.frontend/src/app/components/header.
Öffnen Sie die Datei header.component.html und ersetzen Sie den Inhalt durch Folgendes:
```

<header className="header">
    <div className="header-container">
        <h1>WKND</h1>
    </div>
</header>
```
Beachten Sie, dass hier statische Inhalte angezeigt werden, sodass diese Angular-Komponente keine Anpassungen an der standardmäßig generierten Datei header.component.ts erfordert.
Öffnen Sie die Datei app.component.html unter ui.frontend/src/app/app.component.html. Fügen Sie den app-header hinzu:
```
<app-header></app-header>
<router-outlet></router-outlet>
```
Dieser umfasst die header-Komponente über sämtlichem Seiteninhalt.

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

$ cd ui.frontend
$ npm run build

Linting "angular-app"...
All files pass linting.
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

Navigieren Sie zum Ordner ui.apps. Unter ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-angular 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 ui.apps-Paket in einer lokalen aktiven AEM-Instanz bereitgestellt.

Öffnen Sie eine Browser-Registerkarte und navigieren Sie zu http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Der Inhalt der Header-Komponente sollte nun in der SPA zu sehen sein.

Anfängliche Header-Implementierung

Die Schritte 7–9 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 weiterhin Text-Komponenten in AEM bearbeiten und hinzufügen können, die Header-Komponente aber nicht bearbeitbar ist.

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 AEM-Instanz durch einen Proxy-Vorgang an den vom Angular-Projekt konfigurierten Entwicklungs-Server übergeben.

Kehren Sie zur IDE zurück und öffnen Sie die Datei proxy.conf.json unter ui.frontend/proxy.conf.json.
```
[
    {
        "context": [
                    "/content/**/*.(jpg|jpeg|png|model.json)",
                    "/etc.clientlibs/**/*"
                ],
        "target": "http://localhost:4502",
        "auth": "admin:admin",
        "logLevel": "debug"
    }
]
```
Die Angular-App bietet einen einfachen Mechanismus zum Durchführen von Proxy-Vorgängen für API-Anfragen. Die in context spezifizierten Muster müssen durch einen Proxy-Vorgang über localhost:4502, dem lokalen AEM-Schnellstart, übermittelt werden.
Öffnen Sie die Datei index.html unter ui.frontend/src/index.html. Dies ist die HTML-Stammdatei, die vom Dev-Server verwendet wird.

Beachten Sie, dass ein Eintrag für base href="/" vorhanden ist. Das Base-Tag ist wichtig, damit die App relative URLs auflösen kann.
```
<base href="/">
```

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

$ cd ui.frontend
$ npm start

> wknd-spa-angular@0.1.0 start /Users/dgordon/Documents/code/aem-guides-wknd-spa/ui.frontend
> ng serve --open --proxy-config ./proxy.conf.json

10% building 3/3 modules 0 active[HPM] Proxy created: [ '/content/**/*.(jpg|jpeg|png|model.json)', '/etc.clientlibs/**/*' ]  ->  http://localhost:4502
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
ℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

Öffnen Sie eine neue Browser-Registerkarte (falls noch nicht geöffnet) und navigieren Sie zu http://localhost:4200/content/wknd-spa-angular/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 unter ui.frontend/src/assets einen neuen Ordner namens img.
Laden Sie das folgende WKND-Logo herunter und fügen Sie es dem Ordner img hinzu:

Öffnen Sie header.component.html unter ui.frontend/src/app/components/header/header.component.html und fügen Sie das Logo ein:

<header class="header">
    <div class="header-container">
        <div class="logo">
            <img class="logo-img" src="assets/img/wknd-logo-dk.png" alt="WKND SPA" />
        </div>
    </div>
</header>

Speichern Sie die Änderungen in header.component.html.

Kehren Sie zum Browser zurück. Sie sollten die Änderungen an der App sofort sehen.

Sie können weitere Inhaltsaktualisierungen in AEM vornehmen. Diese werden auf dem webpack-Dev-Server wiedergegeben, da wir den Inhalt über einen Proxy-Vorgang spiegeln. Beachten Sie, dass die Inhaltsänderungen nur auf dem webpack-Dev-Server sichtbar sind.
Halten Sie den lokalen Webserver an, indem Sie am Terminal ctrl+c verwenden.

webpack-Dev-Server – Mock-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-Mockups erfordert eine lokale AEM-Instanz.

Navigieren Sie im Browser zu http://localhost:4502/content/wknd-spa-angular/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.
Kehren Sie zur IDE zurück, navigieren Sie zu ui.frontend/src und fügen Sie neue Ordner namens mocks und json entsprechend der folgenden Ordnerstruktur hinzu:
```
|-- ui.frontend
    |-- src
        |-- mocks
            |-- json
```
Erstellen Sie unter ui.frontend/public/mocks/json eine neue Datei mit dem Namen en.model.json. Fügen Sie die JSON-Ausgabe aus Schritt 1 hier ein.
Erstellen Sie unter ui.frontend eine neue Datei mit dem Namen proxy.mock.conf.json. Füllen Sie die Datei mit folgendem Inhalt:
```
[
    {
    "context": [
        "/content/**/*.model.json"
    ],
    "pathRewrite": { "^/content/wknd-spa-angular/us" : "/mocks/json"} ,
    "target": "http://localhost:4200",
    "logLevel": "debug"
    }
]
```
Diese Proxy-Konfiguration schreibt Anfragen, die mit /content/wknd-spa-angular/us beginnen, zu /mocks/json um und beliefert die entsprechende statische JSON-Datei, z. B.:
```
/content/wknd-spa-angular/us/en.model.json -> /mocks/json/en.model.json
```
Öffnen Sie die Datei angular.json. Fügen Sie eine neue dev-Konfiguration mit aktualisiertem Assets-Array hinzu, das auf den erstellten Ordner mocks verweist.
```
 "dev": {
          "assets": [
            "src/mocks",
            "src/assets",
            "src/favicon.ico",
            "src/logo192.png",
            "src/logo512.png",
            "src/manifest.json"
          ]
    },
```
Durch Erstellung einer dedizierten dev-Konfiguration wird sichergestellt, dass der Ordner mocks nur während der Entwicklung verwendet und nie in einem Produktions-Build in AEM implementiert wird.

Aktualisieren Sie als Nächstes in der Datei angular.json die browserTarget-Konfiguration so, dass die neue dev-Konfiguration verwendet wird:

  ...
  "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
+       "browserTarget": "angular-app:build:dev"
-       "browserTarget": "angular-app:build"
      },
  ...

Angular-JSON-Build-Dev-Aktualisierung

Öffnen Sie die Datei ui.frontend/package.json und fügen Sie einen neuen Befehl start:mock zum Verweisen auf die Datei proxy.mock.conf.json hinzu.

    "scripts": {
        "start": "ng serve --open --proxy-config ./proxy.conf.json",
+       "start:mock": "ng serve --open --proxy-config ./proxy.mock.conf.json",
        "build": "ng lint && ng build && clientlib",
        "build:production": "ng lint && ng build --prod && clientlib",
        "test": "ng test",
        "sync": "aemsync -d -w ../ui.apps/src/main/content"
    }

Durch Hinzufügen eines neuen Befehls ist es einfach, zwischen den Proxy-Konfigurationen umzuschalten.

Halten Sie den webpack-Dev-Server an, falls er aktuell ausgeführt wird. Starten Sie den webpack-Dev-Server mit dem Skript start:mock:
```
$ npm run start:mock

> wknd-spa-angular@0.1.0 start:mock /Users/dgordon/Documents/code/aem-guides-wknd-spa/ui.frontend
> ng serve --open --proxy-config ./proxy.mock.conf.json
```
Navigieren Sie zu http://localhost:4200/content/wknd-spa-angular/us/en/home.html. Sie sollten daraufhin dieselbe SPA sehen, wobei der Inhalt nun aber aus der JSON-Pseudodatei bezogen wird.
Nehmen Sie eine kleine Änderung an der zuvor erstellten Datei en.model.json vor. Der aktualisierte Inhalt sollte sofort auf dem webpack-Dev-Server widergespiegelt werden.

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.

Hinzufügen von Stilen mit Sass

Als Nächstes fügen Sie dem Projekt einige aktualisierte Stile hinzu. Durch dieses Projekt wird Sass-Unterstützung für einige nützliche Funktionen wie Variablen hinzugefügt.

Öffnen Sie ein Terminal-Fenster und halten Sie den webpack-Dev-Server an, sofern gestartet. Geben Sie innerhalb des Ordners ui.frontend den folgenden Befehl ein, um die Angular-App so zu aktualisieren, dass scss-Dateien verarbeitet werden.
```
$ cd ui.frontend
$ ng config schematics.@schematics/angular:component.styleext scss
```
Dadurch wird die Datei angular.json mit einem neuen Eintrag am Ende der Datei aktualisiert:
```
"schematics": {
    "@schematics/angular:component": {
    "styleext": "scss"
    }
}
```
Installieren Sie normalize-scss, um die Stile Browser-übergreifend zu normalisieren:
```
$ npm install normalize-scss --save
```
Kehren Sie zur IDE zurück und erstellen Sie unter ui.frontend/src einen neuen Ordner mit dem Namen styles.

Erstellen Sie unter ui.frontend/src/styles eine neue Datei mit dem Namen _variables.scss und füllen Sie sie mit den folgenden Variablen auf:

//_variables.scss

//== Colors
//
//## Gray and brand colors for use across theme.

$black:                  #202020;
$gray:                   #696969;
$gray-light:             #EBEBEB;
$gray-lighter:           #F7F7F7;
$white:                  #FFFFFF;
$yellow:                 #FFEA00;
$blue:                   #0045FF;


//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif:       Georgia, "Times New Roman", Times, serif;
$font-family-base:        $font-family-sans-serif;
$font-size-base:          18px;

$line-height-base:        1.5;
$line-height-computed:    floor(($font-size-base * $line-height-base));

// Functional Colors
$brand-primary:             $yellow;
$body-bg:                   $white;
$text-color:                $black;
$text-color-inverse:        $gray-light;
$link-color:                $blue;

//Layout
$max-width: 1024px;
$header-height: 75px;

// Spacing
$gutter-padding: 12px;

Ändern Sie die Erweiterung der Datei styles.css unter ui.frontend/src/styles.css zu styles.scss. Ersetzen Sie den Inhalt durch Folgendes:

/* styles.scss * /

/* Normalize */
@import '~normalize-scss/sass/normalize';

@import './styles/variables';

body {
    background-color: $body-bg;
    font-family: $font-family-base;
    margin: 0;
    padding: 0;
    font-size: $font-size-base;
    text-align: left;
    color: $text-color;
    line-height: $line-height-base;
}

body.page {
    max-width: $max-width;
    margin: 0 auto;
    padding: $gutter-padding;
    padding-top: $header-height;
}

Aktualisieren Sie angular.json und ändern Sie den Namen style.css in allen Verweisen zu styles.scss. Es sollte 3 Verweise geben.
```
  "styles": [
-    "src/styles.css"
+    "src/styles.scss"
   ],
```

Aktualisieren der Header-Stile

Als Nächstes fügen Sie mit Sass einige markenspezifische Stile zur Header-Komponente hinzu.

Starten Sie den webpack-Dev-Server, um zu sehen, wie die Stile in Echtzeit aktualisiert werden:
```
$ npm run start:mock
```

Benennen Sie unter ui.frontend/src/app/components/header die Datei header.component.css in header.component.scss um. Befüllen Sie die Datei mit folgendem Inhalt:

@import "~src/styles/variables";

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

.header-container {
    display: flex;
    max-width: $max-width;
    margin: 0 auto;
    padding-left: $gutter-padding;
    padding-right: $gutter-padding;
}

.logo {
    z-index: 100;
    display: flex;
    padding-top: $gutter-padding;
    padding-bottom: $gutter-padding;
}

.logo-img {
    width: 100px;
}

Aktualisieren Sie header.component.ts so, dass auf header.component.scss verwiesen wird:

...
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
-   styleUrls: ['./header.component.css']
+   styleUrls: ['./header.component.scss']
  })
...

Kehren Sie zum Browser und webpack-Dev-Server zurück:

Sie sollten nun die aktualisierten Stile sehen, die zur Header-Komponente hinzugefügt wurden.

Bereitstellen von SPA-Updates für AEM

Die Header-Änderungen sind aktuell nur über den webpack-Dev-Server sichtbar. Stellen Sie die aktualisierte SPA für AEM bereit, um die Änderungen anzuzeigen.

Halten Sie den webpack-Dev-Server an.
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-angular/us/en/home.html. Sie sollten den aktualisierten Header mit angewendetem Logo und angewendeten Stilen 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 kennen jetzt zwei verschiedene Ansätze, um die SPA für die AEM-JSON-Modell-API mit einem webpack-Dev-Server zu entwickeln.

Sie können den fertigen Code jederzeit auf GitHub ansehen oder den Code lokal auschecken, indem Sie zur Verzweigung Angular/integrate-spa-solution wechseln.

Nächste Schritte

Zuordnen von SPA-Komponenten zu AEM-Komponenten: Erfahren Sie, wie Sie Angular-Komponenten Adobe Experience Manager (AEM)-Komponenten mit dem AEM SPA Editor JS SDK zuordnen. Die Komponentenzuordnung ermöglicht es Autorinnen und Autoren, im AEM-SPA-Editor dynamische Aktualisierungen an SPA-Komponenten vorzunehmen, ähnlich wie beim herkömmlichen AEM-Authoring.

Integrieren einer SPA

Ziel

Was Sie erstellen werden

Voraussetzungen

Abrufen des Codes

Integrationsansatz

Überprüfen der SPA-Integration

Hinzufügen einer Header-Komponente

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

webpack-Dev-Server – Mock-JSON-API

Hinzufügen von Stilen mit Sass

Aktualisieren der Header-Stile

Bereitstellen von SPA-Updates für AEM

Herzlichen Glückwunsch!

Nächste Schritte

Ressourcen für Business.Adobe.com

Auf dieser Seite

Als Nächstes anzeigen:

Lernressourcen

Dokumentation

Community

Support

Ressourcen

Adobe-Konto

Adobe