Zum Hauptinhalt springen

Verfügbarmachen und Einbetten mit Standard-iFrame

Der erste Schritt in diesem Prozess besteht darin, eine neue Jutro-App zu erstellen und diese dann als Micro Frontend anzupassen. Dann verwenden Sie dieses neue Micro Frontend in einer anderen Jutro-App. In unserem Beispiel erstellen wir mit Jutro CLI eine zweite Jutro-App, die dann das neu erstellte Micro Frontend nutzt.

micro-frontends-Paket installieren​

Entweder instanziieren Sie eine neue Jutro-App oder Sie ändern eine bestehende Jutro-basierte Anwendung so, dass sie das Micro Frontend ist, das Sie einbetten möchten.

Installieren Sie das @jutro/micro-frontends-Paket in Ihrer Jutro-basierten Anwendung, damit Sie Zugriff auf die Micro Frontend-Funktionen haben:

npm i --save @jutro/micro-frontends@<your-jutro-version>
Note: Die Version des Pakets muss mit Ihren anderen Jutro Design System-Paketen übereinstimmen, wie z. B. @jutro/components.
Note:

Die @jutro/auth Abhängigkeit ist nun optional für @jutro/router und @jutro/components Pakete. Allerdings erfordert @jutro/micro-frontends package jetzt, dass @jutro/auth zu Ihren App-Abhängigkeiten hinzugefügt werden, um verwendet werden zu können.

Schritt 1: Eine Jutro-App als Micro Frontend verfügbar machen​

Nachdem Sie das Paket installiert haben, führen Sie die micro-frontend folgenden Schritte aus, um die eigenständige App in ein Micro Frontend zu konvertieren, das Sie in eine Shell-App einbetten können. Trotz der Umstellung auf ein Micro Frontend funktioniert die App weiterhin im Standalone-Modus.

  1. Stellen Sie im Micro Frontend-Repository sicher, dass src/indexAsync.js- und src/startApp.js-Dateien vorhanden und frei von Git-Konflikten sind. Wenn die Dateien nicht vorhanden sind, erstellen Sie sie manuell. Fügen Sie Folgendes zu src/indexAsync.js hinzu:

    src/indexAsync.js
    import('./startApp').then(({ startApp }) => startApp());

  2. Ändern Sie in src/startApp.js die import der Funktion start in @jutro/micro-frontends.

    src/startApp.js
    // Replace the start function from @jutro/app
    import { start } from '@jutro/micro-frontends';
    import messages from './app/App.messages';
    /* ... */

    Sie müssen die Micro Frontend start-Funktion innerhalb der startApp-Funktion aufrufen:

    export const startApp = (mfeData) => {
      start(Jutro, {
        appName: messages.appName,
        appDescription: messages.appDescription,
        mfeData,
      });
    };

  3. Create a file at root level (next to package.json) and name it overrides.config.js. Configure the micro frontend exposure in that file:

    module.exports = {
      webpack: {
        moduleFederation: {
          exposes: 'jutro-app',
          },
        },
      };
    • exposes - Specifies list of entries which should be exposed as federated modules. Refer to the official webpack module federation docs for more info.

    • name: Name für den Micro Frontend-Bereich in Webpack. Dieser Name sollte unter den Micro Frontends in derselben Shell-App eindeutig sein.

    If you set exposes to the exact value jutro-app, it uses your entire app assuming the app is a standard Jutro app based on the template. This is the same as:
    exposes: {
      './startApp': './src/startApp',
        },
      filename: 'remoteEntry.[contenthash].js',
    You can provide your own config, if you are exposing to micro frontend in some other way. The string './startApp' cannot be changed to anything else. The MicroFrontend component in the shell app uses this name as a hardcoded value.
    {
              exposes: {
                './startApp': './src/paymentAppLauncher',
              },
              filename: 'secure.js',
            }

    • shared: Einstiegspunkt zum Überschreiben/Erweitern von gemeinsam genutzten Bibliotheken. Empfängt die Standardbibliothekskonfiguration und erwartet die Konfiguration der gemeinsam genutzten Bibliothek.

      Weitere Informationen finden Sie in der offiziellen Webpack-Dokumentation zu Module Federation.

    Warning: Eindeutige Benennung

    Wenn Sie mehrere Micro Frontends in die Shell-App importieren möchten, weisen Sie jedem Micro Frontend einen eindeutigen name-Wert in den Webpack-Konfigurationen zu. Dadurch wird verhindert, dass Webpack die Assets für zwei Micro Frontends zusammenführt.

  4. Starten Sie Ihre App:

    npm i
    PORT=3001 npm run start

Schritt 2: Ein Micro Frontend in eine Shell-App einbetten​

Um ein Micro Frontend mit dem Standard-HTML-iFrame einzubetten, verwenden Sie einfach den Tag <iframe>, der die URL des Micro Frontends hinzufügt, wie im folgenden Beispiel gezeigt, wobei <MICRO_FRONTEND_URL> für die URL des Micro Frontends steht: Befolgen Sie außerdem die Anweisungen zum Erstellen und Bereitstellen der Anwendung.

Note: Der Content-Security-Policy Header muss eine Direktive enthalten, die das Einbetten aus einer bestimmten übergeordneten Domäne ermöglicht. Anstelle eines festen Wertes sollte er die Domäne widerspiegeln, in die das Micro Frontend eingebettet werden soll (z. B. frame-ancestors https://*.url.myportal.com). Beim Hochstufen in die Vorproduktion und Produktion mit Jutro Web Apps wird durch Hinzufügen der Shell-App-Domäne zum "Allowed CORS origins" Abschnitt automatisch der erforderliche Content-Security-Policy Header generiert. Darüber hinaus können Sie den Header in den Antwort-Header-Überschreibungen manuell festlegen.
<html>
  <head>
    <title>Jutro SDK shell</title>
  </head>
  <body>
    <h1>SAMPLE PAGE TITLE</h1>
    <div
      id="micro-app-container"
      style="width: 100vw; height: 100vh">
      <iframe
        src="<MICRO_FRONTEND_URL>"
        style="width: 100%; height: 100%"></iframe>
    </div>
  </body>
</html>