تشغيل تطبيقك الاتحادي وتصحيح أخطائه محليًا

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.

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

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

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

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.

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

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.

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

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.

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

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?

Test your local debugging knowledge.

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.