Integrera SPA developer-workflow

I den utvecklingsmiljö du väljer öppnar du AEM. I den här självstudien används Visual Studio-kod-IDE.

Expandera och inspektera mappen ui.frontend. Öppna filen ui.frontend/package.json

Under dependencies ska du se flera relaterade till react inklusive react-scripts

ui.frontend är ett React-program som bygger på Create React Appeller CRA kort. Versionen react-scripts anger vilken version av CRA som används.

Det finns också flera beroenden som har prefixats med @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",

Ovanstående moduler utgör AEM JS SDK SPA Editor och tillhandahåller funktioner som gör det möjligt att mappa SPA komponenter till AEM.

Innehåller också AEM WCM-komponenter - React Core-implementering och AEM WCM-komponenter - Spa editor - React Core-implementering. Detta är en uppsättning återanvändbara gränssnittskomponenter som mappas till AEM. Dessa är utformade för att användas i befintligt skick och med den utformning som passar ditt projekt.

I filen package.json finns flera scripts definierade:

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

Det här är standardbyggskript som gjorts tillgängliga av Create React App.

Den enda skillnaden är att && clientlib har lagts till i skriptet build. Den här extra instruktionen ansvarar för att kopiera den kompilerade SPA till modulen ui.apps som ett klientbibliotek under en bygge.

NPM-modulen aem-clientlib-generator används för att underlätta detta.

Inspect filen ui.frontend/clientlib.config.js. Den här konfigurationsfilen används av aem-clientlib-generator för att avgöra hur klientbiblioteket ska genereras.

Inspect filen ui.frontend/pom.xml. Den här filen omvandlar mappen ui.frontend till en Maven-modul. Filen pom.xml har uppdaterats för att använda plugin-programmet front-maven till test och build SPA under en Maven-konstruktion.

Inspect filen index.js på 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 är SPA ingångspunkt. ModelManager tillhandahålls av AEM JS SDK för SPA. Den ansvarar för att anropa och injicera pageModel (JSON-innehållet) i programmet.

Inspect filen import-components.js på ui.frontend/src/components/import-components.js. Den här filen importerar de färdiga React Core-komponenterna och gör dem tillgängliga för projektet. Vi undersöker mappningen av AEM innehåll till SPA komponenter i nästa kapitel.

Skapa en ny mapp med namnet Header i modulen ui.frontend under ui.frontend/src/components.

Skapa en fil med namnet Header.js under mappen Header.

Fyll i Header.js med följande:

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

Ovanför är en standardreaktionskomponent som ger en statisk textsträng.

Öppna filen ui.frontend/src/App.js. Detta är programmets startpunkt.

Gör följande uppdateringar av App.js för att inkludera den statiska 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>

Öppna en ny terminal och navigera till mappen ui.frontend och kör kommandot 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

Navigera till mappen ui.apps. Under ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-react bör du se att de kompilerade SPA har kopierats från mappen ui.frontend/build.

Återgå till terminalen och navigera till mappen ui.apps. Kör följande Maven-kommando:

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

Detta distribuerar paketet ui.apps till en lokal instans av AEM som körs.

Öppna en webbläsarflik och gå till http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Nu bör du se innehållet i komponenten Header som visas i SPA.

Ovanstående steg utförs automatiskt när en Maven-bygge aktiveras från projektets rot (dvs mvn clean install -PautoInstallSinglePackage). Nu bör du förstå grunderna i integrationen mellan SPA och AEM klientbibliotek. Observera att du fortfarande kan redigera och lägga till Text-komponenter i AEM under den statiska Header -komponenten.

Återgå till IDE och öppna filen ui.frontend/package.json.

Leta efter en rad som följande:

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

Skapa React App är en enkel mekanism för proxy-API-begäranden. Alla okända begäranden proxiceras via localhost:4502, den lokala AEM snabbstarten.

Öppna ett terminalfönster och navigera till mappen ui.frontend. Kör kommandot 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.

Öppna en ny flik i webbläsaren (om den inte redan är öppen) och gå till http://localhost:3000/content/wknd-spa-react/us/en/home.html.

Du bör se samma innehåll som i AEM, men utan att någon av redigeringsfunktionerna är aktiverade.

Återgå till IDE och skapa en fil med namnet Header.css i mappen src/components/Header.

Fyll i Header.css med följande:

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

Öppna Header.js igen och lägg till följande rad i referensen Header.css:

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

Spara ändringarna.

Navigera till http://localhost:3000/content/wknd-spa-react/us/en/home.html om du vill se formatändringarna automatiskt.

Öppna filen Page.css vid ui.frontend/src/components/Page. Gör följande ändringar för att korrigera utfyllnaden:

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

Gå tillbaka till webbläsaren på http://localhost:3000/content/wknd-spa-react/us/en/home.html. Du bör omedelbart se ändringarna av appen återspeglas.

Du kan fortsätta att göra innehållsuppdateringar i AEM och se hur de återspeglas i webpack-dev-server, eftersom vi proxyerar innehållet.

Stoppa webbpaketets dev-server med ctrl+c i terminalen.

Navigera till projektets rot (aem-guides-wknd-spa) och distribuera projektet till AEM med Maven:

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Gå till http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Du bör se de uppdaterade Header och de format som används.

Nu när den uppdaterade SPA är i AEM kan redigeringen fortsätta.

Återgå till IDE och navigera till ui.frontend/public och lägg till en ny mapp med namnet mock-content.

Skapa en ny fil med namnet mock.model.json under ui.frontend/public/mock-content.

Gå till http://localhost:4502/content/wknd-spa-react/us/en.model.json i webbläsaren.

Detta är den JSON som exporteras av AEM som driver programmet. Kopiera JSON-utdata.

Klistra in JSON-utdata från föregående steg i filen mock.model.json.

Öppna filen index.html vid ui.frontend/public/index.html. Uppdatera metadataegenskapen för den AEM sidmodellen så att den pekar på variabeln %REACT_APP_PAGE_MODEL_PATH%:

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

Om du använder en variabel för värdet för cq:pagemodel_root_url blir det enklare att växla mellan proxy- och mock-json-modellen.

Öppna filen ui.frontend/.env.development och gör följande uppdateringar för att kommentera det tidigare värdet för REACT_APP_PAGE_MODEL_PATH och 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

Om den körs för närvarande stoppar du webpack-dev-server. Starta webpack-dev-server från terminalen:

$ cd ui.frontend
$ npm start

Navigera till http://localhost:3000/content/wknd-spa-react/us/en/home.html så ser du SPA med samma innehåll som används i proxy json.

Gör en liten ändring i filen mock.model.json som skapades tidigare. Det uppdaterade innehållet visas omedelbart i webpack-dev-server.