SPA Integración de la developer-workflow
SPA Comprenda cómo el código fuente de una aplicación de una sola página () escrita en React se puede integrar en un proyecto de Adobe Experience Manager AEM (). SPA AEM Aprenda a utilizar herramientas front-end modernas, como un servidor de desarrollo de Webpack, para desarrollar rápidamente la contra la API del modelo JSON de la red de aplicaciones de la red de aplicaciones de JSON de la red de aplicaciones de la red (JSON) de la red de archivos de datos.
Objetivo
- SPA AEM Comprender cómo el proyecto de está integrado con las bibliotecas del lado del cliente y la forma en que lo hace.
- Aprenda a utilizar un servidor de desarrollo de Webpack para el desarrollo front-end dedicado.
- Explorar el uso de un proxy y estático burlar de AEM para desarrollar con la API del modelo JSON de.
Qué va a generar
SPA AEM En este capítulo, realizará varios cambios pequeños en la para comprender cómo se integra con los recursos de la interfaz de usuario de.
Este capítulo añadirá un Header
SPA componente a la. En el proceso de construcción de esto estático Header
AEM SPA componente se utilizan varios enfoques para el desarrollo de la.
SPA La se amplía para agregar una estática Header
componente
Requisitos previos
Revise las herramientas y las instrucciones necesarias para configurar una entorno de desarrollo local. Este capítulo es una continuación de la Crear proyecto SPA AEM , sin embargo, para seguir todo lo que necesita es un proyecto de trabajo que funcione y que esté habilitado para el uso de la.
Enfoque de integración integration-approach
AEM Se crearon dos módulos como parte del proyecto de: ui.apps
y ui.frontend
.
El ui.frontend
El módulo es un webpack SPA proyecto que contiene todo el código fuente de la. SPA La mayoría de las pruebas y el desarrollo de la se realizan en el proyecto de Webpack. SPA Cuando se activa una compilación de producción, la generación de la se compila mediante Webpack. Los artefactos compilados (CSS y Javascript) se copian en la variable ui.apps
AEM que luego se implementa en el tiempo de ejecución de la.
SPA Una descripción de alto nivel de la integración de la.
Puede obtener información adicional sobre la versión del front-end encontrado aquí.
Inspect SPA la integración de la inspect-spa-integration
A continuación, inspeccione el ui.frontend
SPA para comprender la que ha generado automáticamente el módulo AEM Arquetipo de proyecto.
-
AEM En el IDE de su elección, abra el proyecto de. Este tutorial utilizará el IDE de código de Visual Studio.
-
Expanda e inspeccione el
ui.frontend
carpeta. Abra el archivoui.frontend/package.json
-
En el
dependencies
debería ver varias relacionadas conreact
incluyendoreact-scripts
El
ui.frontend
es una aplicación de React basada en Crear aplicación de React o CRA para abreviar. Elreact-scripts
version indica qué versión de CRA se utiliza. -
También hay varias dependencias con el prefijo
@adobe
:code language-json "@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 el AEM SPA SDK de JS de Editor de SPA AEM y proporcionan la funcionalidad para hacer posible la asignación de componentes de la a componentes de la.
También se incluyen AEM Componentes de WCM: implementación principal de React y AEM Componentes de WCM - Editor de spa - Implementación principal de React. AEM Se trata de un conjunto de componentes de la interfaz de usuario reutilizables que se asignan a componentes de la interfaz de usuario listos para usar. Están diseñadas para utilizarse tal cual y para satisfacer las necesidades de su proyecto.
-
En el
package.json
archivo hay variosscripts
definido:code language-json "scripts": { "start": "react-scripts start", "build": "react-scripts build && clientlib", "test": "react-scripts test", "eject": "react-scripts eject", }
Se trata de scripts de compilación estándar realizados disponible mediante Crear aplicación de React.
La única diferencia es la adición de
&& clientlib
a labuild
script. SPA Esta instrucción adicional es responsable de copiar los datos compilados en el archivo de comandos de la interfaz de usuario de la interfaz de usuario deui.apps
como una biblioteca del lado del cliente durante una compilación.El módulo npm aem-clientlib-generator se utiliza para facilitar esto.
-
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 elui.frontend
carpeta en una módulo Maven. Elpom.xml
se ha actualizado el archivo para utilizar el frontend-maven-plugin hasta prueba y generar SPA la configuración de la aplicación durante una compilación de Maven. -
Inspect el archivo
index.js
enui.frontend/src/index.js
:code language-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
SPA es el punto de entrada de la.ModelManager
AEM SPA es proporcionado por el SDK de JS de Editor de. Es responsable de llamar e inyectar alpageModel
(el contenido JSON) en la aplicación. -
Inspect el archivo
import-components.js
enui.frontend/src/components/import-components.js
. Este archivo importa el de forma predeterminada Componentes principales de React y los pone a disposición del proyecto. AEM SPA En el siguiente capítulo analizaremos la asignación de contenido de la a componentes de la.
SPA Añadir un componente de estático static-spa-component
SPA AEM A continuación, añada un nuevo componente a la e implemente los cambios en una instancia local de. SPA Este es un cambio sencillo, solo para ilustrar cómo se actualiza la.
-
En el
ui.frontend
módulo, debajo deui.frontend/src/components
cree una nueva carpeta con el nombreHeader
. -
Cree un archivo llamado
Header.js
debajo deHeader
carpeta. -
Rellenar
Header.js
con lo siguiente:code language-js //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 estáticaHeader
:code language-diff 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 navegue hasta el
ui.frontend
y ejecute elnpm run build
comando:code language-shell $ 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
. Debajoui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-react
SPA debería ver que los archivos compilados de la se han copiado desde elui.frontend/build
carpeta. -
Vuelva a la terminal y navegue hasta la
ui.apps
carpeta. Ejecute el siguiente comando Maven:code language-shell $ 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
ui.apps
AEM a una instancia local en ejecución de la aplicación de la aplicación de la. -
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 de la
Header
SPA componente que se muestra en la lista de componentes de.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
). SPA AEM Ahora debería comprender los conceptos básicos de la integración entre las bibliotecas del lado del cliente de la y la de la segmentación de datos Observe que aún puede editar y agregarText
AEM componentes en la zona de la red bajo el elemento estáticoHeader
componente.
Servidor de desarrollo de Webpack: proxy de la API de JSON proxy-json
AEM Como se ha visto en los ejercicios anteriores, llevar a cabo una compilación y sincronizar la biblioteca de cliente con una instancia local de lleva unos minutos. SPA Esto es aceptable para las pruebas finales, pero no es ideal para la mayoría del desarrollo de la.
A webpack-dev-server SPA se puede utilizar para desarrollar rápidamente la. SPA AEM La está impulsada por un modelo JSON generado por el grupo de informes de. AEM En este ejercicio, el contenido JSON de una instancia en ejecución de es el siguiente en proxy en el servidor de desarrollo.
-
Vuelva al IDE y abra el archivo
ui.frontend/package.json
.Busque una línea como la siguiente:
code language-json "proxy": "http://localhost:4502",
El Crear aplicación de React proporciona un mecanismo fácil para las solicitudes de API de proxy. Todas las solicitudes desconocidas se procesan como proxy mediante
localhost:4502
AEM , el inicio rápido local de la. -
Abra una ventana de terminal y vaya a
ui.frontend
carpeta. Ejecute el comandonpm start
:code language-shell $ 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 no está abierta todavía) y vaya a http://localhost:3000/content/wknd-spa-react/us/en/home.html.
AEM Debería ver el mismo contenido que en el caso de los recursos de creación, pero sin ninguna de las capacidades de creación habilitadas.
note note NOTE AEM AEM Debido a los requisitos de seguridad de la, deberá iniciar sesión en la instancia de 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 elsrc/components/Header
carpeta. -
Rellene el
Header.css
con lo siguiente:code language-css .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 a la que hacer referenciaHeader.css
:code language-diff //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
enui.frontend/src/components/Page
. Realice los siguientes cambios para corregir el relleno:code language-css .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.
AEM Puede seguir realizando actualizaciones de contenido en los segmentos de y ver cómo se reflejan en las actualizaciones de contenido de los segmentos de webpack-dev-server, ya que estamos procesando el contenido.
-
Detenga el servidor de desarrollo de Webpack con
ctrl+c
en la terminal.
SPA AEM Implementar actualizaciones de la en el
Los cambios realizados en el Header
actualmente solo son visibles a través de webpack-dev-server. SPA AEM Implemente el actualizado para ver los cambios que se han producido.
-
Vaya a la raíz del proyecto (
aem-guides-wknd-spa
AEM ) e implemente el proyecto para que se pueda usar de manera más eficaz para el uso de Maven:code language-shell $ cd .. $ mvn clean install -PautoInstallSinglePackage
-
Vaya a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Debería ver el informe actualizado
Header
y estilos aplicados.SPA AEM Ahora que la actualización de la se encuentra en la fase de creación, la creación puede continuar.
Enhorabuena. congratulations
SPA AEM ¡Enhorabuena, ha actualizado la y ha explorado la integración con la opción de integración de! SPA AEM Ahora sabe cómo desarrollar la contra la API del modelo JSON de la aplicación de datos de la aplicación de datos de la aplicación de modo que utilice una webpack-dev-server.
Pasos siguientes next-steps
SPA AEM Asignación de componentes de a componentes de : Obtenga información sobre cómo asignar componentes de React a componentes de Adobe Experience Manager AEM AEM SPA () con el SDK de JS de Editor de. SPA AEM SPA AEM La asignación de componentes permite a los usuarios realizar actualizaciones dinámicas en los componentes de la de componentes del Editor de componentes, de forma similar a la creación tradicional de los componentes de la.
(Bonus) Servidor de desarrollo de Webpack: simulación de API de JSON mock-json
Otro enfoque para el desarrollo rápido es utilizar un archivo JSON estático para actuar como modelo JSON. AEM Al "burlarse" del JSON, eliminamos la dependencia de una instancia local de. También permite a un desarrollador front-end actualizar el modelo JSON para probar la funcionalidad y dirigir cambios en la API JSON que luego implementaría un desarrollador back-end.
La configuración inicial del JSON de prueba sí AEM requiere una instancia de local.
-
Vuelva al IDE y navegue hasta
ui.frontend/public
y añada una nueva carpeta denominadamock-content
. -
Cree un nuevo archivo con el nombre
mock.model.json
debajo deui.frontend/public/mock-content
. -
En el explorador, vaya a http://localhost:4502/content/wknd-spa-react/us/en.model.json.
AEM Este es el JSON exportado por el usuario que está impulsando 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
enui.frontend/public/index.html
. AEM Actualice la propiedad de metadatos para el modelo de página de la página de datos para que apunte a una variable%REACT_APP_PAGE_MODEL_PATH%
:code language-html <!-- AEM page model --> <meta property="cq:pagemodel_root_url" content="%REACT_APP_PAGE_MODEL_PATH%" />
Usar una variable para el valor de
cq:pagemodel_root_url
facilitará el cambio entre el proxy y el modelo json de prueba. -
Abra el archivo
ui.frontend/.env.development
y realice las siguientes actualizaciones para comentar el valor anterior deREACT_APP_PAGE_MODEL_PATH
yREACT_APP_API_HOST
:code language-diff + 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 el webpack-dev-server. Inicie el webpack-dev-server desde el terminal:
code language-shell $ cd ui.frontend $ npm start
Vaya a http://localhost:3000/content/wknd-spa-react/us/en/home.html SPA y debería ver el contenido con el mismo que se utiliza en la. proxy json.
-
Realice un pequeño cambio en la
mock.model.json
archivo creado anteriormente. Debería ver el contenido actualizado inmediatamente reflejado en la webpack-dev-server.
SPA La posibilidad de manipular el modelo JSON y ver los efectos en un modelo en directo puede ayudar a un desarrollador a comprender la API del modelo JSON. También permite que el desarrollo del front-end y del back-end se produzca en paralelo.
Ahora puede alternar dónde consumir el contenido JSON alternando las entradas en la 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