Integrera en SPA integrate-spa

Hämta startpunkten för den här självstudiekursen via Git:

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

Distribuera kodbasen till en lokal AEM med Maven:

$ mvn clean install -PautoInstallSinglePackage

Om du använder AEM 6.x lägger du till profilen classic:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

I den utvecklingsmiljö du väljer öppnar du AEM för WKND-SPA. I den här självstudien används Visual Studio-kod-IDE.

Expandera och inspektera mappen ui.frontend. Öppna filen ui.frontend/package.json

Under dependencies ska du se flera relaterade till @angular:

"@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",

Modulen ui.frontend är ett Angular-program som skapats med CLI-verktyget Angular som innehåller routning.

Det finns även tre beroenden som har prefixats med @adobe:

"@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",

Ovanstående moduler utgör AEM JS SDK SPA Editor och tillhandahåller funktioner som gör det möjligt att mappa SPA komponenter till AEM.

I filen package.json definieras flera scripts:

"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"
}

Dessa skript baseras på vanliga CLI-kommandon för Angular men har ändrats något för att fungera med det större AEM.

start - kör Angularna lokalt med en lokal webbserver. Den har uppdaterats för att proxyvisa innehållet i den lokala AEM instansen.

build - kompilerar Angularna för produktionsdistribution. Tillägget av && clientlib ansvarar för att kopiera den kompilerade SPA till modulen ui.apps som ett klientbibliotek under ett bygge. NPM-modulen aem-clientlib-generator används för att underlätta detta.

Mer information om tillgängliga skript finns här.

Inspect filen ui.frontend/clientlib.config.js. Den här konfigurationsfilen används av aem-clientlib-generator för att avgöra hur klientbiblioteket ska genereras.

Inspect filen ui.frontend/pom.xml. Den här filen omvandlar mappen ui.frontend till en Maven-modul. Filen pom.xml har uppdaterats för att använda plugin-programmet front-maven till test och build SPA under en Maven-konstruktion.

Inspect filen app.component.ts på 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 är SPA ingångspunkt. ModelManager tillhandahålls av AEM JS SDK för SPA. Den ansvarar för att anropa och injicera pageModel (JSON-innehållet) i programmet.

Öppna ett nytt terminalfönster och navigera till mappen ui.frontend:

$ cd aem-guides-wknd-spa/ui.frontend

Installera Angular CLI globalt Detta används för att generera komponenterna i Angularna samt för att skapa och betjäna programmet för Angular via kommandot ng.

$ npm install -g @angular/cli

Skapa en ny Header-komponent genom att köra Angular CLI ng generate component-kommandot inifrån mappen ui.frontend.

$ 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)

Detta skapar ett skelett för den nya huvudkomponenten för Angular på ui.frontend/src/app/components/header.

Öppna projektet aem-guides-wknd-spa i den utvecklingsmiljö du vill använda. Navigera till mappen ui.frontend/src/app/components/header.

Öppna filen header.component.html och ersätt innehållet med följande:

<!--/* header.component.html */-->
<header className="header">
    <div className="header-container">
        <h1>WKND</h1>
    </div>
</header>

Observera att detta visar statiskt innehåll, så den här Angularna behöver inte justeras till standardgenererade header.component.ts.

Öppna filen app.component.html på ui.frontend/src/app/app.component.html. Lägg till app-header:

<app-header></app-header>
<router-outlet></router-outlet>

Detta inkluderar header-komponenten ovanför allt sidinnehåll.

Öppna en ny terminal och navigera till mappen ui.frontend och kör kommandot npm run build:

$ cd ui.frontend
$ npm run build

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

Navigera till mappen ui.apps. Under ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-angular bör du se att de kompilerade SPA har kopierats från mappen ui.frontend/build.

Återgå till terminalen och navigera till mappen ui.apps. Kör följande Maven-kommando:

$ 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] ------------------------------------------------------------------------

Detta distribuerar paketet ui.apps till en lokal instans av AEM som körs.

Öppna en webbläsarflik och gå till http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Nu bör du se innehållet i komponenten Header som visas i SPA.

Gå tillbaka till IDE och öppna filen proxy.conf.json på ui.frontend/proxy.conf.json.

[
    {
        "context": [
                    "/content/**/*.(jpg|jpeg|png|model.json)",
                    "/etc.clientlibs/**/*"
                ],
        "target": "http://localhost:4502",
        "auth": "admin:admin",
        "logLevel": "debug"
    }
]

Angular-appen är en enkel mekanism för proxy-API-begäranden. Mönstren som anges i context proxideras via localhost:4502, den lokala AEM snabbstarten.

Öppna filen index.html vid ui.frontend/src/index.html. Det här är HTML-rotfilen som används av dev-servern.

Observera att det finns en post för base href="/". bastaggen är viktig för att programmet ska kunna matcha relativa URL-adresser.

<base href="/">

Öppna ett terminalfönster och navigera till mappen ui.frontend. Kör kommandot npm start:

$ 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

Öppna en ny flik i webbläsaren (om den inte redan är öppen) och gå till http://localhost:4200/content/wknd-spa-angular/us/en/home.html.

Du bör se samma innehåll som i AEM, men utan att någon av redigeringsfunktionerna är aktiverade.

Återgå till IDE och skapa en ny mapp med namnet img på ui.frontend/src/assets.

Hämta och lägg till följande WKND-logotyp i mappen img:

Öppna header.component.html at ui.frontend/src/app/components/header/header.component.html och inkludera logotypen:

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

Spara ändringarna i header.component.html.

Återgå till webbläsaren. Du bör omedelbart se ändringarna av appen återspeglas.

Du kan fortsätta att göra innehållsuppdateringar i AEM och se hur de återspeglas i webbpaketets dev-server eftersom vi proxyerar innehållet. Observera att innehållsändringarna bara visas på webbpaketets dev-server.

Stoppa den lokala webbservern med ctrl+c i terminalen.

Gå till http://localhost:4502/content/wknd-spa-angular/us/en.model.json i webbläsaren.

Detta är den JSON som exporteras av AEM som driver programmet. Kopiera JSON-utdata.

Gå tillbaka till IDE, navigera till ui.frontend/src och lägg till nya mappar med namnen mocks och json så att de matchar följande mappstruktur:

|-- ui.frontend
    |-- src
        |-- mocks
            |-- json

Skapa en ny fil med namnet en.model.json under ui.frontend/public/mocks/json. Klistra in JSON-utdata från Steg 1 här.

Skapa en ny fil proxy.mock.conf.json under ui.frontend. Fyll filen med följande:

[
    {
    "context": [
        "/content/**/*.model.json"
    ],
    "pathRewrite": { "^/content/wknd-spa-angular/us" : "/mocks/json"} ,
    "target": "http://localhost:4200",
    "logLevel": "debug"
    }
]

Den här proxykonfigurationen skriver om begäranden som börjar med /content/wknd-spa-angular/us med /mocks/json och betjänar motsvarande statiska JSON-fil, till exempel:

/content/wknd-spa-angular/us/en.model.json -> /mocks/json/en.model.json

Öppna filen angular.json. Lägg till en ny dev-konfiguration med en uppdaterad assets -array som refererar till den mocks-mapp som skapats.

 "dev": {
          "assets": [
            "src/mocks",
            "src/assets",
            "src/favicon.ico",
            "src/logo192.png",
            "src/logo512.png",
            "src/manifest.json"
          ]
    },

Genom att skapa en dedikerad dev-konfiguration försäkrar du dig om att mappen mocks bara används under utvecklingen och aldrig distribueras till AEM i ett produktionsbygge.

I filen angular.json uppdaterar du browserTarget -konfigurationen till den nya dev -konfigurationen:

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

Öppna filen ui.frontend/package.json och lägg till ett nytt start:mock-kommando som refererar till filen proxy.mock.conf.json.

    "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"
    }

Om du lägger till ett nytt kommando är det enkelt att växla mellan proxykonfigurationerna.

Om den körs just nu stoppar du webbpaketets dev-server. Starta webbpaketets dev-server med skriptet 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

Navigera till http://localhost:4200/content/wknd-spa-angular/us/en/home.html och se samma SPA, men innehållet hämtas nu från JSON-filen mock .

Gör en liten ändring i filen en.model.json som skapades tidigare. Det uppdaterade innehållet bör omedelbart återspeglas i webbpaketets dev-server.

Att kunna manipulera JSON-modellen och se effekterna på en live-SPA kan hjälpa en utvecklare att förstå JSON-modellens API. Det gör det även möjligt att utveckla både fram- och bakände parallellt.

Öppna ett terminalfönster och stoppa webpack-dev-servern om den startas. I mappen ui.frontend anger du följande kommando för att uppdatera Angularna så att .scss -filer bearbetas.

$ cd ui.frontend
$ ng config schematics.@schematics/angular:component.styleext scss

Då uppdateras filen angular.json med en ny post längst ned i filen:

"schematics": {
    "@schematics/angular:component": {
    "styleext": "scss"
    }
}

Installera normalize-scss om du vill normalisera formaten i olika webbläsare:

$ npm install normalize-scss --save

Återgå till IDE och skapa en ny mapp med namnet styles under ui.frontend/src.

Skapa en ny fil under ui.frontend/src/styles med namnet _variables.scss och fyll i den med följande variabler:

//_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;

Byt namn på filtillägget styles.css vid ui.frontend/src/styles.css till styles.scss. Ersätt innehållet med följande:

/* 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;
}

Uppdatera angular.json och ge alla referenser till style.css ett nytt namn med styles.scss. Det ska finnas tre referenser.

  "styles": [
-    "src/styles.css"
+    "src/styles.scss"
   ],

Starta webbpaketets dev-server om du vill se formaten uppdateras i realtid:

$ npm run start:mock

Under ui.frontend/src/app/components/header ska du namnge header.component.css till header.component.scss. Fyll filen med följande:

@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;
}

Uppdatera header.component.ts så att den refererar till header.component.scss:

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

Återgå till webbläsaren och webbpaketets dev-server:

Du bör nu se de uppdaterade formaten som lagts till i komponenten Header.

Stoppa webbpaketets dev-server.

Navigera till roten för projektet /aem-guides-wknd-spa och distribuera projektet till AEM med Maven:

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Gå till http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Den uppdaterade sidhuvudet med logotyp och format:

Nu när den uppdaterade SPA är i AEM kan redigeringen fortsätta.