Composant RemotePage remote-page-component
Lorsque vous décidez du niveau d’intégration vous souhaitez avoir entre votre SPA externe et votre instance AEM, il est souvent évident que vous devez être capable d’afficher et de modifier la SPA dans AEM. Le composant RemotePage est un composant de page personnalisé destiné uniquement à cette fin.
Vue d’ensemble overview
Le composant RemotePage récupère toutes les ressources nécessaires à partir du asset-manifest.json généré par l’application et l’utilise pour effectuer le rendu des SPA dans AEM.
- Le composant RemotePage vous permet d’injecter les scripts et feuilles de style d’un SPA dans le corps d’un composant Page AEM.
- Les composants virtuels en front-end permettent d’indiquer les sections qui sont modifiables dans l’éditeur d’application monopage d’AEM.
- Grâce à cela, un SPA hébergé sur un autre domaine peut être rendu modifiable dans AEM.
Consultez l’article Modification d’un SPA externe dans AEM pour plus d’informations sur les SPA externes modifiables dans AEM.
Conditions requises requirements
-
Activer CORS en développement
-
Configurer l’URL distante dans les propriétés de page
-
Effectuer le rendu de la SPA dans AEM
-
L’application web doit utiliser un des manifestes de ressource de bundle suivants et exposer un fichier
asset-manifest.jsonà la racine du domaine qui répertorie dans unentrypoints propertytous les fichiers CSS et JS à charger :- https://github.com/shellscape/webpack-manifest-plugin
- https://github.com/webdeveric/webpack-assets-manifest
- https://github.com/mugi-uno/parcel-plugin-bundle-manifest
-
L’application doit pouvoir être initialisée dans un
<div id="root"></div>sous l’élémentbody. Si une balise différente est attendue pour l’application, elle doit être ajustée en conséquence dans les scripts HTL du composant proxy avecsling:resourceSuperType="spa-project-core/components/remotepage.
Limites limitations
- Le composant RemotePage s’attend à ce que l’implémentation fournisse un manifeste de ressource comme celui-ci. Le composant RemotePage, en revanche, a été testé uniquement pour fonctionner avec le framework React (et Next.js via le composant remote-page-next) et il ne prend donc pas en charge le chargement à distance d’applications à partir d’autres frameworks tels qu’Angular.
- La page CSS interne définie dans le fichier HTML racine de l’application ainsi que la page CSS intégrée sur le nœud DOM racine ne seront pas disponibles lors du rendu à distance dans AEM.
Détails techniques technical-details
Comme le reste du projet de SPA AEM, le composant RemotePage est disponible en open source. Pour obtenir les détails techniques complets concernant le composant RemotePage, consultez le référentiel GitHub.