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 frontendModule=react proprietà. Questo comunica all’Archetipo progetto AEM di avviare il progetto con un avviatore Base di codice React da utilizzare con l’editor SPA dell’AEM. Proprietà come appTitle, appId, artifactId, e groupId vengono utilizzati per identificare il progetto e lo scopo.

Elenco completo delle proprietà disponibili per la configurazione di un progetto si trova 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 questa esercitazione lavoreremo principalmente con ui.frontend modulo, che è l’app React. Ulteriori dettagli sui singoli moduli sono disponibili nella sezione Documentazione di Archetipo progetto AEM.

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

Dalla riga di comando, accedi a aem-guides-wknd-spa.react directory del progetto.

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

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.

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

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

Accedi a Sites console: 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 il proprietà disponibili durante la generazione di un progetto.

Apri us > it > Home page di WKND SPA React selezionando la pagina e facendo clic sul pulsante Modifica nella barra dei menu:

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

Aggiungi un ulteriore 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.

In Editor pagina, fare clic su Informazioni pagina pulsante > Visualizza come pubblicato:

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

Visualizza l’origine della pagina e osserva che il contenuto del testo Hello World o qualsiasi altro contenuto non 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 di React che viene 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 XHR richieste:

Deve essere presente 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 l’output JSON e dovresti essere in grado di trovare lo snippet che rappresenta Testo componenti.

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