Curate Feeds | Make Collections | Customize Email Briefs

Curate Feeds | Make Collections | Customize Email Briefs

Hace unos meses me tocó llevar una plataforma corporativa a una arquitectura de microfrontends: un portal que carga más de 15 módulos, cada uno con su propio repositorio, su propio equipo y su propio despliegue. Hoy esos módulos salen a producción por separado, sin coordinar ventanas de despliegue entre equipos. No voy a explicar qué es un microfrontend, de eso ya hay bastante escrito. Quiero contar lo que no sale en los tutoriales, lo que solo aparece cuando el segundo, el quinto y el décimo módulo ya están en producción. ## Primero: cuándo NO usar microfrontends Empiezo por aquí porque es la pregunta que más me hacen y la respuesta honesta es "casi nunca al inicio". Te conviene | No te conviene ---|--- Varios equipos que necesitan desplegar sin esperarse | Un solo equipo trabajando en un solo producto Dominios de negocio claramente separados (ventas, calidad, RRHH) | Pantallas que comparten casi todo el estado Módulos que crecen a ritmos distintos | Un producto que todavía está buscando su forma Una plataforma que va a vivir años | Un MVP que tiene que salir en semanas Si estás en la columna de la derecha, un monolito bien modularizado te da el 80 % del beneficio con el 20 % del costo. Los microfrontends son, sobre todo, una decisión de organización. Pagan cuando el cuello de botella es la coordinación entre equipos, no la calidad del código. ## La arquitectura, en una imagen ┌──────────────────────────────┐ usuario ───────▶│ HOST (portal) │ │ · login único (OIDC) │ │ · menú según permisos │ │ · lee el manifiesto │ └──────────────┬───────────────┘ │ carga en tiempo de ejecución ┌──────────────────────┼──────────────────────┐ ▼ ▼ ▼ remoteEntry.json remoteEntry.json remoteEntry.json ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ Ventas │ │ Calidad │ │ RRHH │ │ repo propio │ │ repo propio │ │ repo propio │ │ deploy │ │ deploy │ │ deploy │ │ propio │ │ propio │ │ propio │ └──────────────┘ └──────────────┘ └──────────────┘ El stack es Angular con **Native Federation** (`@angular-architects/native-federation`). Es el sucesor de Module Federation para el builder moderno de Angular basado en esbuild: en lugar de depender de webpack, usa los estándares del navegador (módulos ES e import maps). El host no conoce a los módulos en tiempo de compilación. Los descubre al arrancar, desde un manifiesto: // federation.manifest.json (uno por ambiente) { "ventas": "https://ventas.ejemplo.com/remoteEntry.json", "calidad": "https://calidad.ejemplo.com/remoteEntry.json" } // main.ts del host initFederation('federation.manifest.json') .then(() => import('./bootstrap')); // rutas del host { path: 'ventas', loadChildren: () => loadRemoteModule({ remoteName: 'ventas', exposedModule: './Routes' }) .then(m => m.routes) } Hasta aquí es lo que trae cualquier tutorial. Lo que sigue lo aprendí en producción. ## Lo que rompe en producción (y cómo lo resolví) ### 1. Las rutas absolutas dentro de un módulo Un módulo se desarrolla solo, en su propio puerto, donde `/detalle/42` funciona perfecto. Embebido en el portal, ese módulo vive bajo `/ventas`, y `/detalle/42` manda al usuario a una ruta que no existe. **La regla:** dentro de un módulo, toda navegación es relativa. `routerLink="detalle/42"` y `router.navigate(['detalle', id], { relativeTo: route })`. Es una línea en la guía del equipo y una revisión en cada pull request, pero ahorra el bug más repetido de toda la plataforma. ### 2. El CORS de `remoteEntry.json` El host pide el `remoteEntry.json` y los chunks de cada módulo desde otro dominio. Si el servidor del módulo no responde con `Access-Control-Allow-Origin`, el navegador bloquea la carga y el usuario ve una pantalla en blanco sin ningún error útil en la interfaz. **La regla:** el CORS de los archivos estáticos del módulo es parte de la plantilla del proyecto, no algo que cada equipo descubre por su cuenta. Todo módulo nuevo nace con la configuración de su servidor web ya resuelta. ### 3. La caché que esconde la versión nueva Despliegas, todo sale en verde, y el usuario sigue viendo la versión anterior. El culpable casi siempre es `remoteEntry.json`: es el único archivo cuyo nombre no cambia entre versiones, así que si el navegador o un CDN lo guarda, apunta a chunks viejos. **La regla:** `remoteEntry.json` se sirve sin caché; los chunks, que llevan un hash en el nombre, se pueden cachear para siempre. Así cada despliegue llega al usuario en la siguiente carga, sin pedirle a nadie que borre su caché. ### 4. Un manifiesto por ambiente… y la vez que se mezclaron Cada ambiente (pruebas y producción) tiene su propio manifiesto con las URLs de sus módulos. Una vez, una construcción manual horneó los valores por defecto y el portal de producción terminó cargando módulos de pruebas. El síntoma fue un error de CORS; la causa, un ambiente mezclado. **La regla:** el pipeline valida, antes de construir, que todas las URLs correspondan al ambiente destino, y aborta si no. Desde entonces ese error ya no puede repetirse, porque el pipeline no lo deja pasar. ### 5. Una sola versión del Design System en todos los módulos Los módulos comparten librerías: Angular, el router y el Design System propio que usan 17 aplicaciones. Native Federation las comparte como _singleton_ , pero si un módulo trae otra versión del Design System, el portal muestra dos estilos distintos en la misma pantalla o, peor, componentes que se rompen al navegar entre módulos. **La regla:** cada cambio en el Design System se publica como paquete versionado y se actualiza en _todos_ los módulos a la vez, no solo en el que lo necesitaba. Y no basta con subir el rango en el `package.json`: si la imagen se construye con `npm ci`, manda el _lockfile_ , así que hay que reinstalar y versionar el lock también. ### 6. Un módulo en el menú que todavía no existe El portal arma su menú desde un catálogo de módulos. Registrar un módulo antes de que esté desplegado en todos los ambientes hace que el portal intente cargar un `remoteEntry.json` que no existe, y esa ruta queda rota. **La regla:** cada entrada del catálogo tiene un indicador de disponibilidad. El módulo aparece en el menú con una página de "próximamente" hasta que su servicio existe donde corre el portal. ## El login: uno solo, en el host La decisión que más simplificó todo: **solo el host autentica**. El portal maneja el inicio de sesión con OIDC (Keycloak) y los módulos reciben el token ya resuelto. Ningún módulo define su propia autorización ni su propio login. Eso tiene dos efectos. Para el usuario, un solo inicio de sesión para toda la plataforma. Para los equipos, un módulo nuevo no empieza escribiendo pantallas de login, sino pantallas de negocio. Los permisos viajan en el token y el menú se arma según ellos. > Si cada módulo resuelve la seguridad a su manera, tienes tantos modelos de seguridad como módulos. Centralizarla es la única forma de poder auditarla. ## Qué haría distinto si empezara hoy * **El Design System antes que el segundo módulo.** Cada componente que un equipo construye "mientras tanto" es un componente que después hay que migrar. * **Las barreras del pipeline desde el día uno.** La validación de ambientes la agregué después de un incidente. Pudo estar desde el inicio. * **Automatizar la actualización del Design System.** Actualizar una librería en más de 15 repositorios a mano no escala: es exactamente el tipo de tarea que debe hacer un script, no una persona. * **Una plantilla de módulo.** CORS, rutas relativas, configuración de federación y pipeline listos al crear el repositorio. Cada regla de este artículo debería ser un archivo de la plantilla, no un párrafo de la guía. ## Para cerrar Los microfrontends funcionan cuando resuelven un problema de organización: equipos que necesitan avanzar sin esperarse. La parte técnica —federación, manifiestos, rutas— se resuelve en una semana. Lo difícil es todo lo demás: que cada regla quede escrita, que las que importan se conviertan en barreras automáticas y que cualquier persona del equipo pueda sostener la plataforma con lo que está documentado. Si estás evaluando microfrontends para tu equipo o ya estás peleando con alguno de estos problemas, escríbeme por LinkedIn. Me interesa saber cómo lo están resolviendo otros. _Publicado originalmente en mi blog._

At a previous job my product team introduced a business-critical microfrontend with module federation...

This series walks through an actual enterprise microfrontend platform, end to end: one Host shell, three shared platform microfrontends, a manifest-driven mechanism for mounting any number of independently-owned domain microfrontends, a full OIDC auth flow, and a CI/CD pipeline. Every code snippet in this series is real and traceable to the actual boilerplate it's built from, on GitHub. Part 1 is the decision everything else in this series depends on: **why Module Federation** , and not one of the two other credible options. ## The one requirement that rules everything else out Strip away the buzzwords, and an "enterprise microfrontend platform" only has to guarantee one thing: **a team ships a change to their part of the app without anyone else redeploying anything.** Not "in theory, with enough coordination" — actually, mechanically, true. If shipping one team's bug fix requires a platform team to cut a release, this isn't microfrontends — it's a monolith with extra steps. That single requirement rules out more than it looks like it should. It rules out compiling every team's code into one shared build (that's just a single-page app with more steps). And it rules out anything where the Host app needs to know, at its own build time, which teams' pages exist and which version of each — because "known when the Host was built" and "deployed independently of the Host" are opposites. ## The decision Use **Webpack 5 Module Federation** , in runtime-composition mode, as the platform's way of putting every team's page together into one app: * The Host ships with an empty list of remote apps built in. Instead, it looks up every team's page from a small list — a manifest — that it fetches fresh every time the app loads. * React, the shared state layer, and the shared design system are all declared as **singletons** : every team's page gets the exact same running instance of each, not its own separate copy. * "Deploying" a team's page means adding or updating one entry in that manifest. The Host itself is never rebuilt. Here's that decision as it actually exists in the repo, not as illustrative pseudocode: // apps/host/webpack.common.js module.exports = createModuleFederationConfig({ federation: { name: 'host', // remotes stay empty at build time — resolved at runtime from the // manifest. This is what makes a domain MFE's deploy a manifest // update instead of a Host rebuild. remotes: {}, shared: { react: { singleton: true, requiredVersion: '^18.2.0 || ^19.0.0' }, 'react-dom': { singleton: true, requiredVersion: '^18.2.0 || ^19.0.0' }, '@org/store': { singleton: true, requiredVersion: `^${storePkg.version}` }, '@org/components': { singleton: true, requiredVersion: `^${componentsPkg.version}` }, }, }, ... }); The Host doesn't import a single line of any team's code. At runtime, it fetches a small JSON file — `platform.manifest.json` — that maps each page's route to the URL its bundle lives at, and mounts whatever's listed there: // packages/runtime-module-federation/src/manifest-loader.ts export async function loadDomainManifest(config: PlatformConfig): Promise<ManifestEntry[]> { if (cached) return cached; const res = await fetch(config.manifestUrl); if (!res.ok) throw new Error(`Failed to load manifest from ${config.manifestUrl}: ${res.status}`); cached = (await res.json()) as ManifestEntry[]; return cached; } This is the single most important decision in the whole platform: **deploying a team's page means updating one entry in this manifest** , not rebuilding the Host. Part 5 covers the script that does that update safely. ## The other options on the table Two other approaches genuinely fit this same problem, and it's worth being clear about why each lost out here rather than just naming Module Federation as a given: Approach | How it works | Why it's not the default here ---|---|--- **Build-time composition** | The Host imports every team's code directly and bundles it all into one build, like a normal app with more folders. | A team's deploy would require rebuilding and redeploying the Host — exactly the coupling this platform exists to avoid. Ruled out outright, not just deprioritized. **Next.js Multi-Zones** | Each team ships an independently deployable Next.js app; a router at the edge stitches them together by URL prefix. | The right call if real SSR/SEO is a hard requirement. But each zone is its own separate page, not a widget sharing one React tree with the others — so login state, shared components, and shared data don't automatically carry across zones the way they do here. **single-spa** | A framework-agnostic runtime composition tool — any framework's app can mount alongside any other. | Makes real sense if an org runs Vue, Angular, and React side by side. This platform assumes every team is on React, so that extra flexibility is a cost being paid for a problem the platform doesn't have. **Module Federation** _(chosen)_ | Webpack loads each team's bundle at runtime and shares one running copy of React, the shared state layer, and the design system across all of them. | Meets the independent-deploy requirement with the least new infrastructure, and keeps every team's page working inside one shared, logged-in app. If real SSR/SEO ever becomes a hard requirement later, switching to Multi-Zones or single-spa is a contained swap — it changes how the Host and the deploy pipeline work, not the rest of the platform. ## What this buys, and what it costs **What it buys:** * A team ships by adding one entry to the manifest — no pull request against the Host, no waiting on a platform team's release train. * Every team's page uses the _same_ running copy of React, the same design system, and the same logged-in session — not a slightly different copy per team. * Nothing about this approach locks the platform into one cloud provider, CI tool, or hosting vendor. **What it costs — two real trade-offs, both handled later in this series:** 1. **The manifest becomes critical.** Every team's page is found the same way: by looking it up in that one shared list. If wherever that list lives goes down, _no_ page loads — even pages that changed nothing today. 2. **A version mismatch can slip through unnoticed.** Each team declares which version of React (and the shared libraries) their page was built against. Nothing stops that declaration from quietly drifting out of sync with what's actually running — the mismatch only shows up once a real user hits it in a real browser, not when the code is built. Both of those get a concrete, working mitigation later in this series — not just a warning label. Running several teams' pages together locally is also a bit more involved than running one single app — this platform uses a monorepo tool (Turborepo) to keep that workable, though it isn't strictly required for Module Federation to work. That's the shape of this series: the decision in this part, and then each following part is the architecture that decision leads to — the topology it produces, how login is unified across every team's page, the rules that keep it reliable, and how the whole thing actually ships. Next up: the platform's layout, the Host shell, and the three shared microfrontends every team builds against. **Next:Part 2 — Inside the Platform: Topology, Host Shell & Platform MFEs**

Microfrontend projection library — compose independently deployed applications with full interactivity

Expert full stack software engineer with Vite, Vue, Svelte, React, TypeScript, JavaScript, Node.js, C#, .NET, LangChain. Experienced in Single-Page Application pattern (SPA), Frontend/Microfrontend Ar...

Let's see how Next.js Multi Zones can make building micro frontends a breeze.

Share your videos with friends, family, and the world