Exposition et intégration avec un iframe standard

La première étape de ce processus consiste à créer une nouvelle application Jutro, puis à l'adapter en tant que module micro front-end. Ensuite, vous pouvez utiliser ce nouveau module micro front-end au sein d'une autre application Jutro. Dans notre exemple, nous créons une deuxième application Jutro à l'aide de la CLI Jutro qui utilise ensuite le module micro front-end nouvellement créé.

Étape 1 : Installer le package de micro front-ends

Procédez à l'instanciation d'une nouvelle application Jutro ou modifiez une application existante basée sur Jutro de façon à ce qu'elle corresponde au micro front-end que vous intégrez.

Dans votre application basée sur Jutro, installez le package @jutro/micro-frontends afin d'avoir accès aux fonctionnalités du micro front-end :

npm i --save @jutro/micro-frontends@<your-jutro-version>

Note: La version du package doit correspondre à vos autres packages Jutro Design System, tels que @jutro/components.

Note:

La dépendance @jutro/auth est désormais facultative pour les packages @jutro/router et @jutro/components . Cependant, @jutro/micro-frontends package nécessite que @jutro/auth soit ajouté aux dépendances de votre application pour être utilisé.

Étape 2 : Exposer une application Jutro en tant que micro front-end

Après avoir installé le package micro-frontend, suivez ces étapes pour convertir l'application autonome en un module micro front-end que vous pouvez intégrer dans une application shell. Bien qu'elle ait été convertie en module micro front-end, l'application continue de fonctionner en mode autonome.

1. Dans le référentiel du module micro front-end, assurez-vous que les fichiers src/indexAsync.js et src/startApp.js sont présents et qu'ils ne contiennent pas de conflits git. Si les fichiers ne sont pas présents, créez-les manuellement. Ajoutez ce qui suit à src/indexAsync.js :

   src/indexAsync.js

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

2. Dans src/startApp.js, remplacez l'élément import de la fonction start par @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';
   /* ... */

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

   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 : nom du champ d'application du module micro front-end dans webpack. Ce nom doit être unique parmi les modules micro front-end d'une même application shell.

   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 : point d'entrée pour remplacer ou étendre les bibliothèques partagées. Reçoit la configuration de bibliothèque par défaut et attend une configuration de bibliothèque partagée.

     Reportez-vous à la documentation officielle sur la fédération de modules Webpack pour en savoir plus.

   Warning: Dénomination unique

   Si vous prévoyez d’importer plusieurs micro front-ends dans votre application shell, donnez à chaque micro front-end un élément name unique dans les configurations webpack correspondantes. Cette approche empêche webpack de créer un conflit de ressources pour deux modules micro front-end.

4. Démarrez votre application :

   npm i
   PORT=3001 npm run start

Étape 3 : Intégrer un micro front-end dans une application shell

Pour intégrer un module micro front-end à l'aide de l'iframe HTML standard, utilisez la balise <iframe> et ajoutez l'URL du module micro front-end comme indiqué dans l'exemple, où <MICRO_FRONTEND_URL> représente l'URL du module micro front-end. De plus, suivez les instructions pour développer et déployer votre application.

Note: L'en-tête Content-Security-Policy doit inclure une directive autorisant l'intégration à partir d'un domaine parent spécifique. Au lieu d'une valeur fixe, elle doit refléter le domaine destiné à intégrer le module micro front-end (par exemple, frame-ancestors https://*.url.myportal.com). Lors de la promotion en pré-production et production à l'aide de Jutro Web Apps, l'ajout du domaine de l'application shell à la section "Allowed CORS origins" génère automatiquement l'en-tête Content-Security-Policy nécessaire. En outre, vous pouvez définir manuellement l'en-tête dans les remplacements d'en-têtes de réponse.

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