💻 ModuleFederation

Usando ModuleFedaration para compartilhar micro-frontends entre si e fazer uma aplicação completa.

❓ O que é module federation?

É um jeito de compartilhar informações entre aplicações, na qual cada aplicação pode exportar a funcionalidade que deseja consumir ou compartilhar. Essas aplicações tambem são conhecidas como micro-frontends.

O projeto possui 3 micro-frontends: Pokemon, Auth e Data. Cada um deles tem sua responsabilidade, no qual o micro front-end de Pokemon faz uma lista do pokemons, o auth cuida da parte de autenticação e o data fornece as informações que são coletadas da api e distribui atraves do context api.

Todo micro-frontend tem suas proprias dependencias e seu arquivo webpack.config.js, e nesse arquivo que vão ser definidos quais informações vão ser compartilhadas e recebidas de outros micro-frontends.
Para compartilhar informações dentro desse arquivo primeiro você ira definir um array de dependências chamado plugins, depois você tem que importa a classe moduleFederationplugin. Apos isso voce pode instanciar o moduleFederationplugin e passar as configurações dejesadas como argumentos.

Exemplo:

Não é obrigatorio, mas é bom colocar pois esse nome vai ser usado para consumi-lo.

Serve para expor os modulos para outras aplicações. No lugar da chave é colocado o nome que ele vai ser chamado quando ele for consumido, no valor coloca o caminho para chegar nele na sua aplicação.

É usado para mostrar o que vai ser consumido nesse micro-frontend. Então na chave você passa o nome do module que vai ser consumido e no valor voce passa onde esta sendo compartilhado esse valor.

Primeiro tem que definir o module que vai ser consumido no remotes nas configurações do webpack.config.js que ja foi explicado anteriormente. Agora você entra no arquivo que você deseja consumir o module e importe o module com a função desejada.

Exemplo do webpack.config.js:

Exemplo consumindo o modulo: