De SPA integreren developer-workflow

Open uw AEM-project in de 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 bovengenoemde modules maken omhoog de Redacteur JS SDK van AEM SPAen verstrekken de functionaliteit om het mogelijk te maken om de Componenten van het KUUROORD aan de Componenten van AEM in kaart te brengen.

Ook inbegrepen zijn de Componenten van AEM WCM - Reageer de implementatie van de Kernen componenten WCM van AEM - de redacteur van de SPA - Reageer de implementatie van de Kern. Dit is een set herbruikbare UI-componenten die worden toegewezen aan AEM-componenten die buiten de box vallen. 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 de oorzaak van het kopiëren van gecompileerde SPA in de ui.apps module als cliënt-zijbibliotheek tijdens een bouwstijl.

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

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

Controleer 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 het KUUROORD tijdens een Gemaakt bouwt.

Inspecteer 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 het KUUROORD. 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.

Inspecteer het bestand import-components.js op 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. Wij zullen de afbeelding van de inhoud van AEM aan de componenten van SPA in het volgende hoofdstuk inspecteren.

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 de gecompileerde dossiers van het KUUROORD van de ui.frontend/build omslag moeten zien 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. U zou nu de inhoud van de Header component moeten zien die in SPA wordt getoond.

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 het KUUROORD en de cliënt-zijbibliotheken van AEM moeten begrijpen. U kunt in AEM nog steeds Text -componenten bewerken en toevoegen 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.

Dezelfde inhoud moet worden weergegeven 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 aan AEM op gebruikend 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 het bijgewerkte KUUROORD in AEM is, kan het ontwerpen verdergaan.

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 door AEM wordt geëxporteerd en 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 het KUUROORD 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.