0Pricing
Micro Frontends Architecture with Module Federation · Aula

Executando e Depurando seu Aplicativo Federado Localmente

Aprenda a iniciar aplicativos host e remotos juntos, inspecionar módulos federados no navegador e depurar problemas comuns durante o desenvolvimento local.

Executando e Depurando seu Aplicativo Federado Localmente é uma aula grátis de Micro Frontends Architecture with Module Federation no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Micro Frontends Architecture with Module Federation, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Micro Frontends Architecture with Module Federation inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em 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.

Perguntas Frequentes

A aula “Executando e Depurando seu Aplicativo Federado Localmente” é grátis?

Sim — o texto completo de “Executando e Depurando seu Aplicativo Federado Localmente” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Micro Frontends Architecture with Module Federation, atualize para CoddyKit PRO. O curso de Micro Frontends Architecture with Module Federation inclui 4 aulas no total.

O que vou aprender em “Executando e Depurando seu Aplicativo Federado Localmente”?

Aprenda a iniciar aplicativos host e remotos juntos, inspecionar módulos federados no navegador e depurar problemas comuns durante o desenvolvimento local. Você pratica Micro Frontends Architecture with Module Federation com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Micro Frontends Architecture with Module Federation?

Nenhuma experiência prévia é necessária. Micro Frontends Architecture with Module Federation no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Executando e Depurando seu Aplicativo Federado Localmente”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Micro Frontends Architecture with Module Federation?

Sim. Cada aula de Micro Frontends Architecture with Module Federation inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do projeto
  2. Compartilhamento de módulos e componentes
  3. Construção de uma aplicação federada simples
  4. Executando e Depurando seu Aplicativo Federado Localmente
← Voltar para Micro Frontends Architecture with Module Federation