RemotePage-komponenten remote-page-component
När du bestämmer vilken nivå av integration du vill ha mellan dina externa SPA och AEM är det ofta tydligt att du måste kunna visa och redigera SPA inom AEM. RemotePage-komponenten är en anpassad sidkomponent för just detta ändamål.
Ökning overview
RemotePage-komponenten hämtar alla nödvändiga resurser från programmets genererade asset-manifest.json och använder den för att återge SPA i AEM.
- Med RemotePage kan du mata in skript och formatmallar för en SPA i brödtexten för en AEM Page-komponent.
- Med Virtual Front Components (Komponenter för virtuella sidslut) kan du markera avsnitt som redigerbara i AEM SPA Editor.
- Tillsammans kan en SPA på en annan domän göras redigerbar i AEM.
Mer information om redigerbar, extern SPA i AEM finns i artikeln Redigera en extern SPA i AEM.
Krav requirements
-
Aktivera CORS under utveckling
-
Konfigurera fjärr-URL i Sidegenskaper
-
Återge SPA i AEM
-
Webbprogrammet måste använda ett resurmanifest som något av följande och visa en asset-manifest.json-fil i domänroten som listar alla CSS- och JS-filer som ska läsas in i en entrypoints-egenskap:
- https://github.com/shellscape/webpack-manifest-plugin
- https://github.com/webdeveric/webpack-assets-manifest
- https://github.com/mugi-uno/parcel-plugin-bundle-manifest
-
Programmet måste kunna initieras i ett
<div id="root"></div>under body-elementet. Om en annan kod förväntas för att programmet ska kunna instansieras måste detta justeras i HTML-skripten för proxykomponenten som har ensling:resourceSuperType="spa-project-core/components/remotepage.
Begränsningar limitations
- RemotePage-komponenten förväntar sig att implementeringen tillhandahåller ett tillgångsmanifest som den som finns här. RemotePage-komponenten har bara testats för att fungera med React Framework (och Next.js via komponenten remote-page-next) och stöder därför inte fjärrinläsning av program från andra ramverk, till exempel Angular.
- Intern CSS som är definierad i programmets rotfil och infogad CSS på DOM-rotnoden är inte tillgänglig vid fjärråtergivning i AEM.
Teknisk information technical-details
Precis som resten av AEM SPA är RemotePage-komponenten öppen källkod. Fullständig teknisk information om RemotePage-komponenten finns i GitHub-databasen.