Mentre la base di codice dell’SPA è gestita al di fuori dell’AEM, è necessario un progetto AEM per configurare i requisiti di configurazione e contenuto di supporto. Questo capitolo illustra la creazione di un progetto AEM che contiene le configurazioni necessarie:
Scarica il file aem-guides-wknd-graphql
progetto da Github.com. Conterrà alcuni file di base utilizzati in questo progetto.
$ mkdir -p ~/Code
$ git clone https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd remote-spa-tutorial
Crea un progetto AEM in cui vengono gestite le configurazioni e i contenuti della linea di base. Questo progetto verrà generato all’interno del duplicato aem-guides-wknd-graphql
del progetto remote-spa-tutorial
cartella.
Utilizza sempre la versione più recente di Archetipo AEM.
$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial
$ mvn -B archetype:generate \
-D archetypeGroupId=com.adobe.aem \
-D archetypeArtifactId=aem-project-archetype \
-D archetypeVersion=39 \
-D aemVersion=cloud \
-D appTitle="WKND App" \
-D appId="wknd-app" \
-D groupId="com.adobe.aem.guides.wkndapp" \
-D frontendModule="react"
$ mv ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/wknd-app ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app
L’ultimo comando rinomina semplicemente la cartella del progetto AEM in modo che sia chiaro che si tratta del progetto AEM e non deve essere confuso con SPA remoto_
Mentre frontendModule="react"
è specificato, il ui.frontend
progetto non utilizzato per il caso di utilizzo dell’SPA remoto. L’SPA è sviluppato e gestito esternamente all’AEM e utilizza l’AEM solo come contenuto API. Il frontendModule="react"
Il flag è obbligatorio per il progetto e include spa-project
dipendenze Java™ dell’AEM e configurazione dei modelli di pagina per l’SPA remoto.
L’Archetipo progetto AEM genera i seguenti elementi che vengono utilizzati per configurare l’AEM per l’integrazione con l’SPA.
ui.apps/src/.../apps/wknd-app/components
ui.apps/src/.../apps/wknd-app/components/remotepage
ui.content/src/.../conf/wknd-app/settings/wcm/templates
ui.content/src/...
ui.content/src/.../content/wknd-app
ui.config/src/.../apps/wknd-app/osgiconfig
Quando viene generato il progetto AEM di base, alcune modifiche garantiscono la compatibilità dell'Editor SPA con l'SPA remoto.
Poiché l'SPA è un SPA remoto, supponiamo che sia sviluppato e gestito al di fuori del progetto AEM. Per evitare conflitti, rimuovere ui.frontend
del progetto dalla distribuzione. Se il ui.frontend
progetto non viene rimosso, due SPA, l'SPA predefinito fornito nel ui.frontend
e il Remote SPA, vengono caricati contemporaneamente nell’Editor SPA dell’AEM.
Apri il progetto AEM (~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app
) nell’IDE
Apri la directory principale pom.xml
Commenta il <module>ui.frontend</module
fuori dal <modules>
list
<modules>
<module>all</module>
<module>core</module>
<!-- <module>ui.frontend</module> -->
<module>ui.apps</module>
<module>ui.apps.structure</module>
<module>ui.config</module>
<module>ui.content</module>
<module>it.tests</module>
<module>dispatcher</module>
<module>ui.tests</module>
<module>analyse</module>
</modules>
Il pom.xml
il file dovrebbe avere un aspetto simile a:
Apri ui.apps/pom.xml
Commenta il <dependency>
il <artifactId>wknd-app.ui.frontend</artifactId>
<dependencies>
<!-- Remote SPA project will provide all frontend resources
<dependency>
<groupId>com.adobe.aem.guides.wkndapp</groupId>
<artifactId>wknd-app.ui.frontend</artifactId>
<version>${project.version}</version>
<type>zip</type>
</dependency>
-->
</dependencies>
Il ui.apps/pom.xml
il file dovrebbe avere un aspetto simile a:
Se il progetto AEM è stato creato prima di queste modifiche, eliminare manualmente il ui.frontend
Libreria client generata da ui.apps
progetto a ui.apps/src/main/content/jcr_root/apps/wknd-app/clientlibs/clientlib-react
.
Affinché l’AEM possa caricare l’SPA remoto nell’editor SPA, è necessario stabilire le mappature tra le route SPA e le pagine AEM utilizzate per aprire e creare i contenuti.
L’importanza di questa configurazione viene esaminata in seguito.
La mappatura può essere eseguita con Mappatura Sling definito in /etc/map
.
Nell’IDE, apri il file ui.content
sottoprogetto
Accedi a src/main/content/jcr_root
Crea una cartella . etc
In entrata etc
, crea una cartella map
In entrata map
, crea una cartella http
In entrata http
, crea un file .content.xml
con il contenuto:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="sling:Mapping">
<localhost_any/>
</jcr:root>
In entrata http
, crea una cartella localhost_any
In entrata localhost_any
, crea un file .content.xml
con il contenuto:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="sling:Mapping"
sling:match="localhost\\.\\d+">
<wknd-app-routes-adventure/>
</jcr:root>
In entrata localhost_any
, crea una cartella wknd-app-routes-adventure
In entrata wknd-app-routes-adventure
, crea un file .content.xml
con il contenuto:
<?xml version="1.0" encoding="UTF-8"?>
<!--
The 'wknd-app-routes-adventure' mapping, maps requests to the SPA's adventure route
to it's corresponding page in AEM at /content/wknd-app/us/en/home/adventure/xxx.
Note the adventure AEM pages are created directly in AEM.
-->
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="sling:Mapping"
sling:match="adventure:.*/([^/]+)/?$"
sling:internalRedirect="/content/wknd-app/us/en/home/adventure/$1"/>
Aggiungi i nodi di mappatura a ui.content/src/main/content/META-INF/vault/filter.xml
a quelli inclusi nel pacchetto AEM.
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
<filter root="/conf/wknd-app" mode="merge"/>
<filter root="/content/wknd-app" mode="merge"/>
<filter root="/content/dam/wknd-app/asset.jpg" mode="merge"/>
<filter root="/content/experience-fragments/wknd-app" mode="merge"/>
<!-- Add the Sling Mapping rules for the WKND App -->
<filter root="/etc/map" mode="merge"/>
</workspaceFilter>
La struttura delle cartelle e .context.xml
i file dovrebbero avere un aspetto simile a:
Il filter.xml
il file dovrebbe avere un aspetto simile a:
Ora, quando il progetto AEM viene implementato, queste configurazioni vengono incluse automaticamente.
Gli effetti di mappatura Sling AEM in esecuzione su http
e localhost
quindi sostenere solo lo sviluppo locale. Durante l’implementazione in AEM as a Cloud Service, è necessario aggiungere mappature Sling simili a quella di destinazione https
e i settori AEM as a Cloud Service appropriati. Per ulteriori informazioni, vedere Documentazione di Sling Mapping.
Quindi, configura l’AEM per proteggere il contenuto in modo che solo questo SPA possa accedere al contenuto dell’AEM. Configura Condivisione delle risorse tra le diverse origini nell’AEM.
Nell’IDE, apri il file ui.config
Sottoprogetto Maven
Naviga src/main/content/jcr_root/apps/wknd-app/osgiconfig/config
Crea un file denominato com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json
Aggiungi quanto segue al file:
{
"supportscredentials":true,
"exposedheaders":[
""
],
"supportedmethods":[
"GET",
"HEAD",
"POST",
"OPTIONS"
],
"alloworigin":[
"https://external-hosted-app", "localhost:3000"
],
"maxage:Integer":1800,
"alloworiginregexp":[
".*"
],
"allowedpaths":[
".*"
],
"supportedheaders":[
"Origin",
"Accept",
"X-Requested-With",
"Content-Type",
"Access-Control-Request-Method",
"Access-Control-Request-Headers",
"authorization"
]
}
Il com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json
il file dovrebbe avere un aspetto simile a:
Gli elementi chiave della configurazione sono:
alloworigin
specifica gli host autorizzati a recuperare il contenuto dall’AEM.
localhost:3000
viene aggiunto per supportare l’SPA in esecuzione localmentehttps://external-hosted-app
funge da segnaposto da sostituire con il dominio su cui è ospitato l’SPA remoto.allowedpaths
specifica quali percorsi in AEM sono coperti da questa configurazione CORS. L’impostazione predefinita consente l’accesso a tutto il contenuto dell’AEM, tuttavia questo può essere limitato ai percorsi specifici a cui l’SPA può accedere, ad esempio: /content/wknd-app
.L’Archetipo progetto AEM genera un progetto avviato per l’integrazione dell’AEM con un SPA remoto, ma richiede un piccolo ma importante adeguamento alla struttura della pagina AEM generata automaticamente. Il tipo della pagina AEM generata automaticamente deve essere modificato in Pagina SPA remoto, anziché un Pagina SPA.
Nell’IDE, apri il file ui.content
sottoprogetto
Apri a src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml
Aggiorna questo .content.xml
file con:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Page">
<jcr:content
cq:template="/conf/wknd-app/settings/wcm/templates/spa-remote-page"
jcr:primaryType="cq:PageContent"
jcr:title="WKND App Home Page"
sling:resourceType="wknd-app/components/remotepage">
<root
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/responsivegrid">
<responsivegrid
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/responsivegrid">
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="wknd-app/components/text"
text="<p>Hello World!</p>"
textIsRich="true">
<cq:responsive jcr:primaryType="nt:unstructured"/>
</text>
</responsivegrid>
</root>
</jcr:content>
</jcr:root>
Le modifiche principali sono aggiornamenti al jcr:content
nodo:
cq:template
a /conf/wknd-app/settings/wcm/templates/spa-remote-page
sling:resourceType
a wknd-app/components/remotepage
Il src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml
il file dovrebbe avere un aspetto simile a:
Queste modifiche consentono a questa pagina, che funge da radice SPA nell'AEM, di caricare l'SPA remoto nell'editor SPA.
Se questo progetto è stato distribuito in precedenza all’AEM, assicurati di eliminare la pagina AEM con il seguente comando: Sites > App WKND > us > it > Home page app WKND, come ui.content
il progetto è impostato su unione nodi, anziché aggiorna.
Questa pagina può anche essere rimossa e ricreata come pagina SPA remota nell’AEM stesso, tuttavia poiché questa pagina viene creata automaticamente nell’ ui.content
progetto è consigliabile aggiornarlo nella base di codice.
Verifica che il servizio AEM Author sia in esecuzione sulla porta 4502
Dalla riga di comando, accedi alla directory principale del progetto AEM Maven
Utilizza Maven per distribuire il progetto al servizio di authoring dell’SDK AEM locale
$ mvn clean install -PautoInstallSinglePackage
Con il progetto AEM implementato, c'è un ultimo passaggio per preparare l'Editor SPA per caricare il nostro SPA remoto. In AEM, contrassegna la pagina AEM che corrisponde alla radice SPA,/content/wknd-app/us/en/home
, generato dall’archetipo del progetto AEM.
Accedi ad AEM Author
Accedi a Sites > App WKND > us > it
Seleziona la Home page dell’app WKND, e tocca Proprietà
Accedi a SPA scheda
Compila il Configurazione remota SPA
http://localhost:3000
Tocca Salva e chiudi
Ricorda che abbiamo cambiato il tipo di questa pagina in quello di Pagina SPA remoto, che è ciò che ci consente di visualizzare SPA scheda in Proprietà pagina.
Questa configurazione deve essere impostata solo sulla pagina AEM che corrisponde alla radice dell’SPA. Tutte le pagine AEM sotto questa pagina ereditano il valore.
Hai preparato le configurazioni dell’AEM e le hai distribuite all’autore AEM locale. Ora sai come:
ui.frontend
Con l'AEM configurato, possiamo concentrarci su avvio automatico dell’SPA remoto con supporto per le aree modificabili tramite l’Editor SPA dell’AEM.