Exposición e incrustación con iframe estándar

El primer paso en este proceso es crear una nueva aplicación de Jutro y, luego, adaptarla como microfrontend. Luego, se consume este nuevo microfrontend dentro de otra aplicación de Jutro. En nuestro ejemplo, creamos una segunda aplicación de Jutro con Jutro CLI que luego consume el microfrontend recién creado.

Paso 1: Instalar el paquete de microfrontends

Cree una instancia de nueva aplicación de Jutro o cambie una aplicación basada en Jutro existente para que sea la microaplicación que se está incrustando.

En su aplicación basada en Jutro, instale el paquete @jutro/micro-frontends de modo que tenga acceso a la funcionalidad de microfrontend:

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

Note: La versión del paquete debe coincidir con los otros paquetes de Jutro Design System, como @jutro/components.

Note:

La dependencia @jutro/auth ahora es opcional para los paquetes @jutro/router y @jutro/components . Sin embargo, el componente @jutro/micro-frontends package requiere que se agregue @jutro/auth a las dependencias de la aplicación que se van a utilizar.

Paso 2: Exponer una aplicación de Jutro como microfrontend

Una vez que haya instalado el paquete micro-frontend, siga estos pasos para convertir la aplicación independiente en un microfrontend que puede incrustar en una aplicación shell. A pesar de haberse convertido en un microfrontend, la aplicación sigue funcionando en modo independiente.

1. En el repositorio del microfrontend, asegúrese de que los archivos src/indexAsync.js y src/startApp.js estén presentes y no tengan conflictos de Git. Si los archivos no están presentes, créelos manualmente. Agregue a src/indexAsync.js lo siguiente:

   src/indexAsync.js

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

2. En src/startApp.js, cambie la import de la función start a @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';
   /* ... */

   Debe llamar a la función de microfrontend start dentro de la función 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: Nombre del ámbito del microfrontend en Webpack. Este nombre debe ser único entre los microfrontends de la misma aplicación 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: Punto de entrada para invalidar o ampliar bibliotecas compartidas. Recibe la configuración predeterminada de la biblioteca y prevé la configuración de la biblioteca compartida.

     Consulte los documentos oficiales de federación del módulo de Webpack para obtener más información.

   Warning: Nomenclatura única

   Si planea importar varios microfrontends en su aplicación shell, asigne a cada uno de ellos un name único en sus configuraciones de Webpack. Esto evita que los recursos para dos microfrontends colisionen en Webpack.

4. Inicie su aplicación:

   npm i
   PORT=3001 npm run start

Paso 3: Incrustar un microfrontend en una aplicación shell

Para incrustar un microfrontend con el iframe HTML estándar, utilice la etiqueta <iframe> e incluya la URL del microfrontend como se muestra en el ejemplo, donde <MICRO_FRONTEND_URL> representa la URL del microfrontend. Además, siga las instrucciones para compilar e implementar su aplicación.

Note: El encabezado Content-Security-Policy debe incluir una directiva que permita la incrustación desde un dominio principal específico. En lugar de un valor fijo, debe reflejar el dominio que se pretende que integre el microfrontend (por ejemplo, frame-ancestors https://*.url.myportal.com). Al ascender a preproducción y producción utilizando Jutro Web Apps, agregar el dominio de la aplicación shell a la sección "Allowed CORS origins" genera automáticamente el encabezado necesario Content-Security-Policy. Además, puede establecer manualmente el encabezado en las invalidaciones de encabezado de respuesta.

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