Como Criar um Microfrontend com React.js (Explicado de Forma Simples)

Como Criar um Microfrontend com React.js (Explicado de Forma Simples)

Você já ouviu falar em microfrontend? Imagine um grande site sendo dividido em várias partes pequenas, e cada parte sendo feita por um time diferente. É como montar um Lego: cada peça é independente, mas juntas formam algo completo. Neste artigo, vou te mostrar como criar um microfrontend com React.js, passo a passo e com exemplos simples para quem está começando.

---

O que é um Microfrontend

Um microfrontend é uma forma de dividir um grande aplicativo web em vários aplicativos menores, mas que funcionam juntos. Cada microfrontend pode ter seu próprio código, lógica, design e até ser feito em versões diferentes do React ou até em outro framework.

Exemplo básico de divisão:

• app-header → mostra o cabeçalho do site
• app-products → mostra a lista de produtos
• app-cart → mostra o carrinho de compras

Todos esses aplicativos são carregados na mesma página final, parecendo um único site integrado.

---

Por que usar Microfrontends

• Escalabilidade: cada time pode trabalhar em uma parte sem interferir nas outras.
• Facilidade de manutenção: atualizar um módulo sem quebrar o restante.
• Reaproveitamento: o mesmo microfrontend pode ser usado em vários projetos.
• Deploy independente: você pode publicar um microfrontend sem precisar mexer nos outros.

---

Criando um Microfrontend com React.js

Vamos montar um exemplo simples com dois apps React:

• app-main → container principal
• app-header → microfrontend com o cabeçalho

Passo 1: Criar o projeto principal

npx create-react-app app-main  
cd app-main  
npm start  

---

Passo 2: Criar o microfrontend

npx create-react-app app-header  
cd app-header  
npm start  

Em src/App.js:

import React from "react";

function App() {
  return (
    <header style={{ background: "#282c34", padding: "20px", color: "white" }}>
      <h1>Meu Cabeçalho Microfrontend</h1>
    </header>
  );
}

export default App;

---

Passo 3: Adicionar Module Federation no app-header

Vamos usar o Module Federation, recurso do webpack que permite compartilhar código entre aplicações.

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev  

Crie o arquivo webpack.config.js no app-header:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  mode: "development",
  devServer: {
    port: 3001,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "app_header",
      filename: "remoteEntry.js",
      exposes: {
        "./Header": "./src/App.js",
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

---

Passo 4: Configurar o container principal (app-main)

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev  

Arquivo webpack.config.js no app-main:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  mode: "development",
  devServer: {
    port: 3000,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "app_main",
      remotes: {
        app_header: "app_header@http://localhost:3001/remoteEntry.js",
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

Edite src/App.js no app-main:

import React, { Suspense } from "react";

const Header = React.lazy(() => import("app_header/Header"));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Carregando...</div>}>
        <Header />
      </Suspense>
      <main>
        <h2>Conteúdo principal do site</h2>
      </main>
    </div>
  );
}

export default App;

---

Passo 5: Rodar as aplicações

1. Inicie o app-header:

npm run start

2. Depois, inicie o app-main:

npm run start

Acesse http://localhost:3000 e verá o microfrontend funcionando dentro do app principal.

---

Dicas Extras

• Você pode criar vários microfrontends: menu, login, produtos, etc.
• Cada equipe pode trabalhar em um app separado.
• É possível misturar frameworks (React, Vue, Angular).
• Com o Module Federation, dá para compartilhar bibliotecas como React e React DOM.

---

Conclusão

Criar microfrontends com React.js é uma das formas mais modernas e escaláveis de desenvolver grandes aplicações web. Mesmo que pareça difícil no início, basta entender que cada parte é um pequeno aplicativo independente que trabalha em conjunto.
Com o tempo, é possível ter times diferentes atualizando e publicando módulos sem pisar no código do outro — esse é o poder dos microfrontends!