Présentation
Bienvenue dans ce tutoriel en plusieurs parties destiné aux développeurs et développeuses qui cherchent à améliorer une SPA distante existante basée sur React (ou Next.js) avec du contenu AEM modifiable en utilisant l’éditeur de SPA d’AEM.
Ce tutoriel s’appuie sur l’application GraphQL WKND, une application React qui consomme le contenu AEM par fragments de contenu via les API GraphQL d’AEM, mais qui ne fournit pas de créationcontextuelle du contenu de la SPA.
À propos du tutoriel
Ce tutoriel vise à illustrer comment une SPA distante, ou une SPA fonctionnant en dehors du contexte AEM, peut être mise à jour pour consommer et diffuser du contenu créé dans AEM.
La plupart des activités du tutoriel se concentrent sur le développement de JavaScript, toutefois, des aspects critiques concernant AEM sont couverts. Ces aspects comprennent la définition de l’endroit où le contenu est créé et stocké dans AEM et le mappage des itinéraires SPA aux pages AEM.
Le tutoriel est conçu pour fonctionner avec AEM as a Cloud Service et est composé de deux projets :
- Le projet AEM contient la configuration et le contenu qui doivent être déployés vers AEM.
- Le projet application WKND est la SPA à intégrer avec l’éditeur de SPA d’AEM.
Dernier code
- Le point de départ du code de ce tutoriel se trouve sur GitHub dans le dossier
remote-spa-tutorial.
Prérequis
Ce tutoriel nécessite les éléments suivants :
Ce tutoriel fonctionne avec les éléments suivants :
- Microsoft® Visual Studio Code comme IDE
- Un répertoire de travail de
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial - Exécution du SDK d’AEM en tant que service de création sur
http://localhost:4502 - Exécution du SDKd’ AEM avec le compte
adminlocal et le mot de passeadmin - L’exécution de la SPA sur
http://localhost:3000.
1. Configurer AEM pour l’éditeur de SPA
Des configurations AEM sont nécessaires pour intégrer le SPA avec l’éditeur de SPA d’AEM. Ces configurations sont gérées et déployées via un projet AEM. Dans ce chapitre, vous apprendrez quelles configurations sont nécessaires et comment les définir.
2. Amorcer la SPA
Pour que l’éditeur de SPA d’AEM puisse intégrer une SPA dans son contexte de création, quelques ajouts doivent être effectués sur la SPA.
3. Composants fixes modifiables
Tout d’abord, envisagez d’ajouter un « composant fixe » modifiable à la SPA. Ceci illustre comment un développeur ou une développeuse peut placer un composant modifiable spécifique dans la SPA. L’auteur ou l’autrice peut modifier le contenu du composant, il ou elle ne peut cependant ni le supprimer ni en modifier l’emplacement, la position ou la taille.
4. Composants de conteneur modifiables
Ensuite, étudiez l’ajout d'un « composant de conteneur » modifiable à la SPA. Ceci illustre la manière dont un développeur ou une développeuse peut placer un composant de type conteneur dans la SPA. Les composants de type conteneur permettent aux auteurs et autrices d’y placer le composant autorisé et d’ajuster la disposition des composants.
5. Itinéraires dynamiques et composants modifiables
Enfin, utilisez les concepts présentés dans les chapitres précédents pour créer des itinéraires dynamiques ; ces itinéraires affichent un contenu différent en fonction du paramètre de l’itinéraire. Ceci illustre la manière dont l’éditeur de SPA d’AEM peut être utilisé pour créer du contenu sur des itinéraires pilotés et dérivés par programmation.