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.
- 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.
Evalua tu comprension
Completa el quiz interactivo de arriba para ganar XP.
