Integrare il SPA

Scopri come il codice sorgente per un’applicazione a pagina singola (SPA) scritta in React può essere integrato con un progetto Adobe Experience Manager (AEM). Scopri come utilizzare strumenti front-end moderni, come un server di sviluppo webpack, per sviluppare rapidamente il SPA rispetto all’API del modello JSON AEM.

Obiettivo

  1. Scopri come il progetto SPA è integrato con AEM con librerie lato client.
  2. Scopri come utilizzare un server di sviluppo webpack per lo sviluppo front-end dedicato.
  3. Esplorare l'utilizzo di un proxy e statici deriso file da sviluppare con l’API del modello JSON AEM.

Cosa verrà creato

In questo capitolo si apporteranno diverse piccole modifiche al SPA per capire come è integrato con AEM.
Questo capitolo aggiunge un semplice Header al SPA. Nel processo di costruzione di questo statico Header componente verranno utilizzati diversi approcci allo sviluppo SPA AEM.

Nuova intestazione in AEM

L’SPA viene estesa per aggiungere un Header component

Prerequisiti

Rivedere gli strumenti e le istruzioni necessari per la configurazione di un ambiente di sviluppo locale. Il presente capitolo costituisce la continuazione del Crea progetto capitolo, tuttavia per seguire tutto ciò che serve è un progetto AEM funzionante SPA abilitato.

Metodo di integrazione

Nell’ambito del progetto AEM sono stati creati due moduli: ui.apps e ui.frontend.

La ui.frontend un modulo webpack progetto che contiene tutto il codice sorgente SPA. La maggior parte dello sviluppo SPA e dei test verrà effettuata nel progetto webpack. Quando viene attivata una build di produzione, il SPA viene generato e compilato utilizzando il webpack. Gli artefatti compilati (CSS e Javascript) vengono copiati nel ui.apps che viene quindi distribuito al runtime AEM.

architettura di alto livello ui.frontend

Una descrizione di alto livello dell’integrazione SPA.

Ulteriori informazioni sulla build front-end possono essere qui.

Integrazione di Inspect SPA

Quindi, controlla il ui.frontend per comprendere il SPA generato automaticamente dal Archetipo AEM progetto.

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

    VSCode - AEM progetto di SPA WKND

  2. Espandi ed esamina le ui.frontend cartella. Aprire il file ui.frontend/package.json

  3. Sotto la dependencies dovresti vedere diversi react compreso react-scripts

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

  4. Ci sono 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 il AEM Editor JS SDK e fornisce le funzionalità necessarie per mappare SPA Componenti su Componenti AEM.

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

  5. In package.json file ce ne sono diversi scripts definito:

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

    Questi sono script di build standard creati disponibile tramite Crea app per reazione.

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

    Modulo npm aem-clientlib-generator è utilizzato per facilitare questa fase.

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

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

  8. 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 del SPA. ModelManager è fornito dall’SDK JS AEM Editor SPA. È responsabile della chiamata e dell'inserimento del pageModel (il contenuto JSON) nell’applicazione.

  9. Inspect il file import-components.js a ui.frontend/src/components/import-components.js. Questo file importa il file pronto all'uso Reazione dei componenti core e li rende disponibili al progetto. Nel capitolo successivo verrà esaminata la mappatura del contenuto AEM ai componenti SPA.

Aggiungere un componente SPA statico

Quindi, aggiungi un nuovo componente al SPA e distribuisci le modifiche a un'istanza AEM locale. Questo sarà un semplice cambiamento, solo per illustrare come viene aggiornato il SPA.

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

  2. Crea un file denominato Header.js sotto il Header cartella.

    Cartella e file di intestazione

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

    Sopra c'è un componente React standard che genera una stringa di testo statica.

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

  5. 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>
    
  6. Apri un nuovo terminale e naviga nel ui.frontend ed esegui la 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
    
  7. Passa a ui.apps cartella. Sotto ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-react dovresti vedere che i file compilati SPA sono stati copiati dalui.frontend/build cartella.

    Libreria client generata in ui.apps

  8. Torna al terminale e naviga nel 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 il ui.apps a un'istanza locale in esecuzione di AEM.

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

    Implementazione dell’intestazione iniziale

    I passaggi precedenti vengono eseguiti automaticamente quando si attiva una build Maven dalla directory principale del progetto (ovvero mvn clean install -PautoInstallSinglePackage). È ora necessario comprendere le nozioni di base dell’integrazione tra le librerie lato client SPA e AEM. È comunque possibile modificare e aggiungere Text componenti in AEM sotto l’elemento statico Header componente.

Webpack Dev Server - Proxy dell'API JSON

Come visto negli esercizi precedenti, l’esecuzione di una build e la sincronizzazione della libreria client con un’istanza locale di AEM richiede alcuni minuti. Ciò è accettabile per i test finali, ma non è ideale per la maggior parte dello sviluppo SPA.

A webpack-dev-server può essere utilizzato per sviluppare rapidamente il SPA. Il SPA è guidato da un modello JSON generato da AEM. In questo esercizio il contenuto JSON da un’istanza in esecuzione di AEM sarà proxy nel server di sviluppo.

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

    Cerca una riga come la seguente:

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

    La Creare un'app reattiva fornisce un meccanismo semplice per le richieste API proxy. Tutte le richieste sconosciute verranno proxy tramite localhost:4502, l'avvio rapido AEM locale.

  2. Apri una finestra terminale e passa alla 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.
    
  3. Apri una nuova scheda del browser (se non è già aperta) e passa a http://localhost:3000/content/wknd-spa-react/us/en/home.html.

    Server di sviluppo del webpack - json proxy

    Dovresti visualizzare lo stesso contenuto di AEM, ma senza che sia abilitata alcuna delle funzionalità di authoring.

    NOTA

    A causa dei requisiti di sicurezza di AEM, dovrai aver effettuato l’accesso all’istanza AEM locale (http://localhost:4502) nello stesso browser ma in una scheda diversa.

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

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

    IDE VSCode

  6. Riaprire Header.js e aggiungi la seguente riga al riferimento Header.css:

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

    Salva le modifiche.

  7. Passa a http://localhost:3000/content/wknd-spa-react/us/en/home.html per visualizzare automaticamente le modifiche allo stile applicate.

  8. 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;
    }
    
  9. Torna al browser in http://localhost:3000/content/wknd-spa-react/us/en/home.html. Dovresti vedere immediatamente le modifiche apportate all’app.

    Stile aggiunto all’intestazione

    Puoi continuare a eseguire aggiornamenti dei contenuti in AEM e visualizzarli riflessi in webpack-dev-server, dal momento che il contenuto viene proxy.

  10. Arrestare il server di sviluppo del webpack con ctrl+c nel terminale.

Distribuire aggiornamenti SPA a AEM

Le modifiche apportate al Header al momento sono visibili solo attraverso webpack-dev-server. Distribuisci il SPA aggiornato per AEM per visualizzare le modifiche.

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

    $ cd ..
    $ mvn clean install -PautoInstallSinglePackage
    
  2. Passa a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Dovresti visualizzare l'aggiornamento Header e gli stili applicati.

    Intestazione aggiornata in AEM

    Ora che il SPA aggiornato è in AEM, l’authoring può continuare.

Congratulazioni!

Congratulazioni, hai aggiornato il SPA ed esplorato l'integrazione con AEM! Sai come sviluppare il SPA rispetto all’API del modello AEM JSON utilizzando un webpack-dev-server.

Passaggi successivi

Mappatura di componenti SPA per AEM componenti - Scopri come mappare i componenti React ai componenti di Adobe Experience Manager (AEM) con l’SDK JS dell’editor di AEM SPA. La mappatura dei componenti consente agli utenti di apportare aggiornamenti dinamici ai componenti SPA all’interno dell’editor di SPA AEM, in modo simile all’authoring tradizionale AEM.

(Bonus) Webpack Dev Server - Mock JSON API

Un altro approccio per un rapido sviluppo è quello di utilizzare un file JSON statico per agire come modello JSON. "prendendo in giro" il JSON, rimuoviamo la dipendenza da un'istanza AEM locale. Consente inoltre a uno sviluppatore front-end di aggiornare il modello JSON per testare la funzionalità e apportare modifiche all’API JSON che verranno implementate in seguito da uno sviluppatore back-end.

La configurazione iniziale del modello JSON richiedere un'istanza AEM locale.

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

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

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

    Si tratta del JSON esportato da AEM che guida l’applicazione. Copia l’output JSON.

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

    File Json modello maschera

  5. Apri il file . index.html a ui.frontend/public/index.html. Aggiorna la proprietà metadati per il modello di pagina AEM in modo che punti 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 variabile cq:pagemodel_root_url renderà più facile passare dal modello proxy a quello json.

  6. 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
    
  7. Se è attualmente in esecuzione, interrompi la webpack-dev-server. Avvia la webpack-dev-server dal terminale:

    $ cd ui.frontend
    $ npm start
    

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

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

    aggiornamento json del modello fittizio

La possibilità di manipolare il modello JSON e visualizzare gli effetti su un SPA live può aiutare uno sviluppatore a comprendere l’API del modello JSON. Consente inoltre lo sviluppo front-end e back-end in parallelo.

Ora puoi alternare il punto in cui utilizzare il contenuto JSON attivando le voci nel env.development file:

# 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

In questa pagina