/config-mf-dynamic-url-2021-10-29

Primary LanguageJavaScript

Configurando Microfrontends com Module Federation para carregar módulos remotos de URL dinâmica

Nesta aula, vamos compartilhar como fazer com que seus micro-frontends orquestrados por Module Federation possam se comunicar armazenando a URL dos módulos em variáveis de ambientes, sem precisar que eles estejam em um único repositório, um monorepo e sem precisar colocar hardcoded a url de consumo dos seus micro-frontends.

Tecnologias 🧰

  • React como uma linguagem de IU
  • Webpack5 como module bundler + module federation plugin
  • External remotes plugin para gerenciar o consumo de url
  • TailwindCss UI como nosso kit de ferramentas de design

Estrutura do Projeto 🏗

Na pasta raiz, temos os projetos:

  • header: MFE criado em ReactJS que exporta o componente header
  • content: MFE criado em ReactJS exportando o componente content
  • consumer: projeto principal que consome o header e o content

Expert
Mayck Coelho