Bien que la base de code SPA soit gérée en dehors d’AEM, un projet d’AEM est nécessaire pour configurer la prise en charge des exigences en matière de configuration et de contenu. Ce chapitre décrit la création d’un projet AEM qui contient les configurations nécessaires :
Téléchargez la aem-guides-wknd-graphql
projet de Github.com. Il contiendra certains fichiers de base utilisés dans ce projet.
$ mkdir -p ~/Code
$ git clone https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd remote-spa-tutorial
Créez un projet AEM dans lequel les configurations et le contenu de base sont gérés. Ce projet sera généré dans le cloné aem-guides-wknd-graphql
du projet remote-spa-tutorial
dossier.
Utilisez toujours la dernière version de la variable Archétype 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
La dernière commande renomme simplement le dossier de projet AEM afin qu’il soit clair qu’il s’agit du projet AEM et qu’il ne faut pas confondre avec l’option À distance._
while frontendModule="react"
est spécifié, la variable ui.frontend
Le projet n’est pas utilisé pour le cas d’utilisation SPA distant . La SPA est développée et gérée en externe sur AEM et utilise uniquement l’API de contenu d’ . Le frontendModule="react"
L’indicateur est requis pour que le projet inclut la propriété spa-project
AEM les dépendances Java™ et configurez les SPA modèles de page distants.
L’archétype de projet AEM génère les éléments suivants qui servent à configurer AEM pour l’intégration à la page d’accueil.
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
Avec le projet d’AEM de base généré, quelques réglages assurent SPA compatibilité de l’éditeur avec les SPA distantes.
Comme le SPA est une SPA distante, supposons qu’il soit développé et géré en dehors du projet d’AEM. Pour éviter les conflits, supprimez la variable ui.frontend
à partir du déploiement. Si la variable ui.frontend
le projet n’est pas supprimé, deux SPA, le SPA par défaut fourni dans la variable ui.frontend
Le projet et la SPA distante sont chargés simultanément dans l’AEM Éditeur.
Ouvrez le projet AEM (~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app
) dans votre IDE
Ouvrez la racine pom.xml
Commenter la variable <module>ui.frontend</module
out du <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>
Le pom.xml
doit se présenter comme suit :
Ouvrez le ui.apps/pom.xml
Commenter <dependency>
on <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>
Le ui.apps/pom.xml
doit se présenter comme suit :
Si le projet AEM a été créé avant ces modifications, supprimez manuellement la variable ui.frontend
de la bibliothèque cliente générée à partir de ui.apps
project at ui.apps/src/main/content/jcr_root/apps/wknd-app/clientlibs/clientlib-react
.
Pour que AEM charge la SPA distante dans l’éditeur d’outils, les mappages entre les itinéraires de et les pages d’ utilisées pour l’ouverture et la création de contenu doivent être établis.
L’importance de cette configuration est explorée ultérieurement.
Le mappage peut être effectué avec Mappage Sling défini dans /etc/map
.
Dans l’IDE, ouvrez le ui.content
subproject
Accédez à src/main/content/jcr_root
.
Création d’un dossier etc
Dans etc
, créer un dossier map
Dans map
, créer un dossier http
Dans http
, créer un fichier .content.xml
avec le contenu :
<?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>
Dans http
, créer un dossier localhost_any
Dans localhost_any
, créer un fichier .content.xml
avec le contenu :
<?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>
Dans localhost_any
, créer un dossier wknd-app-routes-adventure
Dans wknd-app-routes-adventure
, créer un fichier .content.xml
avec le contenu :
<?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"/>
Ajoutez les noeuds de mappage à ui.content/src/main/content/META-INF/vault/filter.xml
à inclure dans le package 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 structure de dossiers et .context.xml
Les fichiers doivent se présenter comme suit :
Le filter.xml
doit se présenter comme suit :
Désormais, lorsque le projet AEM est déployé, ces configurations sont automatiquement incluses.
Les effets de mappage Sling AEM exécutés sur http
et localhost
, donc ne prenez en charge que le développement local. Lors d’un déploiement sur AEM as a Cloud Service, des mappages Sling similaires doivent être ajoutés à la cible. https
et le ou les domaines as a Cloud Service AEM appropriés. Pour plus d’informations, voir Documentation sur le mappage Sling.
Configurez ensuite AEM pour protéger le contenu afin que seul ce SPA puisse accéder au contenu . Configurer Partage des ressources cross-origin en AEM.
Dans votre IDE, ouvrez le ui.config
Sous-projet Maven
Naviguer src/main/content/jcr_root/apps/wknd-app/osgiconfig/config
Créez un fichier nommé com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json
Ajoutez le suivant au fichier :
{
"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"
]
}
Le com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json
doit se présenter comme suit :
Les éléments de configuration clés sont les suivants :
alloworigin
indique les hôtes autorisés à récupérer du contenu d’AEM.
localhost:3000
est ajouté à la prise en charge de la SPA s’exécutant localementhttps://external-hosted-app
agit comme un espace réservé à remplacer par le domaine sur lequel le SPA distant est hébergé.allowedpaths
spécifiez les chemins d’accès dans AEM couverts par cette configuration CORS. La valeur par défaut permet d’accéder à tout le contenu d’AEM, mais elle ne peut être définie que sur les chemins spécifiques auxquels le SPA peut accéder, par exemple : /content/wknd-app
.L’archétype de projet AEM génère un projet prêt à AEM’intégration avec un distant, mais nécessite un petit ajustement important de la structure de page d’ générée automatiquement. Le type de la page d’AEM générée automatiquement doit être remplacé par Page SPA distante, plutôt qu’un SPA page.
Dans votre IDE, ouvrez le ui.content
subproject
Ouvrir à src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml
Mettre à jour .content.xml
avec :
<?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>
Les modifications clés sont des mises à jour de la variable jcr:content
noeud :
cq:template
vers /conf/wknd-app/settings/wcm/templates/spa-remote-page
sling:resourceType
vers wknd-app/components/remotepage
Le src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml
doit se présenter comme suit :
Ces modifications permettent à cette page, qui agit comme la racine SPA d’AEM, de charger la ressource à distance dans l’éditeur de .
Si ce projet a été précédemment déployé sur AEM, veillez à supprimer la page AEM en tant que Sites > Application WKND > us > en > Page d’accueil de l’application WKND, en tant que ui.content
le projet est défini sur merge plutôt que update.
Cette page peut également être supprimée et recréée en tant que page de SPA distante dans AEM elle-même, mais cette page est créée automatiquement dans la variable ui.content
pour le projet, il est préférable de le mettre à jour dans la base de code.
Assurez-vous que le service AEM Author s’exécute sur le port 4502.
Dans la ligne de commande, accédez à la racine du projet Maven AEM
Utilisez Maven pour déployer le projet vers votre service d’auteur de SDK AEM local.
$ mvn clean install -PautoInstallSinglePackage
Une fois le projet AEM déployé, il y a une dernière étape pour préparer SPA Éditeur à charger notre SPA à distance. Dans AEM, marquez la page AEM qui correspond à la racine de l’SPA,/content/wknd-app/us/en/home
, généré par l’archétype de projet AEM.
Connexion à l’auteur AEM
Accédez à Sites > Application WKND > us > en
Sélectionnez la Page d’accueil de l’application WKND, puis appuyez sur Propriétés
Accédez au SPA tab
Remplissez la variable Configuration des SPA distantes
http://localhost:3000
Appuyez sur Enregistrer et fermer
N’oubliez pas que nous avons remplacé le type de cette page par celui d’une Page de SPA distante, ce qui nous permet de voir le SPA dans son onglet Propriétés de la page.
Cette configuration ne doit être définie que sur la page AEM qui correspond à la racine du SPA. Toutes les AEM pages situées sous cette page héritent de la valeur .
Vous avez maintenant préparé les configurations AEM et les avez déployées sur votre auteur AEM local ! Vous savez maintenant comment :
ui.frontend
Une fois AEM configuré, nous pouvons nous concentrer sur bootstrapping de la SPA distante avec la prise en charge des zones modifiables à l’aide d’AEM SPA Editor !