Integrar um SPA integrate-spa

Baixe o ponto de partida para este tutorial pelo Git:

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

Implante a base de código em uma instância de AEM local usando Maven:

$ mvn clean install -PautoInstallSinglePackage

Se estiver usando AEM 6.x adicione o classic perfil:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

No IDE de sua escolha, abra o projeto AEM para o SPA WKND. Este tutorial usará o IDE do Visual Studio Code.

Expanda e inspecione o ui.frontend pasta. Abra o arquivo ui.frontend/package.json

No dependencies você deve ver vários relacionados a @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",

A variável ui.frontend o módulo é um aplicativo Angular gerado usando o Ferramenta CLI do Angular que inclui roteamento.

Há também três dependências com o prefixo @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",

Os módulos acima compõem o AEM SPA Editor JS SDK e fornecer a funcionalidade para possibilitar o mapeamento de componentes do SPA para componentes do AEM.

No package.json arquivo vários scripts são definidos:

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

Esses scripts são baseados em Comandos da CLI do Angular mas foram ligeiramente modificados para funcionar com o projeto AEM maior.

start - executa o aplicativo Angular localmente usando um servidor Web local. Ele foi atualizado para representar o conteúdo da instância local do AEM.

build - compila o aplicativo do Angular para distribuição em produção. A adição de && clientlib O é responsável por copiar o SPA compilado na ui.apps como uma biblioteca do lado do cliente durante uma build. O módulo npm aem-clientlib-generator é usado para facilitar isso.

Mais detalhes sobre os scripts disponíveis podem ser encontrados aqui.

Inspect o arquivo ui.frontend/clientlib.config.js. Este arquivo de configuração é usado por aem-clientlib-generator para determinar como gerar a biblioteca do cliente.

Inspect o arquivo ui.frontend/pom.xml. Esse arquivo transforma o ui.frontend pasta em um Módulo Maven. A variável pom.xml o arquivo foi atualizado para usar o front-end-maven-plugin para test e build o SPA durante uma compilação do Maven.

Inspect o arquivo app.component.ts em 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 é o ponto de entrada do SPA. ModelManager AEM é fornecido pelo SDK JS do Editor de SPA. Ele é responsável por chamar e injetar o pageModel (o conteúdo JSON) no aplicativo.

Abra uma nova janela de terminal e navegue até a ui.frontend pasta:

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

Instalar CLI do Angular globalmente É usado para gerar componentes do Angular, bem como para criar e veicular o aplicativo do Angular por meio da ng comando.

$ npm install -g @angular/cli

Criar um novo Header executando a CLI do Angular ng generate component de dentro do ui.frontend pasta.

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

Isso criará um esqueleto para o novo componente de Cabeçalho do Angular em ui.frontend/src/app/components/header.

Abra o aem-guides-wknd-spa projeto no IDE de sua escolha. Navegue até a ui.frontend/src/app/components/header pasta.

Abra o arquivo header.component.html e substitua o conteúdo pelo seguinte:

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

Observe que esse exibe conteúdo estático, de modo que esse componente do Angular não requer ajustes no padrão gerado header.component.ts.

Abra o arquivo app.component.html em ui.frontend/src/app/app.component.html. Adicione o app-header:

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

Isso incluirá a header acima de todo o conteúdo da página.

Abra um novo terminal e acesse o ui.frontend e execute o npm run build comando:

$ cd ui.frontend
$ npm run build

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

Navegue até a ui.apps pasta. Abaixo ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-angular você deve ver os arquivos SPA compilados que foram copiados doui.frontend/build pasta.

Retorne ao terminal e navegue até o ui.apps pasta. Execute o seguinte 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] ------------------------------------------------------------------------

Isso implantará o ui.apps para uma instância local em execução do AEM.

Abra uma guia do navegador e acesse http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Agora você deve ver o conteúdo do Header componente exibido no SPA.

Retorne ao IDE e abra o arquivo proxy.conf.json em ui.frontend/proxy.conf.json.

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

A variável aplicativo Angular O fornece um mecanismo fácil para solicitações de API de proxy. Os padrões especificados em context são enviadas por proxy através de localhost:4502, o início rápido do AEM local.

Abra o arquivo index.html em ui.frontend/src/index.html. Esse é o arquivo HTML raiz usado pelo servidor dev.

Observe que há uma entrada para base href="/". A variável tag base é essencial para o aplicativo resolver URLs relativos.

<base href="/">

Abra uma janela de terminal e navegue até a ui.frontend pasta. Execute o 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 uma nova guia do navegador (se ainda não estiver aberta) e acesse http://localhost:4200/content/wknd-spa-angular/us/en/home.html.

Você deve ver o mesmo conteúdo que no AEM, mas sem nenhum dos recursos de criação ativados.

Retorne ao IDE e crie uma nova pasta chamada img em ui.frontend/src/assets.

Baixe e adicione o seguinte logotipo WKND à img pasta:

Abertura header.component.html em ui.frontend/src/app/components/header/header.component.html e incluir o 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>

Salvar as alterações em header.component.html.

Retorne ao navegador. Você deve ver imediatamente as alterações no aplicativo refletidas.

Você pode continuar a fazer atualizações de conteúdo no AEM e vê-los refletidos em servidor de desenvolvimento do webpack, já que estamos usando o proxy no conteúdo. Observe que as alterações de conteúdo só são visíveis no servidor de desenvolvimento do webpack.

Parar o servidor Web local com ctrl+c no terminal.

No navegador, navegue até http://localhost:4502/content/wknd-spa-angular/us/en.model.json.

Este é o JSON exportado pelo AEM que está direcionando o aplicativo. Copie a saída JSON.

Retorne ao IDE para navegar até ui.frontend/src e adicionar novas pastas chamadas zombarias e json para corresponder à seguinte estrutura de pastas:

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

Crie um novo arquivo chamado en.model.json debaixo ui.frontend/public/mocks/json. Cole a saída JSON de Etapa 1 aqui.

Criar um novo arquivo proxy.mock.conf.json debaixo ui.frontend. Preencha o arquivo com o seguinte:

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

Essa configuração de proxy regravará solicitações que começam com /content/wknd-spa-angular/us com /mocks/json e veiculam o arquivo JSON estático correspondente, por exemplo:

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

Abra o arquivo angular.json. Adicionar um novo dev configuração com uma atualização ativos matriz para fazer referência ao zombarias pasta criada.

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

Criação de uma dev A configuração do garante que o zombarias A pasta é usada somente durante o desenvolvimento e nunca é implantada no AEM em um build de produção.

No angular.json arquivo, próxima atualização do browserTarget configuração para usar o novo dev configuração:

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

Abra o arquivo ui.frontend/package.json e adicionar um novo início:simulado comando para fazer referência ao proxy.mock.conf.json arquivo.

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

Adicionar um novo comando facilita a alternância entre as configurações de proxy.

Se estiver em execução no momento, interrompa o servidor de desenvolvimento do webpack. Inicie o servidor de desenvolvimento do webpack usando o início:simulado script:

$ 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

Navegue até http://localhost:4200/content/wknd-spa-angular/us/en/home.html e você deve ver o mesmo SPA, mas o conteúdo está sendo retirado do modelo Arquivo JSON.

Faça uma pequena alteração no en.model.json arquivo criado anteriormente. O conteúdo atualizado deve ser refletido imediatamente na variável servidor de desenvolvimento do webpack.

Ser capaz de manipular o modelo JSON e ver os efeitos em um SPA ao vivo pode ajudar um desenvolvedor a entender a API do modelo JSON. Também permite que o desenvolvimento de front-end e back-end ocorra em paralelo.

Abra uma janela de terminal e pare o servidor de desenvolvimento do webpack se iniciado. De dentro do ui.frontend pasta digite o seguinte comando para atualizar o aplicativo Angular para processar .scss arquivos.

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

Isso atualizará o angular.json com uma nova entrada na parte inferior do arquivo:

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

Instalar normalize-scss para normalizar os estilos nos navegadores:

$ npm install normalize-scss --save

Retorne ao IDE e abaixo ui.frontend/src crie uma nova pasta chamada styles.

Criar um novo arquivo abaixo de ui.frontend/src/styles nomeado _variables.scss e preencha-o com as seguintes variáveis:

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

Renomeie a extensão do arquivo estilos.css em ui.frontend/src/styles.css para estilos.scss. Substitua o conteúdo pelo seguinte:

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

Atualizar angular.json e renomear todas as referências a style.css com estilos.scss. Deve haver 3 referências.

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

Inicie o servidor de desenvolvimento do webpack para ver os estilos atualizados em tempo real:

$ npm run start:mock

Em ui.frontend/src/app/components/header renomear header.component.css para header.component.scss. Preencha o arquivo com o seguinte:

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

Atualizar header.component.ts para referência header.component.scss:

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

Retorne ao navegador e à janela servidor de desenvolvimento do webpack:

Agora você deve ver os estilos atualizados adicionados à Cabeçalho componente.

Interrompa o servidor de desenvolvimento do webpack.

Navegue até a raiz do projeto /aem-guides-wknd-spa e implante o projeto no AEM usando Maven:

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Navegue até http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Você deve ver o Cabeçalho com logotipo e estilos aplicados:

Agora que o SPA atualizado está no AEM, a criação pode continuar.