Micro serviços frontend com Module Federation e Webpack plugin

Conectando e compartilhando dependências entre frameworks

Criando seu projeto de cada dia

Antes de iniciarmos nosso micro frontend vamos ver uma aplicação WEB que consiste simplesmente em uma listagem de POSTs de um BLOG.

Vamos imaginar essa aplicação. Uma parte lida com a listagem dos Posts, outra parte lida com os detalhes do post, e uma outra parte é nosso Principal (shell) , de onde parte todas as rotas.

Essa é nossa aplicação:

Listagem dos POSTs

Detalhes dos POST

Vamos agora começar a separar nosso projeto. Para isso iremos utilizar “Module Federation ”que será configurado em nosso Webpack. Iremos utilizar também o “webpack-cli”. Portanto, execute os comandos para instalação dos mesmos:

npm i -D webpack-cli @webpack-cli/serve
npm i webpack-dev-server
npm i @module-federation/dashboard-plugin

No artigo vou trazer a “federação” de dois App em React e um em Vue. Em todos eles instale as dependências citadas. E todos eles deverão ter um arquivo “webpack.config.js” configurado. Lembrando que será necessário subir as aplicações com os devidos scripts utilizando o “webpack-cli”.

Separando nosso projeto em pequenas partes

Agora que a brincadeira fica séria. Vamos agora separar cada parte de nossa aplicação. A listagem dos posts ficará em uma aplicação Vue, os detalhes do Post ficará em uma aplicação React e nosso Principal de entrada ficará também em React.

Removendo a listagem do App Principal e movendo para Vue

Listagem dos Posts no Vue

Removendo detalhes do App Root e movendo para outro projeto React

Detalhes do Post em React

Reorganizando as estruturas Vue

Agora vamos reorganizar as estruturas de pastas tanto do projeto em vue como do projeto em React.

Em Vue, teremos a pasta src e dentro dela vamos ter a pasta componentes, como nosso componente de listagem, o arquivo App.vue, bootstrap.js e index.js. Ficando dessa forma:

app
└── src
     ├── components
     └── App.vue
     └── bootstrap.js
     └── index.js

No arqivo App.vue, vamos importar nosso componente de listagem

No arquivo index.js, importaremos apenas o bootstrap.js

import('./bootstrap');

Mas o que é esse bootstrap e porque é tão importante ? No arquivo bootstrap.js criaremos a lógica para que o Module Federation consiga resolver assincronamente nossos componentes e dependências necessárias. Por isso o importamos dessa forma, para que as dependências possam ser resolvidas de forma assíncrona.

Enão em nosso bootstrap.js temos:

Essa função que estamos exportanto será de suma importância para podermos importar nosso componente Vue dentro do componente React.

Configurando Webpack para expor nosso componente

Agora vamos expor nosso componente Vue para que possa ser consumido diretamente pelo Principal em React.

Em nosso webpack.config vamos importar ModuleFederationPlugin e as dependências do package.json

const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
const deps = require('./package.json');

Nosso entry agora será main: ‘./src/index.js’

Dentro de plugins vamos fazer seguinte configuração:

Basicamente nessa configuração estamos dando um nome ao nosso componente que será exposto. Criamos um filename para que possamos consumir ele. Fazemos uma ligação bidirecional, importando o remotes “root”. E expomos nosso componente com exposes: ./PostList: scr/bootstrap. E compartilhamos as dependências em “shared”. Pronto, nosso componente já esta pronto para ser consumido. Mas antes vamos estruturar nosso projeto de detalhes do post em React.

Reorganizando as estruturas React

Em ambos os projetos React teremos a mesma estrutura de pastas. Em postDetails será da seguinte forma:

app
└── src
     ├── PostDetails.js
     └── App.js
     └── bootstrap.js
     └── index.js

No arquivo PostDetails.js teremos o arquivo JSX com os detalhes do post. No arquivo App.js teremos a importação da aplicação principal (shell):

No arquivo bootstrap.js importamos o App.js

E em nosso index.js importamos o arquivo bootstrap de forma assíncrona.

import('./bootstrap');

Agora, em nosso webpack.config.js vamos expor nosso componente. Muito parecido com o que fizemos com nosso componente Vue.

Consumindo micro frontend

Em nosso projeto Principal, temos uma estrutura de pastas muito parecidas

app
└── src
     ├── modules
         └── PostsList.js
     └── App.js
     └── bootstrap.js
     └── index.js
     └── Principal.js

Na pasta modules deixamos o arquivo PostsList.js responsavel por importar o componente PostsList e monta-lo de forma que o React o entenda como um componente React e não mais um componente Vue.

Em App.js importamos o componente Principal

No arquivo boostrap. js seguimos a mesma importação do outro componente:

E no index.js importamos o arquivo bootstrap de forma assíncrona.

import('./bootstrap');

E em nosso arquivo Principal.js importamos os componentes que foram federados

Em nosso webpack.config.js

Está pronto. Agora temos micro serviços frontend, cada um rodando em um servidor diferente, porém todos se comunicam.

Conclusão

Micro frontend deve ser usado com certa dosagem. Ele resolve um problema de modularização, para equipes poderem trabalhar mais facilmente, mas pode infringir outros como: um módulo não estiver disponível, o que fazer ? Portanto, pense bem quando e porque utilizar micro frontend. Como qualquer tecnologia, essa abordagem não é uma bala de prata.

Github: https://github.com/becatriz/microfrontend_react_vue