Passer au contenu principal

Prise en main des modules micro front-end

Un module micro front-end est une petite application Web autonome qui fournit une fonctionnalité ciblée ou un flux utilisateur unique (par exemple, la recherche d’un devis ou la déclaration d’un sinistre). Les micro front-ends sont conçus pour être exposés et intégrés dans une application shell afin que leur interface utilisateur et leur comportement puissent être réutilisés dans des expériences plus importantes.

Les micro front-ends permettent aux équipes de développer, de déployer et de gérer indépendamment des parties discrètes d’une expérience Web. Les utilisations courantes incluent la prise en charge de workflows de développement indépendants, la fourniture d’un lanceur d’applications pour petites applications et l’activation des micro front-ends imbriqués où une application intégrée sert de shell pour les autres.

Objectif​

Ce tutoriel vous guide dans la configuration et l’utilisation du composant MicroFrontend en mode partagé. Pour en savoir plus sur le composant MicroFrontend en mode partagé, reportez-vous à la documentation sur ce sujet.

Dans ce tutoriel, vous allez apprendre à :

  1. Exposer une application Jutro en tant que micro front-end.
  2. Configurer une application shell pour qu’elle utilise des micro front-ends.
  3. Intégrer le micro front-end dans une application shell à l’aide du composant MicroFrontend.

Conditions préalables​

Avant d’installer et d’utiliser le composant MicroFrontend, assurez-vous de remplir les conditions préalables suivantes :

Vous devez :

  1. Avoir lu les pages d’informations générales et de présentation du micro front-end pour comprendre les technologies et les cas d’utilisation disponibles pour les micro front-ends dans Jutro Digital Platform.
  2. Disposer d'une application existante que vous souhaitez convertir en micro front-end. Vous pouvez également télécharger l’exemple d'application inclus.
  3. Disposer d'une application shell existante dans laquelle vous souhaitez intégrer le micro front-end. Vous pouvez également télécharger et utiliser le modèle de kit de démarrage Standalone.

Étapes du tutoriel​

1. Télécharger l’application Jutro Sandbox (facultatif)​

Warning: L'application de démarrage est destinée uniquement à l'apprentissage ! Vous ne pourrez pas démarrer une application prête à la production avec cette application de démarrage. Vous pouvez essayer les fonctionnalités de base de Jutro et tester les workflows, mais l'application de démarrage est limitée dans ses fonctionnalités et est une version figée de Jutro.

Si vous n’avez pas d’application existante à convertir en micro front-end, vous pouvez utiliser l’exemple d'application fourni. Cet exemple d’application est une application Sandbox qui peut être utilisée comme micro front-end dans ce tutoriel.

Télécharger l'application Jutro Sandbox

2. Télécharger le modèle de kit de démarrage Standalone (facultatif)​

Si vous n’avez pas d’application shell existante dans laquelle intégrer votre micro front-end, vous pouvez utiliser le modèle de kit de démarrage Standalone. Ce modèle est une application Jutro de base qui peut être utilisée comme application shell dans ce tutoriel.

  1. Connectez-vous à Guidewire Home, puis accédez à Jutro Web Apps.
  2. Sélectionnez Créer une nouvelle application Jutro.
  3. Dans le champ Nom de l’application, saisissez un nom pour votre application.
  4. Pour le type d’application, sélectionnez Application autonome.
  5. Dans le menu déroulant Modèle d’application, sélectionnez Kit de démarrage Standalone.
  6. Sélectionnez le système stellaire dans lequel vous souhaitez créer votre application.
  7. Sélectionnez la planète cible InsuranceSuite.
  8. Sélectionnez Créer une application.
  9. Une fois l’application créée, sélectionnez Code source en haut de la page et téléchargez le code source de l’application sur votre machine locale.

3. Configurer le référentiel requis dans votre configuration npm​

Il existe trois instances régionales de référentiel binaire Guidewire dans lesquelles sont stockés les packages npm requis pour les applications Jutro :

Si vous utilisez une application Jutro existante, elle pointe déjà, par défaut, vers l’instance correspondant à l’environnement Guidewire Home dans lequel elle a été créée. Toutefois, si vous utilisez l’exemple d'application, vous devez définir le référentiel dans votre configuration npm afin d’installer les packages requis.

Au cours des étapes de configuration du développement local, vous devez obtenir un jeton d’accès pour l’instance sélectionnée. Dans ces étapes, l’instance AMER est utilisée dans l’exemple :

  1. Connectez-vous à https://amer.binrepo.guidewire.net/ à l'aide de vos identifiants SAML SSO.

  2. Ouvrez votre terminal dans votre répertoire de base et exécutez la commande suivante, en remplaçant la valeur de {tenantId} par votre ID de locataire :

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: Pour en savoir plus sur la configuration de votre environnement de développement local, reportez-vous à Configuration de votre environnement de développement local.

4. Installer le package micro front-end dans les deux applications​

Dans votre application shell et dans l’application à convertir en micro front-end, installez le package @jutro/micro-frontends. Cela vous donne accès aux fonctionnalités micro front-end.

Important: L’application shell a besoin de ce package uniquement lorsqu’elle utilise le composant MicroFrontend. Dans certaines configurations de production, vous devrez peut-être utiliser une méthode d’intégration différente et n’aurez pas besoin de ce package dans l’application shell, mais dans ce tutoriel, vous devez l’installer dans les deux applications.

Vous pouvez installer le package en exécutant la commande suivante :

npm i --save @jutro/micro-frontends@<your-jutro-version>
Note: Exigences de version

La version du package du micro front-end doit correspondre à vos autres packages Jutro Digital Platform, tels que @jutro/components.

5. Exposer l’application en tant que micro front-end​

Après avoir installé le package @jutro/micro-frontends, suivez ces étapes pour convertir l’application autonome ou l’exemple d'application en un micro front-end que vous pouvez ensuite intégrer dans votre application shell :

  1. Dans l’application, assurez-vous que les fichiers src/indexAsync.ts et src/startApp.ts sont présents et créez-les si ce n’est pas le cas.
  2. Ajoutez ce qui suit à src/indexAsync.ts :
src/indexAsync.ts
import('./startApp').then(({ startApp }) => startApp());
  1. Dans src/startApp.ts, remplacez l’élément import de la fonction start par @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';
...

Vous devez appeler la fonction start du micro front-end dans la fonction startApp :

export const startApp = (mfeData: string) => {
  start(Jutro, {
    appName: messages.appName,
    appDescription: messages.appDescription,
    mfeData,
  });
};
  1. Définissez une variable unique JUTRO_APP_ID dans le fichier .env. Elle est utilisée comme nom du champ d'application :
JUTRO_APP_ID=myjutroapp
Note: Lorsque vous définissez la variable JUTRO_APP_ID, les classes des composants personnalisés sont précédées de cet ID. Cet ID est valide uniquement pour un composant MicroFrontend en mode partagé. Si vous utilisez d'autres méthodes d'intégration, cette variable est ignorée.
  1. Créez un fichier au niveau racine, au même niveau que votre package.json. Nommez-le overrides.config.js et configurez l'exposition du module micro front-end dans ce fichier :
overrides.config.js
module.exports = {
  webpack: {
    moduleFederation: {
      exposes: 'myjutroapp',
    },
  },
};
  1. (Facultatif) Dans le fichier App.config.tsx de l’application, dans l'instruction export, ajoutez la propriété suivante :
src/app/App.config.tsx
export default {
  ...
  showSubHeader: false,
}
Note: Cela masque le sous-en-tête dans le micro front-end, ce qui peut aider à éviter la confusion entre l’application shell et le micro front-end. Toutefois, il s’agit d’une étape facultative.

L’image suivante montre un exemple de la propriété showSubHeader définie sur true et de l’apparence qui en résulte à l’intérieur de l’application shell avec l’en-tête de l’application shell et l’en-tête du micro front-end visibles :

Exemple de propriété showSubHeader définie sur true et apparence qui en résulte

  1. Démarrez votre application en exécutant la commande suivante dans votre terminal :
npm i
PORT=3001 npm start

6. Configurer l’application shell pour qu’elle utilise des micro front-ends​

Pour faire apparaître le micro front-end dans votre application shell, configurez une nouvelle page et ajoutez-y le composant MicroFrontend. Suivez ces étapes pour configurer l’application shell :

  1. Créez un nouveau dossier nommé MyMicroFrontend dans le répertoire src/pages.
  2. Dans ce répertoire, créez un fichier nommé MyMicroFrontend.tsx.
  3. Dans le fichier src/app/App.config.tsx, ajoutez une nouvelle route pour la page que vous venez de créer :
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: N’utilisez pas la propriété exact pour la route du micro front-end, cela pourrait entraîner des problèmes avec le chargement du micro front-end.

7. Intégrer l’application dans votre application shell​

Dans votre fichier MyMicroFrontend.tsx, intégrez le micro front-end à l’aide du composant MicroFrontend. Spécifiez l’ID de l’application et l’URL de l’application à l’aide de la propriété src :

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

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

8. Démarrer vos applications et vérifier que le micro front-end fonctionne​

Démarrez votre application shell en exécutant la commande suivante dans votre terminal :

npm i
PORT=3000 npm start

Si tout est configuré correctement, vous devriez voir un élément supplémentaire dans le menu de navigation de votre application shell pour la page du micro front-end. Lorsque vous sélectionnez cet élément, le micro front-end se charge et est visible dans l’application shell.

Exemple de micro front-end intégré dans une application shell

Meilleures pratiques​

  • Lorsque vous utilisez des micro front-ends pour des environnements de production, assurez-vous de bien comprendre les différences entre les technologies disponibles pour intégrer des micro front-ends et choisissez celle qui convient le mieux à votre cas d’utilisation. Pour en savoir plus, reportez-vous à la section Présentation des technologies d’intégration des modules micro front-end.
  • Assurez-vous que vos micro front-ends utilisent tous des valeurs d’ID d’application différentes pour éviter les conflits à l’échelle globale.

  • La version du package du micro front-end doit correspondre à vos autres packages Jutro Digital Platform, tels que @jutro/components.

Voir également​

Pour en savoir plus sur l’utilisation du composant MicroFrontend en mode partagé, reportez-vous aux pages suivantes :