vyseclown/microfrontend-module-federation

Criando Micro-Front-Ends com Webpack5 Module Federation

Criar 3 micro-front-ends com compartilhamento de código de forma bidirecional, a ideia é de no final da dessa aula ter um modelo de e-commerce bem simples onde teremos a mesma experiência sendo criada e compartilhada entre os nossos MFE's, compartilhando código em tempo de execução sem perda de desempenho.

Aplicação Final 🎬

Observe aqui que estamos navegando em diferentes servidores, mas a experiência final.

Instale as dependências do diretório principal do projeto:

|⚠️ usaremos yarn para gerenciar nossos pacotes

yarn install

em seguida, entre no diretório dos nossos MFE's

cd  shared-routing

Instale as dependencias

yarn install

Inicie o servidor de desenvolvimento:

yarn  start

Com isso, você terá os aplicativos em execução em:

• localhost:3000 (aplicativo host) - shell
• localhost:3001 (aplicativo autônomo remoto) - ProductList
• localhost:3002 (aplicativo autônomo remoto) - ProductDetails

Abra uma dessas portas no navegador de sua escolha e você estará pronto para integrar com o aplicativo inicial 🚀.

Estrutura do Projeto 🏗

Conforme descrito, criaremos uma estrutura MFE com hosts host bidirecionais podemos ver aqui o gráfico de como nossos MFE's vão ser divididos

Na pasta Container/shared-routing, temos os nossos MFE's:

• Shell: MFE Onde vamos criar o nosso application shell
• ProductList /: MFE responsavel pela listagem de produtos
• ProductDetails /: MFE responsavel pelo detalhamento de produtos

├── ProductDetails
│   ├── package.json
│   ├── public
│   ├── src
│   └── webpack.config.js
├── ProductList
│   ├── package.json
│   ├── public
│   ├── src
│   └── webpack.config.js
├── Shell
│   ├── package.json
│   ├── public
│   ├── src
│   └── webpack.config.js
├── package.json
└── yarn.lock

Ferramentas Utilizadas 🧰

• React como uma linguagem de IU
• Webpack5 como module bundler
• Prettier como formatador de código
• Lerna para gerenciar o monorepo
• TailwindCss UI como nosso kit de ferramentas de design