Integrare l’SPA developer-workflow

Nell’IDE che preferisci, apri il Progetto AEM. Questa esercitazione utilizzerà IDE codice Visual Studio.

Espandere ed esaminare ui.frontend cartella. Apri il file ui.frontend/package.json

Sotto dependencies ne dovresti vedere diversi relativi a react tra cui react-scripts

Il ui.frontend è un’applicazione React basata su Crea app React o CRA in breve. Il react-scripts La versione indica la versione di CRA utilizzata.

Esistono anche diverse dipendenze con prefisso @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",

I moduli di cui sopra costituiscono SDK JS per l’editor SPA dell’AEM e fornire la funzionalità che consente di mappare i Componenti SPA ai Componenti AEM.

Sono inclusi anche Componenti WCM AEM - Implementazione React Core e Componenti WCM AEM - Editor SPA - Implementazione React Core. Si tratta di un set di componenti riutilizzabili dell’interfaccia utente mappati su componenti AEM predefiniti. Sono progettati per essere utilizzati così come sono e progettati per soddisfare le esigenze del progetto.

In package.json file sono presenti diversi scripts definito:

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

Si tratta di script di build standard creati disponibile tramite l’app Create React.

L'unica differenza è l'aggiunta di && clientlib al build script. Questa istruzione aggiuntiva è responsabile della copia dell'SPA compilato nel ui.apps come libreria lato client durante una generazione.

Il modulo npm aem-clientlib-generator viene utilizzato per facilitare questa operazione.

Inspect il file ui.frontend/clientlib.config.js. Questo file di configurazione viene utilizzato da aem-clientlib-generator per determinare come generare la libreria client.

Inspect il file ui.frontend/pom.xml. Questo file trasforma ui.frontend cartella in una Modulo Maven. Il pom.xml il file è stato aggiornato per utilizzare frontend-maven-plugin a test e build l’SPA durante una build Maven.

Inspect il file index.js a 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 è il punto di ingresso dell'SPA. ModelManager è fornito dall’SDK JS dell’editor SPA dell’AEM. È responsabile della chiamata e dell’iniezione della pageModel (il contenuto JSON) nell’applicazione.

Inspect il file import-components.js a ui.frontend/src/components/import-components.js. Questo file importa il predefinito Componenti core React e li rende disponibili per il progetto. Nel prossimo capitolo verrà esaminata la mappatura dei contenuti AEM sui componenti SPA.

In ui.frontend modulo, sotto ui.frontend/src/components crea una nuova cartella denominata Header.

Crea un file denominato Header.js sotto Header cartella.

Popolare Header.js con le seguenti caratteristiche:

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

Il precedente è un componente React standard che genererà una stringa di testo statica.

Apri il file ui.frontend/src/App.js. Questo è il punto di ingresso dell'applicazione.

Effettua i seguenti aggiornamenti a App.js per includere l'elemento statico 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>

Apri un nuovo terminale e accedi al ui.frontend ed eseguire il comando 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

Accedi a ui.apps cartella. Sotto ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-react dovresti vedere che i file SPA compilati sono stati copiati dalui.frontend/build cartella.

Torna al terminale e passa alla ui.apps cartella. Esegui il seguente 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] ------------------------------------------------------------------------

Verrà distribuito ui.apps in un'istanza locale in esecuzione dell'AEM.

Apri una scheda del browser e passa a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Ora dovresti vedere il contenuto della sezione Header componente visualizzato nell’SPA.

I passaggi precedenti vengono eseguiti automaticamente quando si attiva una build Maven dalla radice del progetto (ad esempio mvn clean install -PautoInstallSinglePackage). Ora dovresti comprendere le basi dell’integrazione tra l’SPA e le librerie lato client dell’AEM. Puoi comunque modificare e aggiungere Text componenti dell’AEM al di sotto del Header componente.

Torna all’IDE e apri il file ui.frontend/package.json.

Cerca una riga simile alla seguente:

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

Il Crea app React fornisce un semplice meccanismo per proxy le richieste API. Tutte le richieste sconosciute vengono elaborate tramite proxy localhost:4502, il modulo di avvio rapido per l’AEM locale.

Apri una finestra del terminale e passa a ui.frontend cartella. Esegui il 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.

Apri una nuova scheda del browser (se non è già aperta) e passa a http://localhost:3000/content/wknd-spa-react/us/en/home.html.

Dovresti visualizzare gli stessi contenuti dell’AEM, ma senza le funzionalità di authoring abilitate.

Torna all’IDE e crea un file denominato Header.css nel src/components/Header cartella.

Popolare il Header.css con le seguenti caratteristiche:

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

Riapri Header.js e aggiungi la seguente riga come riferimento Header.css:

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

Salva le modifiche.

Accedi a http://localhost:3000/content/wknd-spa-react/us/en/home.html per visualizzare le modifiche di stile riflesse automaticamente.

Apri il file Page.css a ui.frontend/src/components/Page. Apporta le seguenti modifiche per correggere la spaziatura:

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

Torna al browser all’indirizzo http://localhost:3000/content/wknd-spa-react/us/en/home.html. Dovresti vedere immediatamente le modifiche apportate all’app.

Puoi continuare a eseguire aggiornamenti dei contenuti in AEM e vederli riflessi in webpack-dev-server, dal momento che stiamo eseguendo il proxy del contenuto.

Arresta il server di sviluppo Webpack con ctrl+c nel terminale.

Passa alla directory principale del progetto (aem-guides-wknd-spa) e implementa il progetto in AEM utilizzando Maven:

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Accedi a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Dovresti visualizzare il Header e stili applicati.

Ora che l’SPA aggiornato è in AEM, la creazione può continuare.

Torna all’IDE e passa a ui.frontend/public e aggiungi una nuova cartella denominata mock-content.

Crea un nuovo file denominato mock.model.json sotto a ui.frontend/public/mock-content.

Nel browser passa a http://localhost:4502/content/wknd-spa-react/us/en.model.json.

Questo è il JSON esportato dall’AEM che sta guidando l’applicazione. Copia l’output JSON.

Incolla l’output JSON dal passaggio precedente nel file mock.model.json.

Apri il file index.html a ui.frontend/public/index.html. Aggiorna la proprietà dei metadati per il modello di pagina AEM per puntare a una variabile %REACT_APP_PAGE_MODEL_PATH%:

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

Utilizzo di una variabile per il valore della proprietà cq:pagemodel_root_url renderà più semplice passare dal modello proxy a quello json fittizio e viceversa.

Apri il file ui.frontend/.env.development e apporta i seguenti aggiornamenti per commentare il valore precedente per REACT_APP_PAGE_MODEL_PATH e 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

Se è in esecuzione, arrestare webpack-dev-server. Avvia il webpack-dev-server dal terminale:

$ cd ui.frontend
$ npm start

Accedi a http://localhost:3000/content/wknd-spa-react/us/en/home.html e dovresti vedere l’SPA con lo stesso contenuto utilizzato negli proxy json.

Effettua una piccola modifica al mock.model.json file creato in precedenza. Dovresti vedere il contenuto aggiornato immediatamente riflesso nella webpack-dev-server.