Crea progetto spa-editor-project

Apri un terminale della riga di comando e immetti il seguente comando Maven:

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"

Osserva la proprietà frontendModule=react. Questo comunica all'Archetipo progetto AEM di avviare il progetto con una base di codice iniziale React da utilizzare con l'Editor SPA dell'AEM. Proprietà come appTitle, appId, artifactId e groupId vengono utilizzate per identificare il progetto e lo scopo.

Un elenco completo delle proprietà disponibili per la configurazione di un progetto è disponibile qui.

La seguente struttura di file e cartelle è generata dall’archetipo Maven sul file system locale:

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

Ogni cartella rappresenta un singolo modulo Maven. In questo tutorial verrà utilizzato principalmente il modulo ui.frontend, che è l'app React. Ulteriori dettagli sui singoli moduli sono disponibili nella documentazione di Archetipo progetto AEM.

Verificare che un'istanza dell'AEM sia in esecuzione localmente sulla porta 4502.

Dalla riga di comando passare alla directory del progetto aem-guides-wknd-spa.react.

$ cd aem-guides-wknd-spa.react

Esegui il comando seguente per generare e distribuire l’intero progetto a AEM:

$ mvn clean install -PautoInstallSinglePackage

La build richiederà circa un minuto e dovrebbe terminare con il seguente messaggio:

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

Il profilo Maven autoInstallSinglePackage compila i singoli moduli del progetto e distribuisce un singolo pacchetto all'istanza AEM. Per impostazione predefinita, questo pacchetto viene distribuito a un'istanza AEM in esecuzione localmente sulla porta 4502 e con le credenziali di admin:admin.

Passa a Gestione pacchetti nell'istanza AEM locale: http://localhost:4502/crx/packmgr/index.jsp.

Dovrebbero essere presenti più pacchetti con prefisso aem-guides-wknd-spa.react.

Gestione pacchetti AEM

Tutto il codice personalizzato necessario per il progetto è incluso in questi pacchetti e installato nell’ambiente AEM.

Passare alla console Sites: http://localhost:4502/sites.html/content.

L’SPA del WKND include una struttura di base del sito con un paese, una lingua e una pagina Home. Questa gerarchia si basa sui valori predefiniti dell'archetipo per language_country e isSingleCountryWebsite. Questi valori possono essere sovrascritti aggiornando le proprietà disponibili durante la generazione di un progetto.

Apri la pagina us > en > Pagina iniziale WKND SPA React selezionando la pagina e facendo clic sul pulsante Modifica nella barra dei menu:

Un componente Testo è già stato aggiunto alla pagina. Puoi modificare questo componente come qualsiasi altro componente nell’AEM.

Aggiungi un componente aggiuntivo Testo alla pagina.

L’esperienza di authoring è simile a quella di una pagina AEM Sites tradizionale. Attualmente è disponibile un numero limitato di componenti da utilizzare. Nel corso dell’esercitazione verranno aggiunte ulteriori informazioni.

Nell'Editor pagine, fai clic sul pulsante Informazioni pagina > Visualizza come pubblicato:

Verrà aperta una nuova scheda con il parametro di query ?wcmmode=disabled che disattiva l'editor AEM: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Visualizzare l'origine della pagina e notare che il contenuto di testo Hello World o qualsiasi altro contenuto non è stato trovato. Dovresti invece visualizzare HTML come segue:

...
<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 è l'SPA React caricato sulla pagina e responsabile del rendering del contenuto.

Tuttavia, da dove proviene il contenuto?

Torna alla scheda: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Apri gli strumenti di sviluppo del browser e controlla il traffico di rete della pagina durante un aggiornamento. Visualizza le richieste XHR:

È necessaria una richiesta a http://localhost:4502/content/wknd-spa-react/us/en.model.json. Contiene tutti i contenuti, formattati in JSON, che determineranno l’SPA.

In una nuova scheda apri http://localhost:4502/content/wknd-spa-react/us/en.model.json

La richiesta en.model.json rappresenta il modello di contenuto che guiderà l'applicazione. Inspect ha aggiunto l'output JSON e dovresti essere in grado di trovare lo snippet che rappresenta i Componenti testo.

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

Nel prossimo capitolo verrà esaminato come questo contenuto JSON viene mappato dai Componenti AEM ai Componenti SPA per formare la base dell’esperienza dell’Editor SPA dell’AEM.