Componente RemotePage

Quando si decide quale livello di integrazione si desidera avere tra il SPA esterno e il AEM, spesso è chiaro che è necessario 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'elemento asset-manifest.json generato dall'applicazione e lo utilizza per il rendering dell'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.

Per ulteriori informazioni sulle SPA modificabili esterne in AEM, consulta l’articolo Modifica di un SPA esterno 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 file asset-manifest.json nella directory principale del dominio che elenca in una proprietà entrypoints 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

    Punti di entrata

  • L’applicazione deve essere in grado di inizializzare in un <div id="root"></div> sotto l’elemento body. 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 informazioni tecniche complete sul componente RemotePage, vedere l'archivio GitHub.

In questa pagina

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