Integrar el SPA

Comprenda cómo el código fuente de una aplicación de una sola página (SPA) escrita en React se puede integrar con un proyecto de Adobe Experience Manager (AEM). Aprenda a utilizar herramientas front-end modernas, como un servidor de desarrollo de webpack, para desarrollar rápidamente el SPA con la API del modelo JSON de AEM.

Objetivo

Comprender cómo el proyecto de SPA está integrado con AEM con bibliotecas del lado del cliente.
Aprenda a utilizar un servidor de desarrollo de webpack para el desarrollo de front-end dedicado.
Explorar el uso de un proxy y estático mock para desarrollarse con la API del modelo JSON de AEM.

Qué va a generar

En este capítulo, realizará varios pequeños cambios en la SPA para comprender cómo se integra con la AEM.
Este capítulo agregará una Header al SPA. En el proceso de desarrollo de esto static Header componente se utilizan varios enfoques para AEM el desarrollo de SPA.

Nuevo encabezado en AEM

El SPA se amplía para agregar un Header componente

Requisitos previos

Revise las herramientas e instrucciones necesarias para configurar un entorno de desarrollo local. Este capítulo es una continuación del Crear proyecto capítulo, sin embargo, para seguir todo lo que necesita es un proyecto de AEM habilitado para SPA.

Enfoque de integración

Se crearon dos módulos como parte del proyecto AEM: ui.apps y ui.frontend.

La variable ui.frontend es un webpack proyecto que contiene todo el código fuente de SPA. La mayoría de las pruebas y el desarrollo de SPA se realizan en el proyecto de webpack. Cuando se activa una compilación de producción, la SPA se crea y se compila mediante un webpack. Los artefactos compilados (CSS y Javascript) se copian en la variable ui.apps que luego se implementa en el tiempo de ejecución de AEM.

arquitectura de alto nivel ui.frontend

Descripción general de la integración de SPA.

La información adicional sobre la compilación del front-end puede ser se encuentra aquí.

Integración de Inspect con SPA

A continuación, revise la ui.frontend para comprender el SPA que el AEM tipo de archivo del proyecto.

En el IDE de su elección, abra su proyecto AEM. Este tutorial utilizará la variable Código IDE de Visual Studio.
Expanda e inspeccione la variable ui.frontend carpeta. Abra el archivo ui.frontend/package.json
En el dependencies debería ver varias relacionadas con react incluido react-scripts

La variable ui.frontend es una aplicación React basada en la variable Crear aplicación React o CRA para abreviar. La variable 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 forman el AEM SDK de JS Editor SPA y proporcionar la funcionalidad para que sea posible asignar SPA componentes a AEM componentes.

También se incluyen Componentes de WCM de AEM: implementación principal de React y Componentes de WCM de AEM: editor de spa: implementación de React Core. Se trata de un conjunto de componentes de interfaz de usuario reutilizables que se asignan a componentes de AEM listos para usar. Están diseñadas para utilizarse tal cual y para satisfacer las necesidades del proyecto.
En el package.json hay varios scripts definida:
```
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && clientlib",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
}
```
Estos son scripts de compilación estándar creados available por la aplicación Crear reacción.

La única diferencia es la adición de && clientlib a build secuencia de comandos. Esta instrucción adicional es responsable de copiar el SPA compilado en la variable ui.apps como biblioteca del lado del cliente durante una compilación.

El módulo npm aem-clientlib-generator se utiliza para facilitar este proceso.
Inspect el archivo ui.frontend/clientlib.config.js. Este archivo de configuración lo utiliza aem-clientlib-generator para determinar cómo generar la biblioteca de cliente.
Inspect el archivo ui.frontend/pom.xml. Este archivo transforma el ui.frontend carpeta en un Módulo Maven. La variable pom.xml se ha actualizado para usar la variable frontend-maven-plugin a prueba y versión el SPA durante una compilación de Maven.

Inspect el archivo index.js at 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 del SPA. ModelManager es proporcionado por AEM SPA Editor JS SDK. Es responsable de llamar e inyectar el pageModel (el contenido JSON) en la aplicación.

Inspect el archivo import-components.js at ui.frontend/src/components/import-components.js. Este archivo importa el valor predeterminado Reacción de componentes principales y los pone a disposición del proyecto. Inspeccionaremos la asignación de AEM contenido a los componentes de SPA en el capítulo siguiente.

Añadir un componente SPA estático

A continuación, agregue un componente nuevo a la SPA e implemente los cambios en una instancia de AEM local. Este es un cambio sencillo, solo para ilustrar cómo se actualiza el SPA.

En el ui.frontend módulo, debajo ui.frontend/src/components crear una nueva carpeta con el nombre Header.
Crear un archivo con el nombre Header.js debajo del Header carpeta.

Rellenar 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 hay un componente React estándar que mostrará 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 para App.js para incluir el estático Header:

  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 terminal nuevo y vaya a la ui.frontend y ejecute el npm run build comando:

$ 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

Vaya a la ui.apps carpeta. Bajo 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 variableui.frontend/build carpeta.

Vuelva al terminal y navegue hasta el ui.apps carpeta. 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á la variable ui.apps a una instancia local en ejecución de AEM.

Abra una pestaña 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 Header componente que se muestra en el SPA.

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

Servidor de desarrollo de Webpack: proxy de la API JSON

Como se ha visto en ejercicios anteriores, realizar una compilación y sincronizar la biblioteca del cliente con una instancia local de AEM tarda unos minutos. Esto es aceptable para las pruebas finales, pero no es ideal para la mayoría del desarrollo de SPA.

A webpack-dev-server puede utilizarse para desarrollar rápidamente el SPA. El SPA está impulsado por un modelo JSON generado por AEM. En este ejercicio, el contenido JSON de una instancia de AEM en ejecución es proxy en el servidor de desarrollo.

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

Busque una línea como la siguiente:
```
"proxy": "http://localhost:4502",
```
La variable Crear aplicación React proporciona un mecanismo fácil para las solicitudes de API proxy. Todas las solicitudes desconocidas se procesan como proxy a través de localhost:4502, el inicio rápido AEM local.

Abra una ventana de terminal y vaya a la ui.frontend carpeta. Ejecutar 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 pestaña del explorador (si aún 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 capacidades de creación habilitadas.

NOTA

Debido a los requisitos de seguridad de AEM, deberá iniciar sesión en la instancia de AEM local (http://localhost:4502) en el mismo explorador, pero en una pestaña diferente.
Vuelva al IDE y cree un archivo denominado Header.css en el src/components/Header carpeta.

Rellene el 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;
}

IDE de VSCode

Volver a abrir Header.js y agregue la siguiente línea 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 at 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 inmediatamente los cambios realizados en la aplicación.

Puede seguir actualizando el contenido en AEM y verlo reflejado en webpack-dev-server, ya que estamos proxizando el contenido.
Detenga el servidor de desarrollo de webpack con ctrl+c en el terminal.

Implementar SPA actualizaciones en AEM

Los cambios realizados en la variable Header actualmente solo son visibles a través de la variable webpack-dev-server. Implemente el SPA actualizado en AEM para ver los cambios.

Vaya a la raíz del proyecto (aem-guides-wknd-spa) e implemente el proyecto para AEM con Maven:
```
$ cd ..
$ mvn clean install -PautoInstallSinglePackage
```
Vaya a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Debería ver la Header y los estilos aplicados.

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

¡Enhorabuena!

Felicidades, ha actualizado la SPA y explorado la integración con AEM! Ahora sabe cómo desarrollar el SPA con la API del modelo JSON de AEM mediante un webpack-dev-server.

Pasos siguientes

Asignación de componentes de SPA a componentes de AEM : Aprenda a asignar componentes de React a componentes de Adobe Experience Manager (AEM) con el SDK de JS de AEM Editor SPA. La asignación de componentes permite a los usuarios realizar actualizaciones dinámicas de los componentes de SPA dentro del AEM SPA Editor, de forma similar a la creación de AEM tradicional.

Servidor de desarrollo de Webpack (bono): API de JSON de prueba

Otro enfoque para el desarrollo rápido es utilizar un archivo JSON estático para actuar como el modelo JSON. Al "burlarse" del JSON, eliminamos la dependencia de una instancia de AEM local. También permite a un desarrollador front-end actualizar el modelo JSON para probar la funcionalidad y dirigir los cambios a la API JSON que luego sería implementada por un desarrollador back-end.

La configuración inicial del JSON de prueba hace requerir una instancia de AEM local.

Vuelva al IDE y vaya a ui.frontend/public y añada una nueva carpeta denominada mock-content.
Cree un nuevo archivo con el nombre mock.model.json debajo de ui.frontend/public/mock-content.
En el navegador, 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.
Pegar la salida JSON del paso anterior en el archivo mock.model.json.
Abra el archivo . index.html at ui.frontend/public/index.html. Actualice la propiedad de metadatos del modelo de página AEM para que apunte a una variable %REACT_APP_PAGE_MODEL_PATH%:
```
    
    <meta
       property="cq:pagemodel_root_url"
       content="%REACT_APP_PAGE_MODEL_PATH%"
    />
```
Uso de una variable para el valor de la variable cq:pagemodel_root_url hará que sea más fácil alternar entre el proxy y el modelo json de maqueta.

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 la variable webpack-dev-server. Inicie el 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 el SPA con el mismo contenido utilizado en la variable proxy json.
Realice un pequeño cambio en la variable mock.model.json archivo creado anteriormente. Debería ver el contenido actualizado inmediatamente reflejado en el webpack-dev-server.

Poder manipular el modelo JSON y ver los efectos en un SPA activo puede ayudar a un desarrollador a comprender la API del modelo JSON. También permite el desarrollo del front-end y del back-end en paralelo.

Ahora puede alternar dónde consumir el contenido JSON alternando las entradas en la variable env.development archivo:

# JSON API via proxy to AEM
#REACT_APP_PAGE_MODEL_PATH=/content/wknd-spa-react/us/en.model.json
#REACT_APP_API_HOST=http://localhost:4502

# JSON API via static mock file
REACT_APP_PAGE_MODEL_PATH=/mock-content/mock.model.json

Búsqueda nueva y mejorada

Integrar el SPA

Objetivo

Qué va a generar

Requisitos previos

Enfoque de integración

Integración de Inspect con SPA

Añadir un componente SPA estático

Servidor de desarrollo de Webpack: proxy de la API JSON

Implementar SPA actualizaciones en AEM

¡Enhorabuena!

Pasos siguientes

Servidor de desarrollo de Webpack (bono): API de JSON de prueba

Recursos de Business.Adobe.com

En esta página

Ver siguiente:

Aprender

Documentación

Comunidad

Soporte técnico

Recursos

Cuenta de Adobe

Adobe