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.
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.
El SPA se amplía para agregar un Header
componente
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.
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.
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í.
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 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.
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.
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;
}
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.
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.
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.
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.
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%
:
<!-- AEM page model -->
<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