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 detta 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.

Se artikeln Redigera en extern SPA i AEM om du vill ha mer information om redigerbara, externa 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

    Entrypoints

  • Programmet måste kunna initieras i en <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 enlighet med HTML-skripten för den proxykomponent som har en sling:resourceSuperType="spa-project-core/components/remotepage.

Begränsningar limitations

  • RemotePage-komponenten förväntar sig att implementeringen tillhandahåller ett tillgångsmanifest som den hittades 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. Mer information om RemotePage-komponenten finns i se GitHub-databasen.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2