0Pricing
Micro Frontends Architecture with Module Federation · Leçon

Exécuter et déboguer votre application fédérée localement

Apprenez à démarrer ensemble les applications hôte et distante, à inspecter les modules fédérés dans le navigateur et à déboguer les problèmes courants lors du développement local.

Exécuter et déboguer votre application fédérée localement est une leçon Micro Frontends Architecture with Module Federation gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Micro Frontends Architecture with Module Federation, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Micro Frontends Architecture with Module Federation comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Exécuter et déboguer votre application fédérée localement » est-elle gratuite ?

Oui — le texte complet de « Exécuter et déboguer votre application fédérée localement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Micro Frontends Architecture with Module Federation, passe à CoddyKit PRO. Le cours Micro Frontends Architecture with Module Federation comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Exécuter et déboguer votre application fédérée localement » ?

Apprenez à démarrer ensemble les applications hôte et distante, à inspecter les modules fédérés dans le navigateur et à déboguer les problèmes courants lors du développement local. Tu pratiques Micro Frontends Architecture with Module Federation avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Micro Frontends Architecture with Module Federation ?

Aucune expérience préalable n'est requise. Micro Frontends Architecture with Module Federation sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Exécuter et déboguer votre application fédérée localement » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Micro Frontends Architecture with Module Federation ?

Oui. Chaque leçon Micro Frontends Architecture with Module Federation inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Configuration du projet
  2. Partage de modules et de composants
  3. Créer une application fédérée simple
  4. Exécuter et déboguer votre application fédérée localement
← Retour à Micro Frontends Architecture with Module Federation