Scopri come generare un progetto Maven di Adobe Experience Manager (AEM) come punto di partenza per un’applicazione React integrata con l’editor di SPA di AEM.
In questo capitolo, viene generato un nuovo progetto AEM, basato su Archetipo di progetto AEM. Il progetto AEM viene avviato con un punto di partenza molto semplice per il SPA React.
Cos'è un progetto Maven? - Apache Maven è uno strumento di gestione software per la creazione di progetti. Tutte le Adobe Experience Manager le implementazioni utilizzano i progetti Maven per generare, gestire e distribuire codice personalizzato in cima alle AEM.
Cos'è un archetipo Maven? - A Archetipo Maven è un modello o un pattern per la generazione di nuovi progetti. L’archetipo AEM progetto ci consente di generare un nuovo progetto con uno spazio dei nomi personalizzato e di includere una struttura di progetto che segue le best practice, accelerando notevolmente il nostro progetto.
Rivedere gli strumenti e le istruzioni necessari per la configurazione di un ambiente di sviluppo locale. Assicurati che una nuova istanza di Adobe Experience Manager sia stata avviata in autore è in esecuzione localmente.
Questa esercitazione utilizza la versione 35 dell'archetipo.
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"
Se il targeting AEM 6.5.5+ sostituisci aemVersion="cloud"
con aemVersion="6.5.5"
. Se il targeting è 6.4.8+, utilizza aemVersion="6.4.8"
.
Osserva che frontendModule=react
proprietà. Questo comunica a AEM Project Archetype di avviare il progetto con un avviatore Base di codice React da utilizzare con l’editor SPA AEM. Proprietà simili appTitle
, appId
, artifactId
e groupId
sono 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 viene 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
, che è l’app React. Ulteriori dettagli sui singoli moduli sono disponibili nella sezione Documentazione AEM Project Archetype.
Quindi, compila, genera e distribuisci il codice del progetto in un’istanza locale di AEM utilizzando Maven.
Assicurati che un'istanza di AEM sia in esecuzione localmente sulla porta 4502.
Dalla riga di comando passa alla aem-guides-wknd-spa.react
directory di progetto.
$ cd aem-guides-wknd-spa.react
Esegui il comando seguente per generare e distribuire l’intero progetto in AEM:
$ mvn clean install -PautoInstallSinglePackage
La build richiede circa un minuto e termina 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 sull'istanza AEM locale: http://localhost:4502/crx/packmgr/index.jsp.
Dovresti visualizzare più pacchetti con prefisso aem-guides-wknd-spa.react
.
Gestione pacchetti AEM
Tutto il codice personalizzato necessario per il progetto viene raggruppato in questi pacchetti e installato nell’ambiente AEM.
Quindi, apri il SPA iniziale generato dall’archetipo e aggiorna parte del contenuto.
Passa a Sites console: http://localhost:4502/sites.html/content.
Il SPA WKND include una struttura di base del sito con un paese, una lingua e una home page. Questa gerarchia è basata 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 noi > en > Home page React SPA WKND selezionando la pagina e facendo clic sul pulsante Modifica nella barra dei menu:
A Testo è già stato aggiunto alla pagina. Puoi modificare questo componente come qualsiasi altro componente in AEM.
Aggiungi un 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 viene aggiunto altro.
Successivamente, verifica che si tratti di un'applicazione a pagina singola con l'uso degli strumenti di sviluppo del browser.
In Editor pagina, fai clic su Informazioni pagina pulsante > Visualizza come pubblicato:
Verrà aperta una nuova scheda con il parametro di query ?wcmmode=disabled
che disattiva efficacemente 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 del testo Hello World o uno degli altri contenuti 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
è la SPA React caricata sulla pagina e responsabile del rendering del contenuto.
Tuttavia, da dove viene 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 ed esamina il traffico di rete della pagina durante un aggiornamento. Visualizza la XHR richieste:
Dovrebbe essere richiesta http://localhost:4502/content/wknd-spa-react/us/en.model.json. Contiene tutto il contenuto, formattato in JSON, che guiderà il SPA.
In una nuova scheda aperta http://localhost:4502/content/wknd-spa-react/us/en.model.json
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 il 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 capitolo successivo esamineremo come questo contenuto JSON viene mappato da componenti AEM a componenti SPA per formare la base dell’esperienza dell’editor SPA AEM.
Potrebbe essere utile installare un’estensione del browser per formattare automaticamente l’output JSON.
Congratulazioni, hai appena creato il tuo primo AEM SPA Editor Project!
Il SPA è piuttosto semplice. Nei capitoli successivi vengono aggiunte ulteriori funzionalità.
Integrare un SPA - Scopri come il codice sorgente SPA è integrato con il progetto AEM e comprendere gli strumenti disponibili per sviluppare rapidamente il SPA.