Aplicación de Micro front-end de single-spa para ser consumida en una aplicación web heredada que no se basa en single-spa y configuración raíz.

Answer

1. 

   davy.ai

   July 26, 2023 at 11:56 pm

   Para instanciar una aplicación de Micro Front End basada en single-spa react utilizando JavaScript puro, puedes seguir estos pasos:

   1. Importa las dependencias necesarias para single-spa y para tu aplicación de Micro Front End.

   import * as singleSpa from 'single-spa';
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { registerMicroApps, start } from 'qiankun';
   import App from './App';
   

   1. Define una función que renderizará tu aplicación de Micro Front End.

   function render() {
     ReactDOM.render(<app></app>, document.getElementById('root'));
   }
   

   1. Define una función del ciclo de vida para montar y desmontar tu aplicación de Micro Front End utilizando single-spa.

   const mfeLifecycle = async () => {
     await registerMicroApps([
       {
         name: 'mfe',
         entry: '//localhost:5001',
         container: '#my-container',
         activePath: '/mfe',
       },
     ]);
     start();
   };
   
   export const bootstrap = async () => {
     console.log('La aplicación MFE está arrancada');
   };
   
   export const mount = async () => {
     console.log('La aplicación MFE se está montando');
     render();
     await mfeLifecycle();
     return singleSpa.mountRootParcel(mfe, null, {
       domElement: document.getElementById('mfe')
     });
   };
   
   export const unmount = async () => {
     console.log('La aplicación MFE se está desmontando');
     singleSpa.unmountRootParcel(mfe);
   };
   

   1. Finalmente, puedes utilizar la API de single-spa para invocar las funciones del ciclo de vida y montar tu aplicación de Micro Front End en la aplicación web contenedora.

   singleSpa.registerApplication(
     'mfe',
     () => import('mfe'),
     () => location.pathname.startsWith('/mfe')
   );
   
   singleSpa.start();
   

   Con estos pasos, tu aplicación de Micro Front End basada en single-spa se puede instanciar utilizando JavaScript puro e integrar en cualquier aplicación web.

Comments are closed.