De SPA integreren developer-workflow

Open uw AEM Project in IDE van uw keuze. Dit leerprogramma zal winde van de Code van Visual Studiogebruiken.

Vouw de map ui.frontend uit en inspecteer deze. Het bestand openen ui.frontend/package.json

Onder dependencies ziet u verschillende koppelingen die verwant zijn aan react inclusief react-scripts

ui.frontend is een React toepassing die op wordt gebaseerd Create React Appof CRA voor kort. De versie react-scripts geeft aan welke versie van CRA wordt gebruikt.

Er zijn ook diverse afhankelijkheden die zijn voorafgegaan door @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",

De bovenstaande modules maken omhoog AEM de Redacteur JS SDK SPAen verstrekken de functionaliteit om het mogelijk te maken om SPA Componenten aan AEM Componenten in kaart te brengen.

Ook inbegrepen zijn AEM Componenten WCM - Reageer de implementatie van de Kernen AEM Componenten WCM - de redacteur van de SPA - Reageer de implementatie van de Kern. Dit is een reeks herbruikbare UI-componenten die uit de doos AEM componenten worden toegewezen. Deze zijn ontworpen om ongewijzigd te worden gebruikt en worden vormgegeven om aan de behoeften van uw project te voldoen.

In het package.json -bestand zijn er verschillende scripts gedefinieerd:

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

Dit zijn standaard bouwt manuscripten die beschikbaardoor Create React App worden gemaakt.

Het enige verschil is de toevoeging van && clientlib aan het build -script. Deze extra instructie is verantwoordelijk voor het kopiëren van de gecompileerde SPA naar de module ui.apps als een client-side bibliotheek tijdens een build.

De npm module aem-clientlib-generatorwordt gebruikt om dit te vergemakkelijken.

Inspect het bestand ui.frontend/clientlib.config.js . Dit configuratiedossier wordt gebruikt door aem-clientlib-generatorom te bepalen hoe te om de cliëntbibliotheek te produceren.

Inspect het bestand ui.frontend/pom.xml . Dit dossier zet de ui.frontend omslag in a Gemaakt moduleom. Het pom.xml dossier is bijgewerkt om te gebruiken front-maven-pluginaan test en bouwt de SPA tijdens een Gemaakt bouwt.

Inspect het bestand index.js op 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 is het ingangspunt van de SPA. ModelManager wordt geleverd door de AEM SPA Editor JS SDK. Het is verantwoordelijk voor het aanroepen en injecteren van pageModel (de JSON-inhoud) in de toepassing.

Inspect het bestand import-components.js om ui.frontend/src/components/import-components.js . Dit dossier voert uit de doos Reageert de Componenten van de Kern in en stelt hen beschikbaar aan het project. We zullen de toewijzing van AEM inhoud aan SPA onderdelen in het volgende hoofdstuk controleren.

Maak onder ui.frontend/src/components in de module ui.frontend een nieuwe map met de naam Header .

Maak een bestand met de naam Header.js onder de map Header .

Vul Header.js met het volgende:

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

Hierboven bevindt zich een standaardcomponent React die een statische tekstreeks uitvoert.

Open het bestand ui.frontend/src/App.js . Dit is het ingangspunt van de toepassing.

Voer de volgende updates uit in App.js om het statische object Header op te nemen:

  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>

Open een nieuwe terminal, navigeer naar de map ui.frontend en voer de opdracht npm run build uit:

$ 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

Navigeer naar de map ui.apps . Onder ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-react zou u moeten zien de gecompileerde SPA dossiers van de ui.frontend/build omslag zijn gekopieerd.

wordt geproduceerd

Ga terug naar de terminal en navigeer naar de map ui.apps . Voer het volgende Geweven bevel uit:

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

Hiermee wordt het ui.apps -pakket geïmplementeerd in een lokale actieve instantie van AEM.

Open een browser lusje en navigeer aan http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. De inhoud van de component Header die in de SPA wordt weergegeven, wordt nu weergegeven.

De bovenstaande stappen worden automatisch uitgevoerd wanneer u een Maven-build activeert vanuit de hoofdmap van het project (dat wil zeggen mvn clean install -PautoInstallSinglePackage ). U zou nu de grondbeginselen van de integratie tussen de SPA en AEM cliënt-zijbibliotheken moeten begrijpen. U kunt Text -componenten nog steeds bewerken en toevoegen AEM onder de statische Header -component.

Keer terug naar winde en open het dossier ui.frontend/package.json.

Zoek een lijn als deze:

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

creeer React Appeen gemakkelijk mechanisme aan volmacht API verzoeken. Alle onbekende aanvragen worden verlengd tot en met localhost:4502 , de lokale AEM quickstart.

Open een terminalvenster en navigeer naar de map ui.frontend . Voer de opdracht npm start uit:

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

Open een nieuw browser lusje (als niet reeds geopend) en navigeer aan http://localhost:3000/content/wknd-spa-react/us/en/home.html.

U moet dezelfde inhoud zien als in AEM, maar zonder dat een van de ontwerpmogelijkheden is ingeschakeld.

Ga terug naar de IDE en maak een bestand met de naam Header.css in de map src/components/Header .

Vul de Header.css met het volgende:

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

Open Header.js opnieuw en voeg de volgende regel toe waarnaar moet worden verwezen Header.css :

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

Sla de wijzigingen op.

Navigeer aan http://localhost:3000/content/wknd-spa-react/us/en/home.htmlom de stijlveranderingen automatisch weerspiegeld te zien.

Open het bestand Page.css om ui.frontend/src/components/Page . Breng de volgende wijzigingen aan om de opvulling te herstellen:

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

Terugkeer aan browser in http://localhost:3000/content/wknd-spa-react/us/en/home.html. De wijzigingen in de app worden meteen weerspiegeld.

wordt toegevoegd

U kunt inhoudsupdates in AEM blijven maken en hen zien die in worden weerspiegeld webpack-dev-server, aangezien wij de inhoud proxying.

Stop de webpack-ontwikkelserver met ctrl+c in de terminal.

Navigeer aan de wortel van het project (aem-guides-wknd-spa) en stel het project op om AEM te gebruiken Maven:

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Navigeer aan http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. De bijgewerkte Header en toegepaste stijlen worden weergegeven.

Nu de bijgewerkte SPA in AEM is, kan het ontwerpen worden voortgezet.

Ga terug naar de IDE en navigeer naar ui.frontend/public en voeg een nieuwe map toe met de naam mock-content .

Maak een nieuw bestand met de naam mock.model.json onder ui.frontend/public/mock-content .

In browser navigeer aan http://localhost:4502/content/wknd-spa-react/us/en.model.json.

Dit is de JSON die wordt geëxporteerd door AEM die de toepassing stuurt. Kopieer de JSON-uitvoer.

Plak de JSON-uitvoer uit de vorige stap in het bestand mock.model.json .

Open het bestand index.html om ui.frontend/public/index.html . Werk de eigenschap metadata voor het AEM paginamodel bij zodat deze naar een variabele verwijst %REACT_APP_PAGE_MODEL_PATH% :

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

Als u een variabele gebruikt voor de waarde van de cq:pagemodel_root_url , is het gemakkelijker om te schakelen tussen het proxymodel en het mock-jsmodel.

Open het bestand ui.frontend/.env.development en voer de volgende updates uit om een opmerking te maken over de vorige waarde voor REACT_APP_PAGE_MODEL_PATH en 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

Als momenteel lopend, stop webpack-dev-server. Begin webpack-dev-server van de terminal:

$ cd ui.frontend
$ npm start

Navigeer aan http://localhost:3000/content/wknd-spa-react/us/en/home.htmlen u zou de SPA met de zelfde inhoud moeten zien die in de volmacht json wordt gebruikt.

Breng een kleine wijziging aan in het mock.model.json -bestand dat u eerder hebt gemaakt. U zou de bijgewerkte inhoud onmiddellijk moeten zien die in wordt weerspiegeld webpack-dev-server.