RemotePage-komponenten remote-page-component
När du bestämmer vilken nivå av integration du vill ha mellan din externa SPA och AEM är det ofta tydligt att du måste kunna visa och redigera SPA i AEM. RemotePage-komponenten är en anpassad sidkomponent för just detta ändamål.
- Den universella redigeraren för visuell redigering av headless-innehåll.
- Innehållsfragmentredigeraren för formulärbaserad redigering av rubrikfritt innehåll.
Ö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 Frontend Components 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 redigerbara externa SPA:er 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 enentrypoints property:-
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 elementetbody. 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 resursmanifest som den som finns här. Komponenten RemotePage har bara testats för att fungera med React Framework (och Next.js via nästa komponent på fjärrsidan) 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 HTML-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-projektet är RemotePage-komponenten en öppen källkod. Fullständig teknisk information om RemotePage-komponenten finns i GitHub-databasen.