Concepto clave

En arquitecturas de micro-frontends con Module Federation, el dashboard completo representa el punto de integración donde múltiples equipos independientes despliegan sus módulos. Piensa en esto como un centro comercial donde cada tienda (micro-frontend) opera de forma autónoma, pero comparte espacios comunes como el estacionamiento (host) y cumple con reglas de seguridad (contractos). La clave está en definir contratos claros entre el host y los remotos, asegurando que la integración sea escalable y no genere acoplamiento entre equipos.

La escalabilidad aquí no solo se refiere a manejar más tráfico, sino a permitir que nuevos equipos se unan al proyecto sin modificar el core. Imagina agregar una nueva sección al dashboard: si la arquitectura está bien diseñada, solo necesitas configurar el remoto y actualizar el routing, sin tocar el código de otros equipos. Esto reduce los cuellos de botella en integración y acelera el time-to-market.

Cómo funciona en la práctica

Vamos a construir un dashboard que integra tres micro-frontends: Analytics (equipo A), UserManagement (equipo B) y Reporting (equipo C). Cada uno vive en su propio repositorio y se despliega independientemente. El host (dashboard) usa Module Federation para cargarlos dinámicamente.

Configura el host en webpack.config.js: define los remotos y expone componentes compartidos como React y ReactDOM.
Cada remoto configura su webpack para exponer sus módulos (ej: AnalyticsChart).
En el host, usa React.lazy y Suspense para cargar los módulos remotos solo cuando se necesiten.
Implementa un sistema de routing basado en rutas que mapea a cada micro-frontend.

Antes: un monolitico donde todos los equipos commiteaban al mismo repo, causando conflictos frecuentes. Despues: cada equipo tiene autonomia, y el host orquesta la carga bajo demanda.

Codigo en accion

Configuración del host (dashboard) en webpack.config.js:

// webpack.config.js del host
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "dashboard",
      remotes: {
        analytics: "analytics@http://localhost:3001/remoteEntry.js",
        userManagement: "userManagement@http://localhost:3002/remoteEntry.js",
        reporting: "reporting@http://localhost:3003/remoteEntry.js"
      },
      shared: {
        react: { singleton: true, eager: true },
        "react-dom": { singleton: true, eager: true }
      }
    })
  ]
};

Carga dinámica de un micro-frontend en el host:

// DashboardApp.jsx
import React, { Suspense } from 'react';
const AnalyticsChart = React.lazy(() => import("analytics/Chart"));

function Dashboard() {
  return (
    
      Dashboard Principal
      Cargando Analytics...}>

Errores comunes

Version mismatch en shared libraries: Si react en el host es 18.2.0 y en un remoto es 17.0.0, puede causar errores silenciosos. Solución: usa singleton: true y especifica versiones exactas en package.json.

Falta de contratos definidos: Los equipos cambian APIs sin comunicarlo, rompiendo la integración. Solución: documenta y versiona los contratos (ej: usando TypeScript interfaces).

Carga lenta por muchos remotos: Cargar 10 micro-frontends al inicio ralentiza la app. Solución: implementa lazy loading por ruta y prioriza críticos.

Problemas de CORS en desarrollo: Los remotos en localhost:3001 bloquean peticiones del host en localhost:3000. Solución: configura proxies en webpack devServer o usa headers adecuados.

Checklist de dominio

Configuraste Module Federation en host y al menos dos remotos.

Los micro-frontends se cargan dinámicamente sin errores en la consola.

Compartes librerías como react sin duplicar código en el bundle.

Tienes un sistema de routing que maneja rutas como /analytics, /users.

Los equipos pueden desplegar sus remotos independientemente.

Manejas estados globales (ej: autenticación) sin acoplar los módulos.

Implementaste error boundaries para fallos en carga de remotos.

Construye un Dashboard con Tres Micro-Frontends Independientes

Objetivo: Crear un dashboard host que integre tres micro-frontends remotos usando Module Federation, demostrando escalabilidad para equipos.

Configura el entorno: Crea cuatro proyectos React (uno host, tres remotos: analytics, users, reporting). Instala webpack 5 y Module Federation Plugin en cada uno.

Configura el host: En webpack.config.js del host, define los tres remotos con URLs locales (ej: localhost:3001). Comparte react y react-dom como singletons.

Configura los remotos: En cada remoto, expone al menos un componente (ej: AnalyticsChart) en su webpack.config.js. Asegúrate de que el nombre del remoto coincida con el usado en el host.

Implementa la carga dinámica: En el host, usa React.lazy para importar un componente de cada remoto. Muestra los tres en una interfaz con pestañas o rutas.

Agrega routing: Usa React Router para navegar entre /analytics, /users, /reporting, cargando solo el micro-frontend necesario.

Prueba la independencia: Modifica el componente en un remoto (ej: cambia el color del chart) y verifica que se refleje en el host sin recompilarlo.

Entrega: Sube el código a un repo con README que explique cómo ejecutar los cuatro proyectos simultáneamente.

Pistas

Usa webpack-dev-server en puertos diferentes (3000, 3001, 3002, 3003) para evitar conflictos.
Si falla la carga, revisa la consola del navegador y verifica que remoteEntry.js se esté sirviendo correctamente.
Para routing, considera usar rutas lazy con React.lazy y Suspense para cada micro-frontend.

Convertí esta lección en una prueba técnica visible.

Una app pequeña publicada, con README y decisiones explicadas, funciona mejor que una lista de tecnologías sueltas.

Paso 1

Creá una demo mínima que use el concepto de la lección.

Paso 2

Escribí un README corto con objetivo, stack, decisión técnica y mejora futura.

Paso 3

Publicá la demo y enlazala desde tu perfil profesional.

Ejercicio: Construir y Integrar el Dashboard Completo