Integrieren einer SPA integrate-spa

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

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

Ö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

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.component.html */-->
<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.

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.

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 bereitgestellt 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"
      },
  ...

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

Ö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"
   ],

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.

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.