Integrare l’SPA developer-workflow

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

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

Sotto dependencies dovresti vedere diversi relativi a react incluso react-scripts

ui.frontend è un'applicazione React basata su Crea app React o CRA in breve. La versione react-scripts indica quale versione di CRA viene utilizzata.

Ci sono anche diverse dipendenze con il 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 l'SDK JS per l'editor SPA dell'AEM e forniscono 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.

Nel file package.json sono definiti diversi scripts:

"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 resi disponibili dalla funzione Crea app React.

L'unica differenza consiste nell'aggiunta di && clientlib allo script build. Questa istruzione aggiuntiva è responsabile della copia dell'SPA compilato nel modulo ui.apps come libreria lato client durante una compilazione.

Per facilitare questa operazione, viene utilizzato il modulo npm aem-clientlib-generator.

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 la cartella ui.frontend in un modulo Maven. Il file pom.xml è stato aggiornato per utilizzare frontend-maven-plugin per test e build l'SPA durante una build Maven.

Inspect il file index.js in 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'inserimento di pageModel (contenuto JSON) nell'applicazione.

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

Nel modulo ui.frontend, sotto ui.frontend/src/components, creare una nuova cartella denominata Header.

Creare un file denominato Header.js sotto la cartella Header.

Popolare Header.js con quanto segue:

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

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

Effettuare i seguenti aggiornamenti a App.js per includere Header statico:

  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>

Aprire un nuovo terminale, passare alla cartella ui.frontend ed eseguire il 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

Passare alla cartella ui.apps. 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 dalla cartella ui.frontend/build.

Tornare al terminale e spostarsi nella cartella ui.apps. 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] ------------------------------------------------------------------------

Il pacchetto ui.apps verrà distribuito a un'istanza in esecuzione locale di AEM.

Apri una scheda del browser e passa a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Il contenuto del componente Header dovrebbe essere visualizzato nell'SPA.

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

Tornare all'IDE e aprire il file ui.frontend/package.json.

Cerca una riga simile alla seguente:

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

Crea app React fornisce un semplice meccanismo per inoltrare le richieste API. Tutte le richieste sconosciute vengono elaborate tramite proxy localhost:4502, l'avvio rapido dell'AEM locale.

Aprire una finestra del terminale e passare alla cartella ui.frontend. Eseguire 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.

Tornare all'IDE e creare un file denominato Header.css nella cartella src/components/Header.

Popolare Header.css con quanto segue:

.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 al riferimento Header.css:

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

Salva le modifiche.

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

Aprire il file Page.css in 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 in 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.

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

Passare alla radice del progetto (aem-guides-wknd-spa) e distribuire il progetto in AEM utilizzando Maven:

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Passa a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Dovresti vedere Header aggiornato e gli stili applicati.

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

Tornare all'IDE, passare a ui.frontend/public e aggiungere 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 del passaggio precedente nel file mock.model.json.

Aprire il file index.html in ui.frontend/public/index.html. Aggiornare 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%"
    />

L'utilizzo di una variabile per il valore di cq:pagemodel_root_url semplificherà l'alternanza tra proxy e modello json fittizio.

Aprire il file ui.frontend/.env.development e apportare 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 webpack-dev-server dal terminale:

$ cd ui.frontend
$ npm start

Passa a http://localhost:3000/content/wknd-spa-react/us/en/home.html per visualizzare l'SPA con lo stesso contenuto utilizzato nel json proxy.

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