Ejercicio: Construir y Integrar el Dashboard Completo

Tipo de lección: Video

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.

1. Configura el host en webpack.config.js: define los remotos y expone componentes compartidos como React y ReactDOM.
2. Cada remoto configura su webpack para exponer sus módulos (ej: AnalyticsChart).
3. En el host, usa React.lazy y Suspense para cargar los módulos remotos solo cuando se necesiten.
4. 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

1. Configuraste Module Federation en host y al menos dos remotos.
2. Los micro-frontends se cargan dinámicamente sin errores en la consola.
3. Compartes librerías como react sin duplicar código en el bundle.
4. Tienes un sistema de routing que maneja rutas como /analytics, /users.
5. Los equipos pueden desplegar sus remotos independientemente.
6. Manejas estados globales (ej: autenticación) sin acoplar los módulos.
7. 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.

1. Configura el entorno: Crea cuatro proyectos React (uno host, tres remotos: analytics, users, reporting). Instala webpack 5 y Module Federation Plugin en cada uno.
2. 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.
3. 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.
4. 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.
5. Agrega routing: Usa React Router para navegar entre /analytics, /users, /reporting, cargando solo el micro-frontend necesario.
6. 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.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.