0Pricing
Micro Frontends Architecture with Module Federation · Lección

Ejecución y depuración local de su aplicación federada

Aprenda a iniciar juntas las aplicaciones host y remotas, inspeccionar módulos federados en el navegador y depurar problemas habituales durante el desarrollo local.

Ejecución y depuración local de su aplicación federada es una lección gratuita de Micro Frontends Architecture with Module Federation en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Micro Frontends Architecture with Module Federation, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Micro Frontends Architecture with Module Federation incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Local Development Setup

A federated app is really several apps. To develop, you run each remote and the host at the same time, each on its own port.

Assigning Ports

Give every app a fixed dev-server port so the host can reliably reference each remote during development.

devServer: { port: 3001 } // remote
devServer: { port: 3000 } // host

Running Everything at Once

Manually opening many terminals is tedious. A tool like concurrently starts all dev servers with one command.

"scripts": {
  "dev": "concurrently \"npm:dev:host\" \"npm:dev:remote\""
}

Pointing the Host at Remotes

During development the host references each remote by its dev-server URL plus the exposed entry file.

remotes: {
  cart: "cart@http://localhost:3001/remoteEntry.js"
}

Inspecting remoteEntry.js

Every remote exposes a remoteEntry.js manifest. Open it directly in the browser to confirm the remote is running and to see what modules it exposes.

Using Browser DevTools

In the Network tab, watch for remoteEntry.js and the exposed module chunks loading. A 404 here is the most common federation error.

Common Error: Module Not Found

The error Cannot find module cart/Widget usually means the exposed path in the remote config does not match what the host imports. Names must match exactly.

exposes: { "./Widget": "./src/Widget" } // remote
import Widget from "cart/Widget";       // host

Common Error: Shared React Twice

If React hooks throw Invalid hook call, two React copies are loading. Confirm singleton: true on React in every app config.

Hot Reload Limitations

Changes inside a remote may not hot-reload in the host automatically. Refresh the host, or restart the remote dev server, after editing exposed modules.

Logging Federation Resolution

Set verbose webpack stats or add console logs in your bootstrap to confirm which remote and shared versions resolved at run time.

console.log("loading remote cart...");
import("cart/Widget").then(m => mount(m.default));

A Local Debug Checklist

When something breaks, check in order:

  • Are all dev servers running?
  • Does remoteEntry.js load (no 404)?
  • Do exposed names match imports?
  • Is React a singleton everywhere?

Quick Check

Test your local debugging knowledge.

Recap

You learned to run and debug federated apps locally:

  • Run host and remotes together on fixed ports
  • Use concurrently for one-command startup
  • Inspect remoteEntry.js and the Network tab
  • Fix module-not-found and double-React errors
  • Follow a quick debug checklist

Smooth local debugging speeds up MFE development.

Preguntas frecuentes

¿La lección «Ejecución y depuración local de su aplicación federada» es gratis?

Sí — el texto completo de «Ejecución y depuración local de su aplicación federada» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Micro Frontends Architecture with Module Federation, actualiza a CoddyKit PRO. El curso de Micro Frontends Architecture with Module Federation incluye 4 lecciones en total.

¿Qué aprenderé en «Ejecución y depuración local de su aplicación federada»?

Aprenda a iniciar juntas las aplicaciones host y remotas, inspeccionar módulos federados en el navegador y depurar problemas habituales durante el desarrollo local. Practicas Micro Frontends Architecture with Module Federation con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Micro Frontends Architecture with Module Federation?

No se requiere experiencia previa. Micro Frontends Architecture with Module Federation en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Ejecución y depuración local de su aplicación federada»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Micro Frontends Architecture with Module Federation?

Sí. Cada lección de Micro Frontends Architecture with Module Federation incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Configuración del proyecto
  2. Compartir módulos y componentes
  3. Creación de una aplicación federada sencilla
  4. Ejecución y depuración local de su aplicación federada
← Volver a Micro Frontends Architecture with Module Federation