Integrar o SPA developer-workflow

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

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

Em dependencies você deve ver vários relacionados a react incluindo react-scripts

O ui.frontend é um aplicativo React com base no Criar aplicativo React ou CRA para abreviar. A versão react-scripts indica qual versão do CRA é usada.

Há também várias dependências com o prefixo @adobe:

"@adobe/aem-react-editable-components": "~1.1.2",
"@adobe/aem-spa-component-mapping": "~1.1.0",
"@adobe/aem-spa-page-model-manager": "~1.3.3",
"@adobe/aem-core-components-react-base": "1.1.8",
"@adobe/aem-core-components-react-spa": "1.1.7",

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

Também estão incluídos Componentes WCM do AEM - Implementação do React Core e Componentes WCM do AEM - Editor de Spa - Implementação do React Core. Trata-se de um conjunto de componentes reutilizáveis da interface do usuário que mapeiam para componentes AEM prontos para uso. Elas foram projetadas para serem usadas como estão e estilizadas para atender às necessidades do seu projeto.

No arquivo package.json há vários scripts definidos:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && clientlib",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
}

Estes são os scripts de compilação padrão disponibilizados pela opção Criar Aplicativo React.

A única diferença é a adição de && clientlib ao script build. Essa instrução extra é responsável por copiar o SPA compilado no módulo ui.apps como uma biblioteca do lado do cliente durante uma compilação.

O módulo npm aem-clientlib-generator é usado para facilitar isso.

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. Este arquivo transforma a pasta ui.frontend em um módulo Maven. O arquivo pom.xml foi atualizado para usar o SPA frontend-maven-plugin para testar e compilar durante uma compilação de Maven.

Inspect o arquivo index.js em ui.frontend/src/index.js:

//ui.frontend/src/index.js
...
document.addEventListener('DOMContentLoaded', () => {
    ModelManager.initialize().then(pageModel => {
        const history = createBrowserHistory();
        render(
        <Router history={history}>
            <App
            history={history}
            cqChildren={pageModel[Constants.CHILDREN_PROP]}
            cqItems={pageModel[Constants.ITEMS_PROP]}
            cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
            cqPath={pageModel[Constants.PATH_PROP]}
            locationPathname={window.location.pathname}
            />
        </Router>,
        document.getElementById('spa-root')
        );
    });
});

index.js é o ponto de entrada do SPA. ModelManager é fornecido pelo SDK JS do Editor SPA AEM. Ele é responsável por chamar e injetar o pageModel (o conteúdo JSON) no aplicativo.

Inspect o arquivo import-components.js em ui.frontend/src/components/import-components.js. Este arquivo importa os Componentes principais do React prontos para uso e os disponibiliza para o projeto. Vamos inspecionar o mapeamento do conteúdo de AEM para componentes de SPA no próximo capítulo.

No módulo ui.frontend, abaixo de ui.frontend/src/components, crie uma nova pasta chamada Header.

Crie um arquivo chamado Header.js abaixo da pasta Header.

Popular Header.js com o seguinte:

//Header.js
import React, {Component} from 'react';

export default class Header extends Component {

    render() {
        return (
                <header className="Header">
                    <div className="Header-container">
                        <h1>WKND</h1>
                    </div>
                </header>
        );
    }
}

Acima está um componente React padrão que resultará em uma sequência de caracteres de texto estática.

Abra o arquivo ui.frontend/src/App.js. Este é o ponto de entrada do aplicativo.

Faça as seguintes atualizações em App.js para incluir o Header estático:

  import { Page, withModel } from '@adobe/aem-react-editable-components';
  import React from 'react';
+ import Header from './components/Header/Header';

  // This component is the application entry point
  class App extends Page {
  render() {
      return (
      <div>
+       <Header />
         {this.childComponents}
         {this.childPages}
     </div>

Abra um novo terminal, navegue até a pasta ui.frontend e execute o comando npm run build:

$ cd aem-guides-wknd-spa
$ cd ui.frontend
$ npm run build
...
Compiled successfully.

File sizes after gzip:

118.95 KB (-33 B)  build/static/js/2.489f399a.chunk.js
1.11 KB (+48 B)    build/static/js/main.6cfa5095.chunk.js
806 B              build/static/js/runtime-main.42b998df.js
451 B              build/static/css/main.e57bbe8a.chunk.css

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

Retorne ao terminal e navegue até a pasta ui.apps. 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 pacote ui.apps em uma instância de AEM local em execução.

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

As etapas acima são executadas automaticamente ao acionar uma compilação Maven da raiz do projeto (ou seja, mvn clean install -PautoInstallSinglePackage). Agora você deve entender as noções básicas da integração entre as bibliotecas do lado do cliente SPA e AEM. Observe que você ainda pode editar e adicionar Text componentes no AEM abaixo do componente estático Header.

Retorne ao IDE e abra o arquivo ui.frontend/package.json.

Procure uma linha como a seguinte:

"proxy": "http://localhost:4502",

O Criar aplicativo React fornece um mecanismo fácil para solicitações de API de proxy. Todas as solicitações desconhecidas são encaminhadas por proxy através de localhost:4502, o quickstart AEM local.

Abra uma janela de terminal e navegue até a pasta ui.frontend. Execute o comando npm start:

$ cd ui.frontend
$ npm start
...
Compiled successfully!

You can now view wknd-spa-react in the browser.

Local:            http://localhost:3000
On Your Network:  http://192.168.86.136:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Abra uma nova guia do navegador (se ainda não estiver aberta) e navegue até http://localhost:3000/content/wknd-spa-react/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 um arquivo chamado Header.css na pasta src/components/Header.

Preencha o Header.css com o seguinte:

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

.Header-container {
    display: flex;
    max-width: 1024px;
    margin: 0 auto;
    padding: 12px;
}

.Header-container h1 {
    letter-spacing: 0;
    font-size: 48px;
}

Reabra Header.js e adicione a seguinte linha à referência Header.css:

  //Header.js
  import React, {Component} from 'react';
+ require('./Header.css');

Salve as alterações.

Navegue até http://localhost:3000/content/wknd-spa-react/us/en/home.html para ver as alterações de estilo refletidas automaticamente.

Abra o arquivo Page.css em ui.frontend/src/components/Page. Faça as seguintes alterações para corrigir o preenchimento:

.page {
  max-width: 1024px;
  margin: 0 auto;
  padding: 12px;
  padding-top: 50px;
}

Retorne ao navegador em http://localhost:3000/content/wknd-spa-react/us/en/home.html. Você deve ver imediatamente as alterações no aplicativo refletidas.

Você pode continuar a fazer atualizações de conteúdo no AEM e vê-las refletidas no webpack-dev-server, já que estamos usando o proxy para o conteúdo.

Interrompa o servidor de desenvolvimento do webpack com ctrl+c no terminal.

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-react/us/en/home.html. Você deve ver os Header e estilos atualizados aplicados.

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

Retorne ao IDE, navegue até ui.frontend/public e adicione uma nova pasta chamada mock-content.

Crie um novo arquivo com o nome mock.model.json debaixo de ui.frontend/public/mock-content.

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

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

Cole a saída JSON da etapa anterior no arquivo mock.model.json.

Abra o arquivo index.html em ui.frontend/public/index.html. Atualize a propriedade de metadados do modelo de página AEM para apontar para uma variável %REACT_APP_PAGE_MODEL_PATH%:

    <!-- AEM page model -->
    <meta
       property="cq:pagemodel_root_url"
       content="%REACT_APP_PAGE_MODEL_PATH%"
    />

Usar uma variável para o valor de cq:pagemodel_root_url facilitará a alternância entre o modelo proxy e o modelo json fictício.

Abra o arquivo ui.frontend/.env.development e faça as seguintes atualizações para comentar o valor anterior de REACT_APP_PAGE_MODEL_PATH e REACT_APP_API_HOST:

+ PUBLIC_URL=/
- PUBLIC_URL=/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react/resources

- REACT_APP_PAGE_MODEL_PATH=/content/wknd-spa-react/us/en.model.json
+ REACT_APP_PAGE_MODEL_PATH=/mock-content/mock.model.json

- REACT_APP_API_HOST=http://localhost:4502
+ #REACT_APP_API_HOST=http://localhost:4502

REACT_APP_ROOT=/content/wknd-spa-react/us/en/home.html

Se estiver em execução, pare o webpack-dev-server. Inicie o webpack-dev-server do terminal:

$ cd ui.frontend
$ npm start

Navegue até http://localhost:3000/content/wknd-spa-react/us/en/home.html e você deverá ver o SPA com o mesmo conteúdo usado no json proxy.

Faça uma pequena alteração no arquivo mock.model.json criado anteriormente. Você deve ver o conteúdo atualizado imediatamente refletido no webpack-dev-server.