Componente RemotePage remote-page-component
Quando si decide quale livello di integrazione si desidera avere tra l'SPA esterno e l'AEM, spesso è chiaro che è necessario essere in grado di visualizzare e modificare l'SPA all'interno dell'AEM. Il componente RemotePage è un componente pagina personalizzato appositamente per questo scopo.
Panoramica overview
Il componente RemotePage recupera tutte le risorse necessarie da asset-manifest.json generato dall'applicazione e le utilizza per il rendering dell'SPA in AEM.
- RemotePage consente di inserire gli script e i fogli di stile di un SPA nel corpo di un componente Pagina AEM.
- I componenti front-end virtuali consentono di contrassegnare le sezioni come modificabili nell’editor SPA dell’AEM.
- Insieme, un SPA ospitato su un dominio diverso può essere reso modificabile in AEM.
Per ulteriori dettagli sull'SPA esterno modificabile nell'AEM, vedere l'articolo Modifica di un SPA esterno nell'AEM.
Requisiti requirements
-
Abilitare CORS nello sviluppo
-
Configurare l’URL remoto nelle Proprietà pagina
-
Rendere l’SPA nell’AEM
-
L’applicazione web deve utilizzare un manifesto della risorsa 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
-
L'applicazione deve essere in grado di inizializzare in un
<div id="root"></div>sotto l'elemento body. Se è previsto un markup diverso per la creazione dell'istanza dell'app, è necessario regolarlo di conseguenza negli script HTL del componente proxy consling:resourceSuperType="spa-project-core/components/remotepage.
Limitazioni limitations
- Il componente RemotePage prevede che l'implementazione fornisca un manifesto delle risorse come quello trovato qui. Il componente RemotePage, tuttavia, è stato testato solo per il funzionamento con il framework React (e Next.js tramite il componente remote-page-next) e pertanto non supporta il caricamento remoto di applicazioni da altri framework, ad esempio Angular.
- I CSS interni definiti nel file HTML principale dell’applicazione e i CSS in linea sul nodo DOM principale non saranno disponibili durante il rendering remoto nell’AEM.
Dettagli tecnici technical-details
Come il resto del progetto SPA dell’AEM, il componente RemotePage è open source. Per informazioni tecniche complete sul componente RemotePage, consulta l'archivio GitHub.