SPA Integración de la developer-workflow

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

AEM SPA

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",

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

AEM AEM También se incluyen Componentes de WCM - React Core implementation y Componentes de WCM - Editor de spa - React Core implementation. 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 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. SPA Esta instrucción adicional es responsable de copiar los datos compilados 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.

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

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

Inspect cambió el archivo index.js a las 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')
        );
    });
});

SPA index.js es el punto de entrada de la. AEM SPA ModelManager lo proporciona el SDK de JS del Editor de JS de la interfaz de usuario de. Es responsable de llamar a pageModel (el contenido JSON) y de inyectarlo en la aplicación.

Inspect cambió el archivo import-components.js a las ui.frontend/src/components/import-components.js. Este archivo importa los componentes principales de React predeterminados 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.

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

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

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

Abra una ficha del explorador y vaya a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. SPA Ahora debería ver el contenido del componente Header que se muestra en el cuadro de diálogo de elementos de la interfaz de usuario 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 AEM Observe que todavía puede editar y agregar Text componentes en el elemento de seguridad de la base de datos que se encuentra 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. AEM Todas las solicitudes desconocidas se procesan como proxy a través de localhost:4502, el inicio rápido de la aplicación local de la.

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.

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.

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ó

AEM Puede seguir haciendo actualizaciones de contenido en los segmentos de y ver cómo se reflejan en webpack-dev-server, ya que estamos procesando el contenido como proxy.

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

AEM Vaya a la raíz del proyecto (aem-guides-wknd-spa) e implemente el proyecto para que se ejecute 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.

AEM

SPA AEM Ahora que la actualización de la se encuentra en la fase de creación, 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.

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 en ui.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%:

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

SPA Vaya a http://localhost:3000/content/wknd-spa-react/us/en/home.html y debería ver el código 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.