Zum Hauptinhalt springen

Erste Schritte mit Micro Frontends

Ein Micro Frontend ist eine kleine, eigenständige Webanwendung, die eine fokussierte Funktionalität oder einen einzelnen Benutzerablauf bereitstellt (z. B. die Suche eines Angebots oder die Einreichung eines Schadenfalls). Micro Frontends sind so konzipiert, dass sie in einer Shell-Anwendung verfügbar gemacht und eingebettet werden können, sodass ihre Benutzeroberfläche und ihr Verhalten in größeren Nutzungsumgebungen wiederverwendet werden können.

Mit Micro Frontends können Teams einzelne Teile einer Web-Nutzungsumgebung unabhängig voneinander entwickeln, bereitstellen und pflegen. Zu den üblichen Verwendungszwecken gehören die Unterstützung unabhängiger Entwicklungs-Workflows, die Bereitstellung eines Anwendungsstarters für kleine Apps und die Aktivierung verschachtelter Micro Frontends, bei denen eine eingebettete Anwendung als Shell für andere fungiert.

Ziel​

Dieses Tutorial führt Sie durch die Einrichtung und Verwendung der MicroFrontend-Komponente im Freigabemodus. Weitere Informationen zur MicroFrontend-Komponente im Freigabemodus finden Sie in der Dokumentation zu diesem Thema.

In diesem Tutorial lernen Sie Folgendes:

  1. Eine Jutro-Anwendung als Micro Frontend verfügbar machen.
  2. Eine Shell-Anwendung für die Nutzung von Micro Frontends konfigurieren.
  3. Ein Micro Frontend unter Verwendung der MicroFrontend-Komponente in eine Shell-Anwendung einbetten.

Voraussetzungen​

Stellen Sie vor der Installation und Verwendung der MicroFrontend-Komponente sicher, dass Sie die folgenden Voraussetzungen erfüllen:

Sie müssen:

  1. die allgemeinen Informationen zu Micro Frontends und die Micro Frontend Übersichtsseite gelesen haben, um mehr über die in Jutro Digital Platform verfügbaren Technologien und Anwendungsfälle für Micro Frontends zu erfahren.
  2. eine App haben, die Sie in ein Micro Frontend umwandeln möchten. Alternativ können Sie die mitgelieferte Beispiel-App herunterladen.
  3. eine Shell-App haben, in die Sie das Micro Frontend einbetten möchten. Alternativ können Sie auch die Starter Standalone-Vorlage herunterladen und verwenden.

Schritte des Tutorials​

1. Laden Sie die Jutro Sandbox-Anwendung herunter (optional)​

Warning: Die Starter-App ist nur zum Lernen! Sie können mit dieser Starter-App keine produktionsreife Anwendung erstellen. Sie können die grundlegenden Funktionen von Jutro ausprobieren und die Workflows üben, aber die Starter-App ist in ihrer Funktionalität eingeschränkt und eine starre Version von Jutro.

Wenn Sie keine App haben, die Sie in ein Micro Frontend konvertieren möchten, können Sie die bereitgestellte Beispiel-App verwenden. Bei dieser Beispiel-App handelt es sich um eine Sandbox-Anwendung, die in diesem Tutorial als Micro Frontend verwendet werden kann.

Jutro Sandbox-Anwendung herunterladen

2. Laden Sie die Starter Standalone-Vorlage herunter (optional)​

Wenn Sie keine Shell-App haben, in die Sie Ihr Micro Frontend einbetten können, können Sie die Starter Standalone-Vorlage verwenden. Diese Vorlage ist eine einfache Jutro-App, die in diesem Tutorial als Shell-Anwendung verwendet werden kann.

  1. Melden Sie sich bei Guidewire Cloud an und navigieren Sie dann zu Jutro Web Apps.
  2. Wählen Sie Neue Jutro-App erstellen aus.
  3. Geben Sie im Feld App-Name einen Namen für Ihre App ein.
  4. Wählen Sie als App-Typ die Option Standalone-Anwendung.
  5. Wählen Sie im Dropdown-Menü „App-Vorlage“ die Option Starter Standalone aus.
  6. Wählen Sie das Sternensystem aus, in dem Sie Ihre App erstellen möchten.
  7. Wählen Sie den Zielplaneten von InsuranceSuite aus.
  8. Wählen Sie Anwendung erstellen aus.
  9. Wählen Sie nach dem Erstellen der App oben auf der Seite Quellcode aus, und laden Sie den Quellcode der App auf Ihren lokalen Computer herunter.

3. Richten Sie das erforderliche Repository in Ihrer npm-Konfiguration ein​

Es gibt drei regionale Guidewire Binary Repository-Instanzen, in denen die für Jutro-Anwendungen erforderlichen npm-Pakete gespeichert werden:

Wenn Sie eine vorhandene Jutro-App verwenden, verweist diese standardmäßig bereits auf die Instanz, die der Guidewire Home-Umgebung entspricht, in der sie erstellt wurde. Wenn Sie jedoch die Beispielapp verwenden, müssen Sie das Repository in Ihrer npm-Konfiguration festlegen, damit die erforderlichen Pakete installiert werden können.

Bei den Konfigurationsschritten für die lokale Entwicklung müssen Sie ein Zugriffstoken für die ausgewählte Instanz abrufen. In diesen Schritten wird die AMER-Instanz für das Beispiel verwendet:

  1. Melden Sie sich bei https://amer.binrepo.guidewire.net/ mit Ihren SAML Single Sign-on (SSO)-Anmeldedaten an.

  2. Öffnen Sie Ihr Terminal in Ihrem Home-Verzeichnis und führen Sie den folgenden Befehl aus, wobei Sie den Wert für {tenantId} durch Ihre Tenant-ID ersetzen:

npm config set @jutro:registry=https://amer.binrepo.guidewire.net/artifactory/api/npm/jutro-{tenantId}-all-npm-virtual
npm login --scope=@jutro --registry=https://amer.binrepo.guidewire.net/artifactory/api/npm/jutro-{tenantId}-all-npm-virtual
Tip: Weitere Informationen zum Konfigurieren der lokalen Entwicklungsumgebung finden Sie unter Einrichten der lokalen Entwicklungsumgebung.

4. Installieren Sie das Micro Frontend Paket in beiden Apps​

Installieren Sie das @jutro/micro-frontends-Paket sowohl in Ihrer Shell-App als auch in der App, die in ein Micro Frontend umgewandelt werden soll. Dadurch erhalten Sie Zugriff auf die Micro Frontend-Funktionen.

Important: Die Shell-App benötigt dieses Paket nur, wenn die MicroFrontend-Komponente verwendet wird. In einigen Produktionsumgebungen müssen Sie möglicherweise eine andere Einbettungsmethode verwenden und benötigen dieses Paket nicht in der Shell-App. In diesem Tutorial müssen Sie es jedoch in beiden Apps installieren.

Sie können das Paket installieren, indem Sie den folgenden Befehl ausführen:

npm i --save @jutro/micro-frontends@<your-jutro-version>
Note: Anforderungen an die Version

Die Version des Micro Frontend-Pakets muss mit Ihren anderen Jutro Digital Platform-Paketen übereinstimmen, z. B. @jutro/components.

5. Die App als Micro Frontend verfügbar machen​

Nachdem Sie das @jutro/micro-frontends-Paket installiert haben, folgen Sie diesen Schritten, um die Standalone-App oder Beispielapp in ein Micro Frontend umzuwandeln, das Sie dann in Ihre Shell-App einbetten können:

  1. Stellen Sie in der App sicher, dass die Dateien src/indexAsync.ts und src/startApp.ts vorhanden sind. Erstellen Sie sie, wenn dies nicht der Fall ist.
  2. Fügen Sie Folgendes in src/indexAsync.ts hinzu:
src/indexAsync.ts
import('./startApp').then(({ startApp }) => startApp());
  1. Ändern Sie in src/startApp.ts den import der Funktion start in @jutro/micro-frontends:
src/startApp.ts
// Replace the start function from '@jutro/app' with the one from '@jutro/micro-frontends'
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: string) => {
  start(Jutro, {
    appName: messages.appName,
    appDescription: messages.appDescription,
    mfeData,
  });
};
  1. Legen Sie in der Datei .env eine eindeutige JUTRO_APP_ID-Variable fest. Diese wird als Scope-Name verwendet:
JUTRO_APP_ID=myjutroapp
Note: Wenn Sie die Variable JUTRO_APP_ID festlegen, wird den Klassen für benutzerdefinierte Komponenten diese ID vorangestellt. Diese ID ist nur für eine MicroFrontend-Komponente im Freigabemodus gültig. Wenn Sie andere Integrationsmethoden verwenden, wird diese Variable ignoriert.
  1. Erstellen Sie eine Datei auf der Stammebene – auf der gleichen Ebene wie Ihre package.json. Geben Sie ihr den Namen overrides.config.js, und konfigurieren Sie das Verfügbarmachen des Micro Frontends in dieser Datei:
overrides.config.js
module.exports = {
  webpack: {
    moduleFederation: {
      exposes: 'myjutroapp',
    },
  },
};
  1. (Optional) Fügen Sie in der Datei App.config.tsx der App innerhalb der export-Anweisung die folgende Eigenschaft hinzu:
src/app/App.config.tsx
export default {
  ...
  showSubHeader: false,
}
Note: Dadurch wird die Unterkopfzeile im Micro Frontend ausgeblendet, was Verwechslungen zwischen der Shell-App und dem Micro Frontend vermeiden kann. Dieser Schritt ist jedoch optional.

Die folgende Abbildung zeigt ein Beispiel für die auf true festgelegte showSubHeader-Eigenschaft und das daraus resultierende Erscheinungsbild innerhalb der Shell-App, wobei sowohl der Header der Shell-App als auch der Micro Frontend-Header sichtbar sind:

Beispiel für die auf „true“ gesetzte Eigenschaft showSubHeader und das daraus resultierende Erscheinungsbild

  1. Starten Sie Ihre App, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:
npm i
PORT=3001 npm start

6. Konfigurieren Sie die Shell-App für die Nutzung von Micro Frontends​

Um das Micro Frontend in Ihrer Shell-App anzuzeigen, konfigurieren Sie eine neue Seite und fügen Sie die MicroFrontend-Komponente zu dieser Seite hinzu. Gehen Sie folgendermaßen vor, um die Shell-App einzurichten:

  1. Erstellen Sie im Verzeichnis src/pages einen neuen Ordner namens MyMicroFrontend.
  2. Erstellen Sie in diesem Verzeichnis eine neue Datei mit dem Namen MyMicroFrontend.tsx.
  3. Fügen Sie in der Datei src/app/App.config.tsx eine neue Route für die Seite hinzu, die Sie gerade erstellt haben:
src/app/App.config.tsx
import {Settings} from '../pages/Settings/Settings';
import {MyMicroFrontend} from '../pages/MyMicroFrontend/MyMicroFrontend';
...
export default {
  ...
  routes: [
    {
      title: messages.pagesSettingsTitle,
      path: '/settings',
      exact: true,
      component: Settings,
    },
    {
      title: 'MyMicroFrontend',
      path: '/mymicrofrontend',
      component: MyMicroFrontend,
    },
  ]
}
Note: Verwenden Sie die exact-Eigenschaft nicht für die Micro Frontend-Route, da dies zu Problemen beim Laden des Micro Frontend führen kann.

7. Betten Sie die App in Ihre Shell-App ein​

Betten Sie das Micro Frontend unter Verwendung der MicroFrontend-Komponente in Ihre Datei MyMicroFrontend.tsx ein. Geben Sie die ID der App und die App-URL mit der src-Eigenschaft an:

MyMicroFrontend.tsx
import React from 'react';
import { MicroFrontend } from '@jutro/micro-frontends';

export const MyMicroFrontend: React.FC = () => (
  <MicroFrontend src="myjutroapp@http://localhost:3001" />
);

8. Starten Sie Ihre Apps und überprüfen Sie, ob das Micro Frontend funktioniert​

Starten Sie Ihre Shell-App, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm i
PORT=3000 npm start

Wenn alles richtig konfiguriert ist, sollten Sie im Navigationsmenü Ihrer Shell-App ein zusätzliches Element für die Micro Frontend-Seite sehen. Wenn Sie dieses Element auswählen, wird das Micro Frontend geladen und ist in der Shell-App sichtbar.

Beispiel für ein Micro Frontend, das in eine Shell-App eingebettet ist

Best Practices​

  • Wenn Sie mit Micro Frontends für Produktionsumgebungen arbeiten, stellen Sie sicher, dass Sie die Unterschiede zwischen den verfügbaren Technologien zur Einbettung von Micro Frontends verstehen und die für Ihren Anwendungsfall am besten geeignete auswählen. Weitere Informationen finden Sie unter Übersicht über Micro Frontend-Einbettungstechnologien.
  • Stellen Sie sicher, dass Ihre Micro Frontends alle unterschiedliche App-ID-Werte verwenden, um Konflikte im globalen Bereich zu vermeiden.

  • Die Version des Micro Frontend-Pakets muss mit Ihren anderen Jutro Digital Platform-Paketen übereinstimmen, z. B. @jutro/components.

Siehe auch​

Weitere Informationen zur Verwendung der MicroFrontend-Komponente im Freigabemodus finden Sie auf den folgenden Seiten: