Composant RemotePage

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.

Présentation

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.

  • La page distante vous permet d'injecter les scripts et feuilles de style d'un SPA dans le corps d'un composant AEM Page.
  • Les Composants Frontières virtuels permettent de marquer les sections comme modifiables dans AEM SPA Editor.
  • Ensemble, un SPA hébergé sur un autre domaine peut être rendu modifiable dans AEM.

Voir l'article Modification d'un SPA externe dans AEM pour plus d'informations sur les SPA externes modifiables dans l'.

Conditions préalables

  • 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 manifeste de fichier de bundler comme l’un des suivants et exposer un fichier asset-manifest.json à la racine du domaine qui liste dans une propriété entrypoints tous 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

    Points d’entrée

  • L’application doit être capable d’initialiser dans un <div id="root"></div> sous l’élément body. Si une autre annotation est attendue pour l’application à instancier, elle doit être ajustée en conséquence dans les scripts HTL du composant proxy qui possède une balise sling:resourceSuperType="spa-project-core/components/remotepage.

Restrictions

  • L’implémentation actuelle du composant RemotePage ne prend en charge que les applications React distantes.
  • 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

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.

Sur cette page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now