Integración de SPA developer-workflow

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

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

En dependencies debería ver varios elementos relacionados con react, incluido react-scripts

ui.frontend es una aplicación de React basada en Crear aplicación de React o CRA para abreviar. La versión react-scripts indica qué versión de CRA se utiliza.

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

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

También se incluyen Componentes WCM de AEM - Implementación principal de React y Componentes WCM de AEM - Editor de spa - Implementación principal de React. Son un conjunto de componentes de interfaz de usuario reutilizables que se asignan a componentes de AEM predeterminados. Están diseñadas para utilizarse tal cual y para satisfacer las necesidades de su proyecto.

En el archivo package.json hay varios scripts definidos:

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

Son scripts de compilación estándar disponibles mediante la aplicación Crear React.

La única diferencia es la adición de && clientlib al script build. Esta instrucción adicional es responsable de copiar el SPA compilado 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.

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

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

Inspeccione el archivo index.js en 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 es el punto de entrada de la SPA. ModelManager lo proporciona AEM SPA Editor JS SDK. Es responsable de llamar a pageModel (el contenido JSON) y de inyectarlo en la aplicación.

Inspeccione el archivo import-components.js en ui.frontend/src/components/import-components.js. Este archivo importa los componentes principales de React predeterminados y los pone a disposición del proyecto. En el siguiente capítulo, analizaremos la asignación de contenido de AEM a componentes de la SPA.

En el módulo ui.frontend, debajo de ui.frontend/src/components, cree una nueva carpeta denominada Header.

Cree un archivo con el nombre Header.js debajo de la carpeta Header.

Rellene Header.js con lo siguiente:

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

Arriba se encuentra un componente React estándar que generará una cadena de texto estático.

Abra el archivo ui.frontend/src/App.js. Este es el punto de entrada de la aplicación.

Realice las siguientes actualizaciones en App.js para incluir la Header estática:

  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 un nuevo terminal, vaya a la carpeta ui.frontend y ejecute el 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 hasta la carpeta ui.apps. Debajo de ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-react debería ver que los archivos SPA compilados se han copiado de la carpeta ui.frontend/build.

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

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

Abra una ficha del explorador y vaya a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Ahora debería ver el contenido del componente Header en la SPA.

Los pasos anteriores se ejecutan automáticamente al activar una compilación de Maven desde la raíz del proyecto (es decir, mvn clean install -PautoInstallSinglePackage). Ahora debe comprender los conceptos básicos de la integración entre la SPA y las bibliotecas del lado del cliente de AEM. Observe que todavía puede editar y agregar Text componentes en AEM debajo del componente estático Header.

Vuelva al IDE y abra el archivo ui.frontend/package.json.

Busque una línea como la siguiente:

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

Crear aplicación React proporciona un mecanismo fácil para las solicitudes de API de proxy. Todas las solicitudes desconocidas se procesan como proxy a través de localhost:4502, el inicio rápido local de AEM.

Abra una ventana de terminal y vaya a la carpeta ui.frontend. Ejecute el 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 una nueva ficha de explorador (si no está abierta) y vaya a http://localhost:3000/content/wknd-spa-react/us/en/home.html.

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

Vuelva al IDE y cree un archivo con el nombre Header.css en la carpeta src/components/Header.

Rellene Header.css con lo siguiente:

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

Vuelva a abrir Header.js y agregue la línea siguiente para hacer referencia a Header.css:

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

Guarde los cambios.

Vaya a http://localhost:3000/content/wknd-spa-react/us/en/home.html para ver los cambios de estilo reflejados automáticamente.

Abra el archivo Page.css en ui.frontend/src/components/Page. Realice los siguientes cambios para corregir el relleno:

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

Vuelva al explorador en http://localhost:3000/content/wknd-spa-react/us/en/home.html. Debería ver reflejados inmediatamente los cambios en la aplicación.

Se agregó

Puede seguir haciendo actualizaciones de contenido en AEM y verlas reflejadas en webpack-dev-server, ya que el contenido se transfiere como proxy.

Detenga el servidor de desarrollo de Webpack con ctrl+c en el terminal.

Vaya a la raíz del proyecto (aem-guides-wknd-spa) e implemente el proyecto en AEM mediante Maven:

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Vaya a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Debería ver los Header actualizados y los estilos aplicados.

Ahora que el SPA actualizado está en AEM, la creación puede continuar.

Vuelva al IDE, vaya a ui.frontend/public y agregue una nueva carpeta llamada mock-content.

Cree un nuevo archivo con el nombre mock.model.json debajo de ui.frontend/public/mock-content.

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

Este es el JSON exportado por AEM que administra la aplicación. Copie la salida JSON.

Pegue la salida JSON del paso anterior en el archivo mock.model.json.

Abra el archivo index.html en ui.frontend/public/index.html. Actualice la propiedad de metadatos del modelo de página de AEM para que apunte a una variable %REACT_APP_PAGE_MODEL_PATH%:

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

El uso de una variable para el valor de cq:pagemodel_root_url hará que sea más fácil alternar entre el proxy y el modelo json ficticio.

Abra el archivo ui.frontend/.env.development y realice las siguientes actualizaciones para comentar el valor anterior de REACT_APP_PAGE_MODEL_PATH y 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

Si se está ejecutando, detenga webpack-dev-server. Inicie webpack-dev-server desde el terminal:

$ cd ui.frontend
$ npm start

Vaya a http://localhost:3000/content/wknd-spa-react/us/en/home.html y debería ver la SPA con el mismo contenido utilizado en el json proxy.

Realice un pequeño cambio en el archivo mock.model.json creado anteriormente. Debería ver el contenido actualizado que se refleja inmediatamente en webpack-dev-server.