Zum Hauptinhalt springen

Verfügbarmachen und Einbetten der MicroFrontend-Komponente mit Kontextfreigabe

Note: Die Verwendung der MicroFrontend-Komponente mit Kontextfreigabe wurde zuvor als Modulföderationsmodus bezeichnet. Wird jetzt als Freigabemodus bezeichnet. Sie können moduleFederation weiterhin als Wert für die Eigenschaft mode verwenden, dies ist jedoch veraltet. Es wird empfohlen, alle Verweise von Modus moduleFederation auf shared zu aktualisieren, um zukünftige Probleme zu vermeiden.

Auf dieser Seite werden einige der technischen Details zur Verwendung von Micro Frontends mit der Funktion für die gemeinsame Nutzung von Kontext in Jutro erläutert. Bevor Sie fortfahren, ist es wichtig zu beachten, dass, obwohl die Module-Federation-Technologie verwendet wird, um die Funktionen für die Kontextfreigabe zu aktivieren, derzeit keine Module zwischen der Shell-App und dem Micro Frontend gemeinsam genutzt werden.

Diese Technologie setzt voraus, dass die Shell-App und das eingebettete Micro Frontend in JDP Version 8.13.x oder höher ausgeführt werden.

Schritt 1: Micro Frontend-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 die @jutro/micro-frontends-Komponente, dass @jutro/auth zu Ihren App-Abhängigkeiten hinzugefügt wird, um verwendet werden zu können.

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

Nachdem Sie das micro-frontend-Paket installiert haben, führen Sie die 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 in src/indexAsync.js hinzu:

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

  2. Ändern Sie in src/startApp.js den 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. Legen Sie eine eindeutige JUTRO_APP_ID-Variable fest. Diese Variable wird als Bereichsname verwendet. Sie können sie in der .env-Datei definieren:

JUTRO_APP_ID=jutroapp

Wenn Sie die Variable JUTRO_APP_ID festlegen, wird den Klassen für benutzerdefinierte Komponenten diese ID vorangestellt.

Note: Die Variable JUTRO_APP_ID wird nur verwendet, wenn eine MicroFrontend-Komponente in den Freigabemodus versetzt wird. Wenn Sie andere Integrationsmethoden verwenden, wird diese Variable ignoriert.

  1. 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.
    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. Standardmäßig ist diese Option deaktiviert, da es einige bekannte Probleme gibt.

      exposes: {
        './startApp': './src/startApp',
      },
      shared: ['date-fns'],

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

    In der Datei config.overrides.js können Sie außerdem den Namen Ihres Micro Frontends mit weback.moduleFederation.name festlegen (wird manchmal auch als scopeName bezeichnet). Dies wurde durch die Konfigurationsvariable JUTRO_APP_ID ersetzt, die den scopeName automatisch festlegt.

    weback.moduleFederation.name wird für Anwendungen verwendet, die zuvor erstellt wurden und die name-Konfiguration bereits verwenden. Die beste Methode ist die Verwendung von JUTRO_APP_ID, es sei denn, Ihre Anwendung ist eine Legacy-Anwendung. Legen Sie weback.moduleFederation.name nicht fest, wenn Sie eine neue Anwendung erstellen. Achten Sie beim Festlegen dieses Werts darauf, dass Sie nicht den Standardwert jutroapp für den Namen verwenden:

module.exports = {
  webpack: {
    moduleFederation: {
      name: 'jutroapp',
      exposes: 'jutro-app',
    },
  },
};
Note: Weitere Informationen zum Festlegen des Namens in webpack.moduleFederation und in JUTRO_APP_ID finden Sie auf der Seite Überlegungen zur Verwendung von Micro Frontends.
  1. Starten Sie Ihre Micro Frontend-App:
npm i
PORT=3001 npm run start

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

Instanziieren Sie eine weitere Jutro-App über die CLI. Dies wird unsere Shell-App sein.

Führen Sie nun die folgenden Schritte aus, um das in Schritt 2 erstellte Micro Frontend zu verwenden.

  1. Laden Sie Ihr Micro Frontend unter Verwendung der MicroFrontend-Komponente und durch Festlegen der Eigenschaft src. Diese Eigenschaft akzeptiert die App-ID des Micro Frontends zusammen mit der App-URL. Um mehr über diese Eigenschaft zu erfahren, lesen Sie den Abschnitt Micro Frontend API-Referenz.

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

    export const MyMicroFrontend = () => (
      <MicroFrontend
        src="claimMicroFrontend@http://localhost:3001"
        exampleProp="Example prop"
        exampleCallback={() => console.log('Callback from shell')}
      />
    );
Note: Micro Frontends werden automatisch von Jutro-Fehlergrenzen umschlossen. Weitere Informationen finden Sie auf der Seite ErrorBoundary. Sie verwenden außerdem die standardmäßige Loader-Komponente.

  1. Starten Sie Ihre Shell-App:

    npm i
    PORT=3000 npm run start

src​

Sie können die Funktion getMicroFrontendSrc mit Ihrer Eigenschaft src verwenden, um die Quell-URL aus der Konfiguration zu laden. Diese Funktion ruft die App-ID und die URL Ihres Micro Frontends ab.

// import { MicroFrontend, getMicroFrontendSrc } from '@jutro/micro-frontends';
<MicroFrontend src={getMicroFrontendSrc('claimMicroFrontend')} />

Wenn Sie dies tun, müssen Sie microFrontendsConfig in Ihrer src/config/config.json festlegen.

config.json
{
  "microFrontendsConfig": {
    "remotes": {
      "claimMicroFrontend": "claimMicroFrontend@http://localhost:3001"
    }
  }
}

Darüber hinaus können Sie die Eigenschaft src verwenden, ohne die ID in der Konfiguration festzulegen. Übergeben Sie einfach mfeAppId@uri. Beachten Sie, dass mfeAppId eindeutig sein muss. Sie wird in der Konfiguration Ihres Micro Frontends festgelegt.

Beispiel:

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

export const MyMicroFrontend = () => (
  <MicroFrontend src="claimMicroFrontend@http://localhost:3001" />
  // or src="claimMicroFrontend@https://some-website.com"
);

Übergeben von Konfigurationswerten von der Shell-App an das Micro Frontend​

Micro Frontends können nicht auf Shell-App-Konfigurationen zugreifen oder diese festlegen, da die Jutro-Konfigurationsspeicher und die @jutro/config-Paket-APIs in der Shell-App und den Micro Frontends voneinander isoliert sind.

Die Shell-App kann jedoch weiterhin die Anfangswerte für die Frontend-Konfigurationen bereitstellen. Die Shell-App kann auch die an die Jutro-Funktion start übergebenen Jutro launchProps überschreiben. Sie können dies je nach Bedarf mit einer der folgenden Eigenschaften oder mit beiden erreichen:

  • configOverrides: Kurzform, falls Sie nur Jutro-Konfigurationen benötigen, die für die getConfigValue-API verfügbar sein sollen.
Note: Diese Eigenschaften sind in der Eigenschaft jutro verschachtelt, um sie von den Eigenschaften zu trennen, die durch das Micro Frontend weitergegeben werden sollen.

Beispiel für die Verwendung der beiden Shell-App-Überschreibungseigenschaften:

<MicroFrontend
  src={getMicroFrontendSrc('claimMicroFrontend')}
  jutro={{
    router: {
      basename: '/welcome',
    },
    configOverrides: {
      someConfig: 'Micro frontend config value',
    },
  }}
/>

Beispiel, wenn nur launchProps außer Kraft gesetzt werden sollen:

const customProp = useMemo(() => ({ someObject: 'some value' }), []);

<MicroFrontend
  src={getMicroFrontendSrc('claimMicroFrontend')}
  jutro={{
    router: {
      basename: '/welcome',
    },
  }}
  someCustomProp={customProp}
/>;

Zurückgeben von Daten an die Shell-Anwendung​

Um Daten von einem Micro Frontend zurück an die Shell-Anwendung zu übergeben, können Sie eine Callback-Funktion von der Shell an das Micro Frontend übergeben. Wenn das Micro Frontend diesen Callback mit Argumenten aufruft, empfängt die Shell-Anwendung diese Argumente und kann die Daten nach Bedarf verarbeiten.

Note: Stellen Sie beim Übergeben von Daten sicher, dass Ihre benutzerdefinierten Callbacks als Eigenschaften der MicroFrontend-Komponente übergeben werden und nicht in der jutro-Eigenschaft verschachtelt sind.

Die folgenden Abschnitte zeigen, wie Daten mit der Callback-Funktion vom Micro Frontend an die Shell-Anwendung übergeben werden:

Code in der Shell-App​

export const MyMicroFrontend = () => {
  const handleMicroFrontendData = useCallback((data) => {
    console.log('Received data from micro frontend:', data);
  });

  return (
    <MicroFrontend
      src="myapp@http://localhost:3001"
      jutro={{
        mode: 'shared',
      }}
      // Callback
      exampleCallback={handleMicroFrontendData}
    />
  );
};

Code im Micro Frontend​

export const ExampleCallbackContext = React.createContext({
  exampleCallback: (data) =>
    console.log('Default callback used in eg. MFE standalone mode', data),
});

export const Jutro = ({ exampleCallback, ...props }) => {
  return (
    <ExampleCallbackContext.Provider value={{ exampleCallback }}>
      <AppRoot {...props} />
    </ExampleCallbackContext.Provider>
  );
};

export const SomeComponentOnSomePage = () => {
  const { exampleCallback } = useContext(ExampleCallbackContext);
  return (
    <Button
      onClick={() => exampleCallback('Data from MFE')}
      label="Trigger example callback"
    />
  );
};
Note: Für Micro Frontends mit Verwendung des Kontextfreigabemodus können alle Daten in beliebiger Form übergeben werden, mit Ausnahme von React-Komponenten oder React-Elementen.

Authentifizierte Micro Frontends​

Micro Frontends sind so konzipiert, dass sie die von ihren Shell-Apps abgerufenen Authentifizierungstoken nutzen und so die Benutzererfahrung vereinfachen, indem sie einen einzigen Anmeldeablauf ermöglichen. Das bedeutet, dass sich Micro Frontends in den meisten Fällen nicht um die Durchführung von Authentifizierungsabläufen selbst kümmern müssen, was sie einfacher hält. Damit dieser Ansatz jedoch effektiv funktioniert, insbesondere bei der Verwendung von Guidewire Hub- und Server-APIs, müssen bestimmte Überlegungen angestellt werden.

Wenn von einem Micro Frontend erwartet wird, dass es Server-APIs aufruft, ist es entscheidend, dass das verwendete Token von Guidewire Hub ausgegeben wird. Diese APIs akzeptieren nur Token von Guidewire Hub, sodass die Verwendung eines Tokens aus einer anderen Quelle zu fehlgeschlagenen API-Aufrufen führt. Da JDP-Apps den Aussteller eines Tokens nicht validieren, führt die Übergabe eines Nicht-Guidewire-Hub-Tokens an ein Micro Frontend dazu, dass das Micro Frontend fälschlicherweise davon ausgeht, dass der Benutzer authentifiziert ist, und versucht, das Token zu verwenden. Dies führt zu Fehlern bei der Interaktion mit InsuranceSuite-APIs.

Da Shell-App-Token mit Micro Frontends gemeinsam genutzt werden, wird empfohlen, dass in Micro Frontends die gruppenbasierte Autorisierung gegenüber der ID-basierten Autorisierung bevorzugt wird. Die in der .env-Datei eines Micro Frontends definierte ID wird nicht im freigegebenen Token der Shell angezeigt, da diese Bereiche an den Konfigurationen der Shell-App ausgerichtet sind. Um eine nahtlose Erfahrung zu gewährleisten, sollte der Authentifizierungsfluss idealerweise von den Shell-Apps verwaltet werden, bevor das Micro Frontend gerendert wird, damit das Micro Frontend die Authentifizierung nicht selbst übernehmen muss, sondern lediglich erkennen muss, dass sie benötigt wird.

Note: Der Freigabemodus unterstützt keine unabhängige Authentifizierung. Das bedeutet, dass sie nicht unterstützt wird, wenn die Integration deaktiviert ist und entweder für die Shell sowie für das Micro Frontend eine Authentifizierung konfiguriert ist oder nur für das Micro Frontend eine Authentifizierung konfiguriert ist.

Anwendungsfälle​

Kontext​

In der React-Struktur des Micro Frontends gibt es einen zusätzlichen Kontext, der als AppContext bezeichnet wird. Sie können es in Ihrem Micro Frontend verwenden, um ein Verhalten zu implementieren, das auf dem Kontext basiert, in dem das Micro Frontend gerendert wird.

AppContext bietet die folgenden Attribute:

  • appMode bezüglich des Einbettungsmodus, shared, isolated oder undefined stellt den Standard-Standalone-Modus dar.
  • appName für den Namen des Micro Frontends aus der Sicht der Shell-App oder undefined für den Standard-Standalone-Modus.

Um Funktionen je nach Anwendungsmodus manuell zu aktivieren oder zu deaktivieren, rufen Sie den Modus über AppContext im Micro Frontend auf:

App.js
import { AppContext } from '@jutro/micro-frontends';
import React, { useContext } from 'react';

export const MicroFrontendComponent = () => {
  const { appMode } = useContext(AppContext);

  // [...] existing code

  return <>{appMode === 'isolated' && <div>Something special</div>}</>;
};

Grundriss-Routing und Micro Frontends​

Wenn Sie ein Micro Frontend in einen Grundriss einbetten, legen Sie exact für die Routenkonfiguration des Micro Frontends nicht auf true fest. Andernfalls gilt: Sobald das Micro Frontend zu /my-mfe/some-microfront-subpage navigiert, stimmt es nicht mehr genau mit /my-mfe überein, und die Bereitstellung Ihres Micro Frontends wird aufgehoben.

{
  /* ... omitted ... */
  "floorplan.default": {
    "routes": [
      {
        "title": {
          "id": "id",
          "defaultMessage": "My MicroFrontend"
        },
        "path": "/my-mfe",
        "exact": false, // <-- Set this to false
        "component": "MyMicroFrontend"
      }
    ]
  }
}

Globalisierung​

Durch die Globalisierungsintegration werden Gebietsschema- und Spracheinstellungen in der Shell-App und in den Micro Frontends synchronisiert. Alle Änderungen an diesen Werten in der Shell oder in den Micro Frontends wirken sich sofort auf die andere App aus. Die Integration überträgt außerdem die standardmäßige Lokalisierungskonfiguration von der Shell auf die Micro Frontends. Das folgende Beispiel zeigt die Struktur der Lokalisierungskonfiguration:

{
  availableLanguages?: Array<string>;
  availableLocales?: Array<string>;
  defaultCountryCode?: string;
  defaultCurrency?: string;
  defaultTimeZone?: string;
  preferredLanguage?: string;
  preferredLocale?: string;
};

Sie können die Integration deaktivieren, indem Sie die Eigenschaft integrateG11n auf falsesetzen. In diesem Fall verwenden die Micro Frontends ihre eigene Standardlokalisierungskonfiguration, und alle Änderungen an locale oder language wirken sich nicht auf andere Anwendungen aus.

Note: Die in configOverrides.localeSettings definierte Gebietsschemakonfiguration hat Vorrang vor Integrationswerten. Verwenden Sie dies, wenn Sie ein Gebietsschema für ein Micro Frontend angeben und sicherstellen möchten, dass es während der App-Laufzeit unverändert bleibt.

Die Standardwerte der Shell werden durch configOverrides.localeSettings überschrieben, wenn sie an eine Micro Frontend-Anwendung übergeben werden.

Das Micro Frontend verwendet configOverrides.localeSettings auch, wenn die Integration deaktiviert ist, und stellt nur Anfangswerte bereit. Wenn die Integration aktiviert ist, werden Änderungen an Gebietsschema oder Spracheinstellungen an andere Apps weitergegeben.

Das folgende Beispiel zeigt, wie Globalisierungseinstellungen in einem Micro Frontend eingerichtet werden:

const SampleApp = () => {
  const globalizationSettings = {
    preferredLocale: 'en-EN',
    preferredLanguage: 'en-EN',
    defaultCountryCode: 'US',
    defaultCurrency: 'USD',
    defaultTimezone: 'GMT',
  };

  return <Microfrontend jutro={{ g11n: globalizationSettings }} />;
};

Sie können die Modal-Integration aktivieren, indem Sie die Eigenschaft integrateModal auf true setzen. Dadurch können Sie ein Modal im Micro Frontend auslösen, das dann in der Shell-App angezeigt wird.

Wenn integrateModal auf true festgelegt ist, werden die in einem eingebetteten Micro Frontend ausgelösten Modals in der Mitte des Shell-Fensters angezeigt und verwenden die Funktionen showAlert und showConfirm aus dem Modalkontext der Shell.

Wenn integrateModal auf false gesetzt ist, werden die von einem eingebetteten Micro Frontend ausgelösten Modals in der Mitte des Micro Frontend-Containers angezeigt.

<MicroFrontend
  jutro={{
    ...
    integrateModal: true
    },
  }
/>
...
  const handleShowModal = () => {
    showModal(
      <CustomModalExample />
    );
  };

  const handleShowAlert = () => {
    showAlert({
      title: 'Alert Title',
      message: 'This is an alert message.',
    });
  };

  const handleShowConfirm = () => {
    showConfirm({
      title: 'Confirm Title',
      message: 'Are you sure you want to proceed?',
      onConfirm: () => {
        ...
      },
    });
  };

  return (
    <div>
      <button onClick={handleShowModal}>Show Custom Modal</button>
      <button onClick={handleShowAlert}>Show Alert</button>
      <button onClick={handleShowConfirm}>Show Confirm</button>
    </div>
  );
...
Note: Benutzerdefinierte Modals, die durch Aufrufen der Funktion showModal aus dem von useModal() zurückgegebenen Modalkontext angezeigt werden, werden nicht integriert. Diese Einschränkung besteht, da das Senden von benutzerdefinierten React-Elementen nicht möglich ist. Daher ist die modale Integration auf Funktionen beschränkt, die nur serialisierbare Parameter verwenden. Entsprechend verhält es sich, wenn showModal in einem Micro Frontend ausgelöst wird, so, als ob integrateModal auf false gesetzt wäre.

Weitere Informationen zu benutzerdefinierten Modals finden Sie in der Dokumentation zur Modalkomponente und auf der Seite zur Modalkomponente im Storybook .

Übersetzungen in Modals​

Wenn die Modals Übersetzungen enthalten, die nur im Micro Frontend verfügbar sind, und integrateModal auf true festgelegt ist, kann in der Shell-App nicht auf die Übersetzungen zugegriffen werden, wenn die App angezeigt wird. Für dieses Problem gibt es eine Reihe von Workarounds:

Inhalt vor dem Aufrufen der modalen Funktion übersetzen​

Sie können die Meldungen übersetzen, bevor Sie die modalen Funktionen mit der Funktion useTranslator() aus dem @jutro/locale-Paket aufrufen:

import { useModal } from '@jutro/components';
import { useTranslator } from '@jutro/locale';
function MyComponent(props) {
    ...
    const { showConfirm } = useModal();
    const translator = useTranslator();

    const handleShowConfirm = async () => {
        const result = await showConfirm({
            title: messages.requiresApprovalHeader,
            message: translator(messages.requiresApproval, { value: translator(value.label) }),
            confirmButtonText: messages.confirm,
            cancelButtonText: messages.cancel,
        });
    };

    return (
        <button onClick={handleShowConfirm}>
            {translator(messages.showConfirmButton)}
        </button>
    );
}
showModal anstelle von showConfirm verwenden​

Sie können showModal anstelle von showConfirm verwenden. Dabei tritt nicht das gleiche Problem wie bei showConfirm auf. Stattdessen wird showModal im Micro Frontend ausgeführt und das Modal direkt dort gerendert. Weitere Informationen finden Sie in der Dokumentation zur Modalkomponente.

Note: Bei allen MicroFrontend-Komponenten mit Kontextisolierung wird das Dialogfeld von showModal auf den iFrame des Micro Frontends beschränkt. Dies führt zu einem schlechteren Benutzererlebnis, beeinträchtigt die Barrierefreiheitsfunktionen und wird daher nicht empfohlen.
integrateModal auf false festlegen​

Sie können stattdessen integrateModal auf false festlegen und die Modal-Integration vermeiden.

Important: Das Festlegen von jutro: { integrateModal: false } für eine MicroFrontend-Komponente im Kontextfreigabemodus funktioniert zwar optisch. Es beeinträchtigt jedoch die Barrierefreiheit und wird nicht empfohlen.

Verschachtelte Routernavigation​

Wenn Sie die MicroFrontend-Komponente im shared-Modus verwenden, nutzt das Micro Frontend denselben Browserkontext wie die Shell-App. Das bedeutet, dass der Browserort und die Verlaufsobjekte vom Micro Frontend und der Shell-App gemeinsam genutzt werden. Es wird nicht empfohlen, die Router-Integration zu deaktivieren, da dies zu unerwartetem Verhalten führen kann, wenn beide Anwendungen den Browserkontext gemeinsam nutzen und der Browserort und -verlauf möglicherweise noch aktualisiert werden.

Micro Frontends erkennen den Basisnamen ihres Routers automatisch anhand der URL der Shell-App in dem Moment, in dem sie gemountet werden. Wenn Sie einen expliziten Basisnamen festlegen möchten, können Sie dies tun, indem Sie die Eigenschaft jutro.router.basename an Ihr Micro Frontend übergeben.

Wenn Sie z. B. den folgenden Basisnamen angeben, bleibt der Shell-App-Pfad /welcome als Basispräfix für alle Micro Frontend-Routen erhalten:

<MicroFrontend
  src={getMicroFrontendSrc('claimMicroFrontend')}
  jutro={{
      router: {
        basename: '/welcome'
      },
    },
  }
/>

Wenn Sie basename auf / setzen, nutzt das Micro Frontend denselben Stammpfad wie die Shell-App. Alle internen Links innerhalb des Micro Frontends sollten den Pfad zum Micro Frontend, wie in den Shell-Routen definiert, als Präfix enthalten. Andernfalls navigieren sie zu den Shell-Routen.

Note: Sie können auch die Routerkonfiguration Ihrer Shell-App ändern, um ungenaue Übereinstimmungen für die Seite zuzulassen, an die das Micro Frontend angehängt ist, um eine direkte Verlinkung des Micro Frontend bei Aktualisierung der Seite zu ermöglichen.

Deep Linking zu Micro Frontend-Seiten​

Wenn Ihre Shell-App die Route /fnol-mfe definiert, die die MicroFrontend-Komponente rendert, und dieses Micro Frontend eine verschachtelte Route /settlement/:claimIdNumber definiert, können Sie direkt auf diese Seite verlinken, indem Sie von der Shell zu /fnol-mfe/settlement/123 navigieren (wobei 123 die aktuelle Schadenfall-ID-Nummer ist). Beispiel:

// In the shell app
<button onClick={() => history.push('/fnol-mfe/settlement/123')}>
  Go to settlement
</button>
// or
<Link to="/fnol-mfe/settlement/123">Go to settlement</Link>;

In diesem Fall stimmt die Shell-App-Route /fnol-mfe weiterhin überein, weil in der Datei App.config.tsx als Route des Micro Frontends exact: false festgelegt ist.

Sie können mit router: { basename: '/fnol-mfe' } im Micro Frontend-Aufruf festlegen, dass der Micro Frontend-Router die URL /fnol-mfe entfernen soll, bevor interne Routen abgeglichen werden. Für /fnol-mfe/settlement/123 stimmt das Micro Frontend dann mit /settlement/:claimIdNumber überein. Ohne diesen basename sieht das Micro Frontend den vollständigen Pfad /fnol-mfe/settlement/123 und stimmt nicht mit /settlement/:claimIdNumber überein.

<MicroFrontend
  src={getMicroFrontendSrc('fnolMicroFrontend')}
  jutro={{
    router: {
      basename: '/fnol-mfe',
    },
  }}
/>

Integration von Toasts​

Sie können die Toast-Integration aktivieren, indem Sie die Eigenschaft integrateToast auf truesetzen. Auf diese Weise können Sie eine Toast-Nachricht vom Micro Frontend auslösen, die von der Shell-App angezeigt wird. Wenn integrateToast auf true gesetzt ist, nutzen die Micro Frontends und die Shell-App denselben Toast-Anbieter, während das Festlegen auf false jedem Micro Frontend und jeder Shell-App einen eigenen unabhängigen Anbieter ermöglicht.

<MicroFrontend
  jutro={{
    ...
    integrateToast: true
    },
  }
/>
...
const addToast = () =>
        ToastProvider.toast({ message: 'Application toast', autoClose: false });
    <Button
        size="small"
        onClick={addToast}
        label="Application Toast"
    />

Verwendung mit benutzerdefiniertem Loader und Fehlergrenze​

Beispiele für die Verwendung der Micro Frontend-Komponente mit benutzerdefinierten Eigenschaften:

const MyLoader = () => (
  <div className={customComponentStyles.customLoaderContainer}>
    <span className={customComponentStyles.customMfeLoader} />
  </div>
);

class MyErrorBoundary extends React.Component<
  { children: React.ReactNode, fallbackComponent?: React.ComponentType },
  { error?: Error }
> {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  componentDidCatch(error) {
    this.setState({
      error,
    });
  }

  render() {
    const { fallbackComponent: FallbackComponent } = this.props;

    if (this.state.error) {
      return (
        <span>
          {this.state.error.toString()}
          <FallbackComponent />
        </span>
      );
    }

    return this.props.children;
  }
}

const MyMicroFrontend = () => (
  <MicroFrontend
    src={getMicroFrontendSrc('claimMicroFrontend')}
    loaderComponent={MyLoader}
    errorBoundaryComponent={MyErrorBoundary}
    otherProp={someValue}
  />
);
Warning: Wenn Sie benutzerdefinierte Loader und eigene Fehlergrenzen verwenden, überschreiben Sie die Basiskonfiguration für Rendering und Fehlerbehandlung.

Dies kann zu Laufzeitproblemen führen.

Anzeigen einer Kopf- oder Fußzeile innerhalb des Micro Frontends​

Die Werte footer und header eines Micro Frontends, das mit MicroFrontend component in context sharing mode erstellt wurde, sind standardmäßig ausgeblendet, obwohl der subHeader an bestimmten Breakpoints weiterhin sichtbar ist. Um diese Elemente in Ihrem Micro Frontend anzuzeigen, müssen Sie sie innerhalb des Micro Frontends zusammen mit seinem Inhalt mithilfe der Komponenten Grid oder Flex rendern. Das folgende Beispiel zeigt eine Methode zum Rendern der Fußzeile:

// your-app/src/app/App.tsx

import { Flex } from '@jutro/layout';
import { Footer } from '../components/Footer';

export const AppRoot = props => {
    // existing content here

    return (
        <Flex direction="column">
            <AppFloorPlan floorPlans={floorPlans} />
            <Footer className={undefined} />
        </Flex>
    );
}
Note: Die Footer-Komponente aus der Jutro-App-Vorlage verfügt standardmäßig nicht über Styling, sondern erbt das Styling über die Eigenschaft className, die intern von der Grundriss-Komponente übergeben wird. Es gibt keine andere Möglichkeit, auf Grundriss-Fußzeilenstile zuzugreifen, daher müssen Sie die Fußzeile selbst gestalten.

Hosting eines Micro Frontends auf dem Webserver​

Warning: Da der Import eines Micro Frontends in die Shell-App in hohem Maße von den Daten abhängt, die in der vom Micro Frontend bereitgestellten Datei asset-manifest.json definiert sind, müssen Sie unbedingt sicherstellen, dass der Webserver, der diese Datei hostet, kein Zwischenspeichern dieser Datei auf der Client-Seite zulässt. Sie können dies erreichen, indem Sie entsprechende HTTP-Antwort-Header an diese Datei anhängen. Beispiel:
Cache-Control: no-cache, no-store, must-revalidate
Expires: 0

Wenn Sie die Zwischenspeicherung für diese Datei nicht deaktivieren, kann dies in einigen Fällen dazu führen, dass veraltete Inhalte für das Micro Frontend unerwartet bereitgestellt werden, selbst wenn bereits mehrere Aktualisierungen für einige Assets veröffentlicht wurden.

Jutro verwendet die Cache-Control Anforderungs-Header, wenn ein Micro Frontend importiert wird. Diese Header sollten in die Liste Access-Control-Allow-Headers für die Micro Frontend-Ressource auf dem Server aufgenommen werden.

Laden von Bild-Assets​

Da der Micro Frontend-Code in der Domäne und auf der Seite der Shell-App gerendert wird, müssen die URLs für Remote-Assets wie Bilder einen absoluten Pfad zum Asset haben. Relative Pfade würden zur Shell-App-Bereitstellung auflösen, wo das Asset nicht gefunden wird.

Jutro stellt automatisch sicher, dass die URLs für die in der asset-manifest.json des Micro Frontends aufgelisteten Assets mit ihrer absoluten Adresse referenziert werden, die auf die Micro Frontend-Bereitstellung verweist. Damit Ihr Bild-Asset in der asset-manifest.json aufgelistet wird und diese automatische Verarbeitung genutzt werden kann, importieren Sie es mit einem Webpack-Loader wie beispielsweise:

import myImage from './images/my-image.png';

<img
  src={myImage}
  // [...] other image attributes
/>;

Andernfalls, wenn Sie den Bildpfad zur Kompilierungszeit nicht kennen, müssen Sie sicherstellen, dass der Laufzeitpfad eine absolute Adresse ist, die auf die URL zeigt, unter der das Bild gehostet wird.

Integration von Jutro-Funktionen​

Jutro reserviert eine Reihe von Eigenschaften, die an die Anwendungen weitergegeben werden können, um das Verhalten von Jutro zu optimieren und in externe Anwendungen zu integrieren.

Diese Eigenschaften sind alle optional und können alle unter einer Eigenschaft im Namensraum jutro übergeben werden. Weitere Informationen zu allen Eigenschaften finden Sie in der Micro Frontend API-Referenz. integrateJutro kann genutzt werden, um alle Funktionen automatisch zu integrieren oder Funktionen selektiv ausschalten. Der folgende Code aktiviert beispielsweise alle Integrationen mit Ausnahme der Theme-Integration:

{
  integrateJutro: true,
  integrateTheme: false,
}

Erneutes Laden eines Micro Frontends​

Sie können ein Micro Frontend neu laden, indem Sie den benutzerdefinierten Callback () => window.location.reload() aus der Shell-App übergeben. Das folgende Beispiel zeigt, wie er in einer Schaltfläche implementiert wird:

const reloadMFE = () => {
  window.location.reload();
};

return (
  <div>
    <button onClick={reloadMFE}>Reload Page</button>
  </div>
);