De SPA integreren developer-workflow

Begrijp hoe de broncode voor een toepassing van de Enige Pagina (SPA) die in React wordt geschreven met een Project van Adobe Experience Manager (AEM) kan worden geïntegreerd. Leer om moderne front-end hulpmiddelen, zoals een webpack dev server, te gebruiken om de SPA tegen AEM JSON model API snel te ontwikkelen.

Doelstelling

  1. Begrijp hoe het SPA project met AEM met cliënt-zijbibliotheken geïntegreerd is.
  2. Leer hoe u een webpack-ontwikkelingsserver gebruikt voor speciale front-end ontwikkeling.
  3. Onderzoek het gebruik van a volmacht en statisch mock dossier voor het ontwikkelen tegen het modelAPI van AEM JSON.

Wat u gaat maken

In dit hoofdstuk brengt u enkele kleine wijzigingen aan in de SPA om te begrijpen hoe deze is geïntegreerd met AEM.
In dit hoofdstuk wordt een eenvoudige Header -component aan de SPA toegevoegd. In het proces om deze statische Header component uit te bouwen worden verscheidene benaderingen om SPA ontwikkeling te AEM gebruikt.

Nieuwe Kopbal in AEM

de SPA wordt uitgebreid om een statische Header component toe te voegen

Vereisten

Herzie het vereiste tooling en de instructies voor vestiging a lokale ontwikkelomgeving. Dit hoofdstuk is een voortzetting van creeer het 1} hoofdstuk van het Project {, nochtans om langs allen te volgen u een werkend SPA-toegelaten AEM project nodig hebt.

Integratiebenadering integration-approach

Er zijn twee modules gemaakt als onderdeel van het AEM project: ui.apps en ui.frontend .

De ui.frontend module is a webpackproject dat alle SPA broncode bevat. Het grootste deel van de SPA ontwikkeling en tests vindt plaats in het webpack-project. Wanneer een productiebouwstijl wordt teweeggebracht, wordt het SPA gebouwd en gecompileerd gebruikend webpack. De gecompileerde artefacten (CSS en Javascript) worden gekopieerd in de ui.apps module die dan aan AEM runtime wordt opgesteld.

ui.frontend high-level architectuur

A high-level afbeelding van de SPA integratie.

De extra informatie over het front-end bouwt kan hierworden gevonden.

Inspect de SPA integratie inspect-spa-integration

Daarna, inspecteer de ui.frontend module om de SPA te begrijpen die door AEM archetype van het Projectauto-geproduceerd is.

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

    VSCode - AEM WKND SPA Project

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

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

  4. Er zijn ook diverse afhankelijkheden die zijn voorafgegaan door @adobe :

    code language-json
    "@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.

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

    code language-json
    "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.

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

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

  8. Inspect het bestand index.js op ui.frontend/src/index.js :

    code language-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.

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

Een statische SPA toevoegen static-spa-component

Voeg vervolgens een nieuwe component aan de SPA toe en implementeer de wijzigingen in een lokale AEM. Dit is een eenvoudige wijziging, alleen om te laten zien hoe de SPA wordt bijgewerkt.

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

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

    omslag en dossier van de Kopbal

  3. Vul Header.js met het volgende:

    code language-js
    //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.

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

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

    code language-diff
      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. Open een nieuwe terminal, navigeer naar de map ui.frontend en voer de opdracht npm run build uit:

    code language-shell
    $ 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. 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.

    de bibliotheek van de Cliënt die in ui.apps wordt geproduceerd

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

    code language-shell
    $ 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.

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

    Aanvankelijke kopbalimplementatie

    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.

Webpack Dev Server - Proxy de JSON API proxy-json

Zoals u in de vorige oefeningen ziet, duurt het maken van een build en het synchroniseren van de clientbibliotheek naar een lokale AEM enkele minuten. Dit is acceptabel voor de uiteindelijke test, maar niet ideaal voor het grootste deel van de SPA ontwikkeling.

A webpack-dev-serverkan worden gebruikt om de SPA snel te ontwikkelen. De SPA wordt aangedreven door een JSON-model dat door AEM wordt gegenereerd. In deze oefening is de inhoud JSON van een lopende instantie van AEM proxied in de ontwikkelingsserver.

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

    Zoek een lijn als deze:

    code language-json
    "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.

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

    code language-shell
    $ 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. Open een nieuw browser lusje (als niet reeds geopend) en navigeer aan http://localhost:3000/content/wknd-spa-react/us/en/home.html.

    Webpack dev server - volmacht json

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

    note note
    NOTE
    Vanwege de beveiligingsvereisten voor AEM moet u zich in dezelfde browser maar op een ander tabblad aanmelden bij de lokale AEM (http://localhost:4502).
  4. Ga terug naar de IDE en maak een bestand met de naam Header.css in de map src/components/Header .

  5. Vul de Header.css met het volgende:

    code language-css
    .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;
    }
    

    winde VSCode

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

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

    Sla de wijzigingen op.

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

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

    code language-css
    .page {
      max-width: 1024px;
      margin: 0 auto;
      padding: 12px;
      padding-top: 50px;
    }
    
  9. Terugkeer aan browser in http://localhost:3000/content/wknd-spa-react/us/en/home.html. De wijzigingen in de app worden meteen weerspiegeld.

    Stijl die aan kopbal wordt toegevoegd

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

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

SPA updates voor AEM implementeren

De veranderingen die aan Header worden aangebracht zijn momenteel slechts zichtbaar door webpack-dev-server. Implementeer de bijgewerkte SPA om de wijzigingen te AEM.

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

    code language-shell
    $ cd ..
    $ mvn clean install -PautoInstallSinglePackage
    
  2. Navigeer aan http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. De bijgewerkte Header en toegepaste stijlen worden weergegeven.

    Bijgewerkte Kopbal in AEM

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

Gefeliciteerd! congratulations

Gefeliciteerd, u hebt de SPA bijgewerkt en de integratie met AEM onderzocht! U weet nu hoe te om de SPA tegen AEM JSON modelAPI te ontwikkelen gebruikend a webpack-dev-server.

Volgende stappen next-steps

SPA componenten van de Kaart aan AEM componenten- Leer hoe te om componenten van het Antwoord aan de componenten van Adobe Experience Manager (AEM) met de AEM Redacteur JS SDK in kaart te brengen. Met componenttoewijzing kunnen gebruikers dynamische updates uitvoeren naar SPA componenten in de AEM SPA Editor, net als bij traditionele AEM ontwerpen.

(Bonus) Webpack Dev Server - Mock JSON API mock-json

Een andere manier om snel te ontwikkelen is het gebruik van een statisch JSON-bestand als JSON-model. Door de JSON te 'rokken' verwijderen we de afhankelijkheid van een lokale AEM. Het staat ook een front-end ontwikkelaar toe om het model JSON bij te werken om functionaliteit te testen en veranderingen in JSON API te drijven die dan door een achterste-eindontwikkelaar zou worden uitgevoerd.

De aanvankelijke opstelling van het model JSON vereist een lokale AEM instantie.

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

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

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

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

    Van het ModelJSON- dossier van het Model van het Mock

  5. 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% :

    code language-html
        <!-- 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.

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

    code language-diff
    + 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. Als momenteel lopend, stop webpack-dev-server. Begin webpack-dev-server van de terminal:

    code language-shell
    $ 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.

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

    modelmodel json update

Als u het JSON-model kunt manipuleren en de effecten op een live SPA kunt bekijken, kan een ontwikkelaar de JSON-model-API beter begrijpen. Het maakt ook zowel front-end als back-end ontwikkeling parallel mogelijk.

U kunt nu schakelen tussen de locatie waar de JSON-inhoud moet worden gebruikt door de items in het env.development -bestand in en uit te schakelen:

# 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
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4