SPA Integración de una integrate-spa

Descargue el punto de partida para este tutorial mediante Git:

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

AEM Implemente el código base en una instancia de local mediante Maven:

$ mvn clean install -PautoInstallSinglePackage

AEM Si usa 6.x, agregue el perfil classic:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

AEM SPA En el IDE de su elección, abra el Proyecto de para el WKND. Este tutorial usará el IDE de código de Visual Studio.

AEM SPA

Expanda e inspeccione la carpeta ui.frontend. Abrir el archivo ui.frontend/package.json

En dependencies debería ver varios elementos relacionados con @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",

El módulo ui.frontend es una aplicación de Angular generada mediante la herramienta CLI de Angular que incluye enrutamiento.

También hay tres dependencias con el prefijo @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",

AEM SPA SPA AEM Los módulos anteriores conforman el SDK de JS de Editor de y proporcionan la funcionalidad para que sea posible asignar componentes de la a componentes de la aplicación.

En el archivo package.json se han definido varios 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"
}

Estas secuencias de comandos se basan en comandos CLI de Angular AEM comunes, pero se han modificado ligeramente para que funcionen con el proyecto de mayor tamaño de la interfaz de usuario de la interfaz de usuario (CLI).

start: ejecuta la aplicación de Angular localmente mediante un servidor web local. AEM Se ha actualizado para representar el contenido de la instancia local de.

build: compila la aplicación de Angular para la distribución de producción. SPA La adición de && clientlib es responsable de copiar los datos compilados en el módulo ui.apps como una biblioteca del lado del cliente durante una compilación. El módulo npm aem-clientlib-generator se usa para facilitar esto.

Encontrará más detalles sobre los scripts disponibles aquí.

Inspect el archivo ui.frontend/clientlib.config.js. aem-clientlib-generator utiliza este archivo de configuración para determinar cómo generar la biblioteca de cliente.

Inspect el archivo ui.frontend/pom.xml. Este archivo transforma la carpeta ui.frontend en un módulo Maven. SPA El archivo pom.xml se ha actualizado para usar el complemento frontend-maven-plugin para probar y compilar el durante una compilación de Maven.

Inspect cambió el archivo app.component.ts a las 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];
    }
}

SPA app.component.js es el punto de entrada de la. AEM SPA ModelManager lo proporciona el SDK de JS del Editor de JS de la interfaz de usuario de. Es responsable de llamar a pageModel (el contenido JSON) y de inyectarlo en la aplicación.

Abra una nueva ventana de terminal y vaya a la carpeta ui.frontend:

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

Instale CLI de Angular globalmente. Se usa para generar componentes de Angular, así como para generar y servir la aplicación de Angular mediante el comando ng.

$ npm install -g @angular/cli

Cree un nuevo componente Header ejecutando el comando ng generate component de CLI de Angular desde la carpeta 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)

Se creará un esqueleto para el nuevo componente Encabezado de Angular en ui.frontend/src/app/components/header.

Abra el proyecto aem-guides-wknd-spa en el IDE que desee. Navegue hasta la carpeta ui.frontend/src/app/components/header.

Abra el archivo header.component.html y reemplace el contenido por lo siguiente:

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

Tenga en cuenta que muestra contenido estático, por lo que este componente de Angular no requiere ningún ajuste en el header.component.ts generado de forma predeterminada.

Abra el archivo app.component.html en ui.frontend/src/app/app.component.html. Agregar app-header:

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

Esto incluirá el componente header sobre todo el contenido de la página.

Abra un nuevo terminal, vaya a la carpeta ui.frontend y ejecute el comando 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.

Navegue hasta la carpeta ui.apps. SPA Debajo de ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-angular debería ver que los archivos compilados de la ui.frontend/build se han copiado de la carpeta.

Vuelva al terminal y navegue hasta la carpeta ui.apps. Ejecute el siguiente comando Maven:

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

AEM Esto implementará el paquete ui.apps en una instancia local en ejecución de la aplicación de la aplicación de la.

Abra una ficha del explorador y vaya a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. SPA Ahora debería ver el contenido del componente Header que se muestra en el cuadro de diálogo de elementos de la interfaz de usuario de.

Vuelva al IDE y abra el archivo proxy.conf.json en ui.frontend/proxy.conf.json.

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

La aplicación de Angular proporciona un mecanismo fácil para las solicitudes de API de proxy. AEM Los patrones especificados en context se procesarán como proxy a través de localhost:4502, el inicio rápido de la aplicación local de la aplicación de inicio de sesión de la aplicación de inicio rápido.

Abra el archivo index.html en ui.frontend/src/index.html. Este es el archivo HTML raíz que utiliza el servidor dev.

Observe que hay una entrada para base href="/". La etiqueta base es crítica para que la aplicación resuelva direcciones URL relativas.

<base href="/">

Abra una ventana de terminal y vaya a la carpeta ui.frontend. Ejecute el comando 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

Abra una nueva ficha de explorador (si no está abierta) y vaya a http://localhost:4200/content/wknd-spa-angular/us/en/home.html.

AEM Debería ver el mismo contenido que en el caso de los recursos de creación, pero sin ninguna de las capacidades de creación habilitadas.

Vuelva al IDE y cree una nueva carpeta denominada img en ui.frontend/src/assets.

Descargue y agregue el siguiente logotipo WKND a la carpeta img:

Abra header.component.html en ui.frontend/src/app/components/header/header.component.html e incluya el logotipo:

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

Guarde los cambios en header.component.html.

Vuelva al explorador. Debería ver reflejados inmediatamente los cambios en la aplicación.

AEM Puede seguir haciendo actualizaciones de contenido en ​ ​y verlas reflejadas en el servidor de desarrollo de Webpack, ya que el contenido se transfiere como proxy. Tenga en cuenta que los cambios de contenido solo son visibles en el servidor de desarrollo de Webpack.

Detenga el servidor web local con ctrl+c en el terminal.

En el explorador, vaya a http://localhost:4502/content/wknd-spa-angular/us/en.model.json.

AEM Este es el JSON exportado por el usuario que está impulsando la aplicación. Copie la salida JSON.

Vuelva al IDE y vaya a ui.frontend/src y agregue las nuevas carpetas denominadas mocks y json para que coincidan con la siguiente estructura de carpetas:

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

Cree un nuevo archivo llamado en.model.json debajo de ui.frontend/public/mocks/json. Pegue aquí la salida JSON del Paso 1.

Cree un nuevo archivo proxy.mock.conf.json debajo de ui.frontend. Rellene el archivo con lo siguiente:

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

Esta configuración proxy reescribirá las solicitudes que comiencen por /content/wknd-spa-angular/us con /mocks/json y sirvan al archivo JSON estático correspondiente, por ejemplo:

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

Abra el archivo angular.json. Agregue una nueva configuración de dev con una matriz de assets actualizada para hacer referencia a la carpeta mocks creada.

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

AEM La creación de una configuración dev dedicada garantiza que la carpeta mocks solo se use durante el desarrollo y nunca se implemente para que se ejecute en una compilación de producción.

En el archivo angular.json, actualice la configuración de browserTarget para usar la nueva configuración de dev:

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

Abra el archivo ui.frontend/package.json y agregue un nuevo comando start:mock para hacer referencia al archivo 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"
    }

Añadir un nuevo comando facilita el cambio entre las configuraciones de proxy.

Si se está ejecutando, detenga el servidor de desarrollo de Webpack. Inicie el servidor de desarrollo webpack con el script 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

SPA Vaya a http://localhost:4200/content/wknd-spa-angular/us/en/home.html y debería ver el mismo contenido, pero ahora se está extrayendo el contenido del archivo JSON mock.

Realice un pequeño cambio en el archivo en.model.json creado anteriormente. El contenido actualizado debe reflejarse inmediatamente en el servidor de desarrollo de Webpack.

SPA La posibilidad de manipular el modelo JSON y ver los efectos en un modelo en directo puede ayudar a un desarrollador a comprender la API del modelo JSON. También permite que el desarrollo del front-end y del back-end se produzca en paralelo.

Abra una ventana de terminal y detenga webpack dev server si se inició. Desde la carpeta ui.frontend, escriba el siguiente comando para actualizar la aplicación de Angular y procesar los archivos .scss.

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

Esto actualizará el archivo angular.json con una nueva entrada en la parte inferior del archivo:

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

Instale normalize-scss para normalizar los estilos en todos los exploradores:

$ npm install normalize-scss --save

Vuelva al IDE y, debajo de ui.frontend/src, cree una nueva carpeta denominada styles.

Cree un nuevo archivo debajo de ui.frontend/src/styles con el nombre _variables.scss y rellénelo con las siguientes variables:

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

Cambie el nombre de la extensión del archivo styles.css en ui.frontend/src/styles.css a styles.scss. Reemplace el contenido por lo siguiente:

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

Actualice angular.json y cambie el nombre de todas las referencias a style.css con styles.scss. Debe haber 3 referencias.

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

Inicie webpack dev server para ver cómo se actualizan los estilos en tiempo real:

$ npm run start:mock

En ui.frontend/src/app/components/header, cambie el nombre de header.component.css a header.component.scss. Rellene el archivo con lo siguiente:

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

Actualizar header.component.ts para hacer referencia a header.component.scss:

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

Vuelva al explorador y al servidor de desarrollo de Webpack:

Ahora debería ver los estilos actualizados agregados al componente Header.

Detenga el servidor de desarrollo de Webpack.

AEM Vaya a la raíz del proyecto /aem-guides-wknd-spa e implemente el proyecto para que se ejecute mediante Maven:

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Vaya a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Debería ver el encabezado actualizado con el logotipo y los estilos aplicados:

AEM

SPA AEM Ahora que la actualización de la se encuentra en la fase de creación, la creación puede continuar.