Eseguire e sottoporre a debug localmente l’app federata
Impari ad avviare insieme le app host e remote, ispezionare i moduli federati nel browser e risolvere i problemi comuni durante lo sviluppo locale.
Eseguire e sottoporre a debug localmente l’app federata è una lezione Micro Frontends Architecture with Module Federation gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Micro Frontends Architecture with Module Federation, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Micro Frontends Architecture with Module Federation include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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 } // hostRunning 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"; // hostCommon 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.jsload (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
concurrentlyfor one-command startup - Inspect
remoteEntry.jsand the Network tab - Fix module-not-found and double-React errors
- Follow a quick debug checklist
Smooth local debugging speeds up MFE development.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 12
- Lezioni
- 48
Domande Frequenti
La lezione «Eseguire e sottoporre a debug localmente l’app federata» è gratuita?
Sì — il testo completo di «Eseguire e sottoporre a debug localmente l’app federata» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Micro Frontends Architecture with Module Federation, passa a CoddyKit PRO. Il corso Micro Frontends Architecture with Module Federation include 4 lezioni in totale.
Cosa imparerò in «Eseguire e sottoporre a debug localmente l’app federata»?
Impari ad avviare insieme le app host e remote, ispezionare i moduli federati nel browser e risolvere i problemi comuni durante lo sviluppo locale. Eserciti Micro Frontends Architecture with Module Federation con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Micro Frontends Architecture with Module Federation?
Non è richiesta alcuna esperienza precedente. Micro Frontends Architecture with Module Federation su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Eseguire e sottoporre a debug localmente l’app federata»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Micro Frontends Architecture with Module Federation?
Sì. Ogni lezione Micro Frontends Architecture with Module Federation include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione e setup del progetto
- Condivisione di moduli e componenti
- Creazione di una semplice app federata
- Eseguire e sottoporre a debug localmente l’app federata