Componente RemotePage

Quando si decide quale livello di integrazione desideri avere tra il tuo SPA esterno e il AEM, spesso è chiaro che devi essere in grado di visualizzare e modificare il SPA in AEM. Il componente RemotePage è un componente pagina personalizzato solo a questo scopo.

Panoramica

Il componente RemotePage recupera tutte le risorse necessarie dall'applicazione generata asset-manifest.json e lo utilizza per il rendering del SPA all'interno di AEM.

  • RemotePage consente di inserire gli script e i fogli di stile di un SPA nel corpo di un componente Pagina AEM.
  • I componenti Frontend virtuali consentono di contrassegnare le sezioni come modificabili in AEM editor di SPA.
  • Insieme, un SPA ospitato su un dominio diverso può essere reso modificabile in AEM.

Vedi l'articolo Modifica di un SPA esterno in AEM per ulteriori dettagli sulle SPA modificabili esterne in AEM.

Requisiti

  • Abilitare CORS nello sviluppo
  • Configurare l’URL remoto nelle Proprietà pagina
  • Esegui il rendering del SPA in AEM
  • L'applicazione web deve utilizzare un manifesto di risorse del bundler come uno dei seguenti ed esporre un asset-manifest.json file nella directory principale del dominio in cui è presente l'elenco in un entrypoints property tutti i file CSS e JS da caricare:

    • https://github.com/shellscape/webpack-manifest-plugin

    • https://github.com/webdeveric/webpack-assets-manifest

    • https://github.com/mugi-uno/parcel-plugin-bundle-manifest

      esempio di proprietà entrypoints

  • L’applicazione deve essere in grado di inizializzare in un <div id="root"></div> sotto il body elemento. Se è previsto un markup diverso per l’istanza dell’app, questo deve essere regolato di conseguenza negli script HTL del componente proxy che ha un sling:resourceSuperType="spa-project-core/components/remotepage.

Limitazioni

  • L'implementazione corrente del componente RemotePage supporta solo le applicazioni React remote.
  • I CSS interni definiti nel file HTML principale dell’applicazione e i CSS in linea sul nodo DOM principale non saranno disponibili quando si esegue il rendering remoto in AEM.

Dettagli tecnici

Come il resto del progetto SPA AEM, il componente RemotePage è open source. Per tutti i dettagli tecnici del componente RemotePage, consulta l’archivio GitHub.

In questa pagina