Intégrer l’en-tête et le pied de page globaux AEM dans les applications React
L’intégration d’un en-tête et d’un pied de page globaux Adobe Experience Manager (AEM) dans une application React peut entraîner des problèmes de style et de fonctionnalité. La configuration par défaut d’AEM ne prend pas en charge les applications monopages (SPA) React prêtes à l’emploi, en particulier lors de l’utilisation de fragments d’expérience (XF). Pour corriger ce problème, extrayez les fragments HTML appropriés et configurez les règles du Dispatcher afin d’éviter les problèmes de chemin d’accès.
Description description
Environnement
- Produit : Adobe Experience Manager (AEM) as a Cloud Service - Sites
- Instance: Développement
Problème/Symptômes
- L’utilisation du composant d’intégration d’URL prend uniquement en charge les liens vidéo et ne permet pas d’incorporer des URL de page.
- Le fait de diffuser le contenu de l’en-tête et du pied de page au format JSON (par exemple,
model.json) entraîne des problèmes de fonctionnalité. Les classes natives AEM ne fonctionnent pas correctement et des fonctionnalités telles que rechercher et traduire ne sont pas fonctionnelles. - L’architecture d’AEM existante est couplée (composants/sightly), et ne prend pas en charge l’implémentation de SPA React pour les modèles et les composants.
Résolution resolution
Pour intégrer l’en-tête et le pied de page globaux d’AEM dans votre application React tout en préservant les styles et fonctionnalités natifs, procédez comme suit :
-
Extrayez l’HTML des fragments d’expérience (XF) à l’aide des sélecteurs
.head.nocloudconfig.htmlet.body.nocloudconfig.html. Ces sélecteurs suppriment les données de configuration du cloud, rendant ainsi HTML compatible avec les applications externes. -
Vérifiez votre
web server rewrite rules. Assurez-vous qu’ils n’ajoutent pas de chemins non valides avant les URL des fragments d’expérience. Par exemple, assurez-vous que des chemins tels que/content/<my_project>/content/experience-fragments/...sont correctement configurés pour éviter les erreurs 404. -
Si vous rencontrez des problèmes pour accéder aux fragments d’expérience :
- Consultez les journaux AEM pour connaître les erreurs ou les modifications liées aux chemins d’accès.
- Mettez à jour les règles du Dispatcher pour arrêter l’ajout de préfixes inutiles aux chemins d’accès des fragments d’expérience.
Lecture connexe
- Utilisation de fragments d’expérience dans les tutoriels AEM Sites
- Déploiements de SPA AEM Headless dans le tutoriel AEM Headless