Skapa projekt spa-editor-project

Öppna en kommandoradsterminal och ange följande Maven-kommando:

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"

Observera egenskapen frontendModule=react. Detta anger att AEM Project Archetype ska starta projektet med startkoden React code base som ska användas med AEM SPA. Egenskaper som appTitle, appId, artifactId och groupId används för att identifiera projektet och syftet.

En fullständig lista över tillgängliga egenskaper för konfigurering av projektet finns här.

Följande mapp- och filstruktur genereras av Maven-typen i det lokala filsystemet:

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

Varje mapp representerar en enskild Maven-modul. I den här självstudiekursen arbetar vi primärt med modulen ui.frontend, som är React-appen. Mer information om enskilda moduler finns i AEM Project Archetype-dokumentationen.

Kontrollera att en instans av AEM körs lokalt på port 4502.

Gå till projektkatalogen aem-guides-wknd-spa.react från kommandoraden.

$ cd aem-guides-wknd-spa.react

Kör följande kommando för att skapa och distribuera hela projektet till AEM:

$ mvn clean install -PautoInstallSinglePackage

Byggnaden tar ca en minut och avslutas med följande meddelande:

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

Maven-profilen autoInstallSinglePackage kompilerar de enskilda modulerna i projektet och distribuerar ett paket till AEM. Som standard distribueras det här paketet till en AEM som körs lokalt på port 4502 och med autentiseringsuppgifterna admin:admin.

Navigera till Package Manager på din lokala AEM: http://localhost:4502/crx/packmgr/index.jsp.

Du bör se flera paket som har prefixet aem-guides-wknd-spa.react.

AEM Package Manager

All anpassad kod som krävs för projektet paketeras i dessa paket och installeras i AEM.

Gå till konsolen Platser: http://localhost:4502/sites.html/content.

WKND-SPA innehåller en grundläggande webbplatsstruktur med land, språk och hemsida. Den här hierarkin baseras på arkivtypens standardvärden för language_country och isSingleCountryWebsite. Dessa värden kan skrivas över genom att uppdatera de tillgängliga egenskaperna när du genererar ett projekt.

Öppna sidan us > en > WKND SPA React Home Page genom att markera sidan och klicka på knappen Redigera i menyraden:

En Text-komponent har redan lagts till på sidan. Du kan redigera den här komponenten på samma sätt som andra komponenter i AEM.

Lägg till ytterligare en Text-komponent på sidan.

Observera att redigeringsupplevelsen liknar den på en traditionell AEM Sites-sida. För närvarande finns ett begränsat antal komponenter att använda. Mer läggs till under kursen.

Klicka på knappen Sidinformation > Visa som publicerad i sidredigeraren:

Då öppnas en ny flik med frågeparametern ?wcmmode=disabled som inaktiverar AEM: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Visa sidans källa och observera att textinnehållet Hello World eller något annat innehåll inte hittas. Du ska i stället se HTML så här:

...
<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 är SPA som läses in på sidan och som ansvarar för återgivningen av innehållet.

Varifrån kommer innehållet?

Återgå till fliken: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Öppna utvecklarverktygen i webbläsaren och inspektera nätverkstrafiken på sidan under en uppdatering. Visa XHR-begäranden:

Det bör finnas en begäran till http://localhost:4502/content/wknd-spa-react/us/en.model.json. Detta innehåller allt innehåll, formaterat i JSON, som SPA.

Öppna http://localhost:4502/content/wknd-spa-react/us/en.model.json på en ny flik

Begäran en.model.json representerar innehållsmodellen som kör programmet. Inspect JSON-utdata och du bör kunna hitta kodavsnittet som representerar Text-komponenten.

...
":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"
    },
}
...

I nästa kapitel kommer vi att undersöka hur detta JSON-innehåll mappas från AEM komponenter till SPA komponenter för att utgöra grunden för den AEM SPA redigerarupplevelsen.