Project maken spa-editor-project

Open een opdrachtregelterminal en voer de volgende Maven-opdracht in:

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=35 \
 -D appTitle="WKND SPA React" \
 -D appId="wknd-spa-react" \
 -D artifactId="aem-guides-wknd-spa.react" \
 -D groupId="com.adobe.aem.guides.wkndspa.react" \
 -D frontendModule="react" \
 -D aemVersion="cloud"

Let op de eigenschap frontendModule=react . Dit vertelt het Archetype van het Project van de AEM om het project met een starter Reageer codebasiste laarzen die met de AEM SPA Redacteur moet worden gebruikt. Eigenschappen zoals appTitle , appId , artifactId en groupId worden gebruikt om het project en het doel te identificeren.

Een volledige lijst van beschikbare eigenschappen voor het vormen van een project kan hierworden gevonden.

De volgende map en bestandsstructuur worden gegenereerd door het Maven archetype op uw lokale bestandssysteem:

|--- aem-guides-wknd-spa.react/
    |--- LICENSE
    |--- README.md
    |--- all/
    |--- archetype.properties
    |--- core/
    |--- dispatcher/
    |--- it.tests/
    |--- pom.xml
    |--- ui.apps/
    |--- ui.apps.structure/
    |--- ui.config/
    |--- ui.content/
    |--- ui.frontend/
    |--- ui.tests /
    |--- .gitignore

Elke map vertegenwoordigt een afzonderlijke module Maven. In deze zelfstudie werken we vooral met de module ui.frontend , de React-app. Meer details over individuele modules kunnen in de AEM documentatie van het Archetype van het Projectworden gevonden.

Verzeker een geval van AEM plaatselijk op haven 4502 loopt.

Navigeer vanaf de opdrachtregel naar de projectmap aem-guides-wknd-spa.react .

$ cd aem-guides-wknd-spa.react

Stel het volgende bevel in werking om het volledige project te bouwen en op te stellen aan AEM:

$ mvn clean install -PautoInstallSinglePackage

De build zal ongeveer een minuut in beslag nemen en zal eindigen met het volgende bericht:

...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for aem-guides-wknd-spa.react 1.0.0-SNAPSHOT:
[INFO]
[INFO] aem-guides-wknd-spa.react .......................... SUCCESS [  0.257 s]
[INFO] WKND SPA React - Core .............................. SUCCESS [ 12.553 s]
[INFO] WKND SPA React - UI Frontend ....................... SUCCESS [01:46 min]
[INFO] WKND SPA React - Repository Structure Package ...... SUCCESS [  1.082 s]
[INFO] WKND SPA React - UI apps ........................... SUCCESS [  8.237 s]
[INFO] WKND SPA React - UI content ........................ SUCCESS [  5.633 s]
[INFO] WKND SPA React - UI config ......................... SUCCESS [  0.234 s]
[INFO] WKND SPA React - All ............................... SUCCESS [  0.643 s]
[INFO] WKND SPA React - Integration Tests ................. SUCCESS [ 12.377 s]
[INFO] WKND SPA React - Dispatcher ........................ SUCCESS [  0.066 s]
[INFO] WKND SPA React - UI Tests .......................... SUCCESS [  0.074 s]
[INFO] WKND SPA React - Project Analyser .................. SUCCESS [ 31.287 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

Het profiel Geweven autoInstallSinglePackage compileert de individuele modules van het project en stelt één enkel pakket aan de AEM instantie op. Door gebrek wordt dit pakket opgesteld aan een AEM instantie die plaatselijk op haven 4502 en met de geloofsbrieven van admin:admin loopt.

Navigeer aan Manager van het Pakket op uw lokale AEM instantie: http://localhost:4502/crx/packmgr/index.jsp.

Er moeten meerdere pakketten zijn voorgefixeerd met aem-guides-wknd-spa.react .

AEM de Manager van het Pakket

Alle aangepaste code die nodig is voor het project, wordt in deze pakketten gebundeld en in de AEM-omgeving geïnstalleerd.

Navigeer aan de console van Plaatsen: http://localhost:4502/sites.html/content.

De WKND-SPA bevat een basissitestructuur met een land, taal en homepage. Deze hiërarchie is gebaseerd op de standaardwaarden van het archetype voor language_country en isSingleCountryWebsite . Deze waarden kunnen worden beschreven door de beschikbare eigenschappenbij te werken wanneer het produceren van een project.

Open de gebruikers > en > WKND SPA Reageer de pagina van het Huis door de pagina te selecteren en te klikken geef knoop in de menubar uit:

De component van A Tekst is reeds toegevoegd aan de pagina. U kunt deze component op dezelfde manier bewerken als elke andere component in AEM.

Voeg een extra component van de Tekst aan de pagina toe.

U ziet dat de ontwerpervaring vergelijkbaar is met die van een traditionele AEM Sites-pagina. Momenteel is een beperkt aantal componenten beschikbaar die kunnen worden gebruikt. Tijdens de zelfstudie wordt meer toegevoegd.

In de Redacteur van de Pagina, klik de knoop van de Informatie van de Pagina > Mening zoals Gepubliceerd:

Dit zal een nieuw lusje met de vraagparameter ?wcmmode=disabled openen die effectief de AEM redacteur uitzet: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Bekijk de bron van de pagina. U ziet dat de tekstinhoud Hello World of een van de andere inhoud niet is gevonden. In plaats daarvan ziet u HTML als volgt:

...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="spa-root"></div>
    <script type="text/javascript" src="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react.lc-xxxx-lc.min.js"></script>
</body>
...

clientlib-react.min.js is de SPA React die op de pagina wordt geladen en die verantwoordelijk is voor het renderen van de inhoud.

Nochtans, waar komt de inhoud uit?

Terugkeer aan het lusje: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Open de de ontwikkelaarshulpmiddelen van browser en inspecteer het netwerkverkeer van de pagina tijdens verfrissen zich. Bekijk de XHR verzoeken:

Er zou een verzoek aan http://localhost:4502/content/wknd-spa-react/us/en.model.jsonmoeten zijn. Dit bevat alle inhoud, geformatteerd in JSON, die de SPA zal drijven.

In een nieuw lusje open http://localhost:4502/content/wknd-spa-react/us/en.model.json

De aanvraag en.model.json vertegenwoordigt het inhoudsmodel waarop de toepassing wordt gebaseerd. Inspect de JSON-uitvoer en u moet het fragment kunnen vinden dat de Text -component(en) vertegenwoordigt.

...
":items": {
    "text": {
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
}
...

In het volgende hoofdstuk zullen we controleren hoe deze JSON-inhoud wordt toegewezen van AEM Componenten aan SPA Componenten om de basis te vormen van de AEM SPA Editor-ervaring.