Microfrontend na prática

Name: Microfrontend na prática
Rating: 4.8 (26 reviews)

Usando Webpack Module Federation

Created byRenato Matos

Last updated 2/2025

Portuguese

Portuguese [Auto],

What you'll learn

Aprender de forma prática a fazer bom uso do Webpack
Usar o framework vitest para elaborar testes e identificar gaps
Configurar o lint para realizar a análise do nosso código
Reutilizar bibliotecas e componentes usando npmjs
Criar um projeto frontend para autenticação usando ReactJs
Criar um projeto Vue3 usando a API do Google Maps
Realizar a divisão de trabalho com Microfrontends com Module Federation
Publicar o projeto usando Google Firebase
Publicar o projeto usando Docker
Criar e comparar os projetos microfrontend usando Vite Federation e Webpack Module Federation

Course content

10 sections • 105 lectures • 13h 5m total length

Agenda do curso9:15

Atenção0:40
Lembrete para a Seção 3.

Para facilitar a instalação dos pacotes, favor usar exatamente as versões abaixo.
Os pacotes devem ser instalados rigorosamente usando s seguintes versões:
npm install --save-dev webpack@5.97.1
npm install --save-dev webpack-cli@6.0.1
npm install --save-dev webpack-merge@6.0.1

Repositório no Github:
renatomatos79/livro-webpack
Comparando os Módulos CommonJS e ESM3:38
Nosso primeiro projeto usando Webpack8:02
Aprendendo a usar o arquivo de configurações15:35
Gerenciando dependências, cache e performance19:45
Separando o arquivo de configuração por ambiente14:48

Atenção0:40
Lembrete para a Seção 4.

Para facilitar a instalação dos pacotes, favor usar exatamente as versões abaixo.
Os pacotes devem ser instalados rigorosamente usando s seguintes versões:
npm install -D webpack@5.97.1 webpack-cli@6.0.1 webpack-merge@6.0.1
npm install -D vitest@2.1.8 @vitest/coverage-v8@2.1.8
npm install --save-dev --save-exact prettier
npm install --save-dev husky lint-staged
npx husky init
npm init @eslint/config@latest
Criar a estrutura do novo projeto a ser exportado para o repositório npmjs5:49
Uso dos arquivos "mjs" e configuração do package.json5:25
Criando os primeiros testes usando viteste9:38
Validando os nossos testes usando vitest coverage10:18
Aperfeiçoando os testes de cobertura por meio do arquivo vites.config.js7:03
Formatando nosso código usando Prettier13:02
Automatizando tarefas integrando Prettier com Husky8:36
Adicionando eslint ao nosso projeto e customizando regras24:06
Alteração do projeto de commonjs para module4:43
Conversão para Typescript - Introdução e TS Playground9:36
Conversão para Typscript - Criando um projeto exemplo8:07
Conversão do projeto para Typescript9:12
Criando o webpack.common.config.js para carregar o módulo TS-Loader6:50
Configurando webpack.dev.config.js10:56
Configurando webpack.prod.config.js4:36
Ajustando webpack e tsconfig para exportação do projeto10:11
Refatorando o tsconfig em: DEV, PROD e testando nosso pacote5:59
Criação da nossa conta no repositório npmjs.com1:46
Criação da nossa organização onde iremos publicar os nossos pacotes2:21
Gerenciando o controle de versão patch, minor e major usando scripts3:48
Otimização do script de deploy e adição do arquivo readme.md11:39
Criando um projeto javascript simples para testar a nossa biblioteca8:02
Criando um projeto Typescript simples para testar a nossa biblioteca5:24

Atenção0:40
Lembrete para a Seção 5.

Para facilitar a instalação dos pacotes, favor usar exatamente as versões abaixo.
Os pacotes devem ser instalados rigorosamente usando s seguintes versões:
devDependencies
npm install -D @babel/core@7.12.3
npm install -D @babel/plugin-transform-runtime@7.12.1
npm install -D @babel/preset-env@7.12.1
npm install -D @babel/preset-react@7.12.1
npm install -D babel-loader@9.2.1
npm install -D html-webpack-plugin@5.6.3
npm install -D webpack@5.97.1
npm install -D webpack-cli@6.0.1
npm install -D webpack-dev-server@5.2.0
npm install -D webpack-merge@6.0.1
dependencies
npm install react@19.0.0
npm install react-dom@19.0.0
npm install @renato-matos/validation-libs@1.0.2
Criação da estrutura do projeto React + validação do setup16:22
Construindo o componente CPF8:53
Melhorando o visual do componente CPF13:09
Configurando o webpack para os ambientes: desenvolvimento e produção10:24
Validando o componente antes de publicá-lo5:21
Publicando o componente CPF3:57
Testando nosso componente React em uma App não React4:12
Adicionando novos plugins ao componente: css-loader, style-loader e mini-css-ext13:26
Testando o novo componente CPF-Styled-CSS5:31

Atenção0:40
Lembrete para a Seção 6.

Para facilitar a instalação dos pacotes, favor usar exatamente as versões abaixo.
Os pacotes devem ser instalados rigorosamente usando s seguintes versões:

Módulo de autenticação e container construidos em React:
devDependencies
npm install -D @babel/core@7.12.3
npm install -D @babel/plugin-transform-runtime@7.12.1
npm install -D @babel/preset-env@7.12.1
npm install -D @babel/preset-react@7.12.1
npm install -D babel-loader@9.2.1
npm install -D html-webpack-plugin@5.6.3
npm install -D mini-css-extract-plugin@2.9.2
npm install -D style-loader@4.0.0
npm install -D webpack@5.97.1
npm install -D webpack-cli@6.0.1
npm install -D webpack-dev-server@5.2.0
npm install -D webpack-merge@6.0.1
dependencies
npm install react@19.0.0
npm install react-dom@19.0.0
npm install react-icons@5.4.0
npm install react-router-dom@6.29.0

Módulo Dashboard Vue:
devDependencies
npm install -D @babel/core@7.12.3
npm install -D @babel/plugin-transform-runtime@7.12.1
npm install -D @babel/preset-env@7.12.1
npm install -D @babel/preset-react@7.12.1
npm install -D babel-loader@9.2.1
npm install -D css-loader@5.0.0
npm install -D dotenv-webpack@8.1.0
npm install -D file-loader@6.2.0
npm install -D sass@1.79.4
npm install -D sass-loader@16.0.2
npm install -D style-loader@2.0.0
npm install -D vue-loader@17.3.1
npm install -D vue-style-loader@4.1.2
npm install -D webpack@5.97.1
npm install -D webpack-cli@6.0.1
npm install -D webpack-dev-server@5.2.0
npm install -D webpack-merge@6.0.1
dependencies
npm install vue@3.2.31
npm install vue3-google-map@0.21.0
Introdução ao Módule Federation3:46
Overview da nossa aplicação, componentes e frameworks4:08
Estrutura de pastas do nosso projeto1:55
Auth - Setup projeto de autenticação4:24
Auth - Boostrap e Componente de Login (SignIn)6:42
Auth - Componente Cadastre-se (SignUp)4:49
Auth - Manipulando rotas usando react-router-dom "v6"6:50
Auth - Adicionando ModuleFederationPlugin e mapeando onSignIn event14:12
Auth - Adição useNavigate hook e ajustes finais para integração7:23
Contianer - Setup projeto Container5:54
Container - Integração com o módulo de autentiação10:39
Container - Inclusão da Header Navbar e botão para toggle Login/Logout13:14
Container - Ajustes nas rotas de navigação3:38
Dashboard - Setup módulo Vue Dashboard12:28
Dashboard - Setup Module Federation2:35
Dashboard - Integração com o container principal e inclusão da nova rota5:00
Dashboard - Customização do dahsboard com inclusão do header padrão5:09
Dashboard - Adicionando Svg/Icons e customizando nossa barra de navegação16:02
Dashboard - Componente Filter6:16
Dashboard - Implementando a funcionalidade "Filter Toggle"7:02
Dashboard - Implementando a funcionalidade "Filtered Buttons"10:05
Dashboard - Overview sobre o funcionamento do componente Card "Filter Item"13:26
GoogleMaps: Google Cloud Project Setup4:36
GoogleMaps: Associar a Google Maps API ao projeto1:49
GoogleMaps: Mapeando ApiKey em uma System Env Var1:57
GoogleMaps: Setup GoogleMapsApi em nosso dashboard vue project7:43
GoogleMaps: Adicionando as delegacias ao nosso Dashboard8:03
GoogleMaps: Criando um poligono para destacar a área entre as delegacias3:13
GoogleMaps: Adicionando os carros ao nosso Dashboard7:13
GoogleMaps: Adicionando as bikes ao nosso Dashboard3:20
GoogleMaps: Adicionando os trucks ao nosso Dashboard2:21
GoogleMaps: Refatorando o código para renderizar objetos3:32
GoogleMaps: Mapeamento do botão Refresh5:56
Shared: Overview sobre compartilhamento de módulos7:21
Shared: Compartilhando dependências entre os projetos Auth, Dash e Container9:47

Overview0:17
O que é o Vite?
O Vite é uma ferramenta de build e desenvolvimento frontend, criada para ser mais rápida e eficiente que ferramentas tradicionais como Webpack

O que é o Vite Federation?
O Vite Federation é uma implementação do conceito de Module Federation (introduzido no Webpack 5) para Vite.

Esta seção foi criada com objetivo de compararmos o que fizemos com Webpack Module Federation, mas desta vez usando Vite Federation.
Setup dos projetos Auth, Dashboard e Container usando Vite9:27
Auth: Converter o projeto para Typescript21:13
Auth: Ajustes para resolução de warnings2:57
Container: Converter o projeto para Typescript11:43
Container: Ajustes no projeto para uso do componente AuthApp10:04
Dashboard: Converter o projeto para Typescript13:50
Container: Ajustando projeto container para carregar o módulo Dashboard4:04

Requirements

Para construir nossa aplicação, é fundamental que você siga exatamente as versões dos pacotes mencionadas neste projeto, evitando problemas relacionados à descontinuidade de funcionalidades. Ter alguma noção de desenvolvimento web será útil caso você deseje entender os detalhes de como cada módulo foi construído.
No entanto, este curso também pode ser encarado como uma visão geral (overview), ideal para ajudá-lo a se familiarizar com conceitos essenciais na criação de aplicações web baseadas em Microfrontends.
Para este curso, utilizei Windows 10, Node.js 22, React DOM 19, Vue 3 e a versão gratuita do IDE WebStorm.
Para garantir que tudo funcione perfeitamente, vou criar uma nova instância de uma máquina Windows, completamente limpa, para que possamos realizar o setup juntos, passo a passo.
Também é preciso ter noção básicas de desenvolvimento web

Description

Imagine que você está construindo um prédio grande, mas em vez de ter apenas uma equipe trabalhando em todo o projeto, várias equipes trabalham em partes separadas: uma constrói os apartamentos, outra o estacionamento, outra o lobby. Cada equipe pode fazer sua parte de forma independente, usando suas próprias ferramentas e estilos, mas no final, tudo é montado para parecer um prédio único.

O Webpack Module Federation faz exatamente isso, mas no mundo do desenvolvimento web.

As principais vantagens que posso destacar ao se adotar o uso do Module Federation na construção de projetos web são as seguintes:
Em vez de criar uma única aplicação gigante, você divide o sistema em módulos independentes.
Cada módulo (ou microfrontend) é responsável por uma parte específica da aplicação, como o login, o carrinho de compras ou o painel de usuário.
Cada módulo pode ser criado usando qualquer framework ou até mesmo nenhum (React, Vue, Angular, ou JavaScript puro).
Eles são desenvolvidos, versionados e implantados separadamente, como aplicativos pequenos.
O Webpack Module Federation permite que esses módulos sejam carregados em tempo de execução, diretamente de outros servidores ou repositórios.
Ele evita duplicação de dependências ao compartilhar bibliotecas (como React ou Vue) entre os módulos.
O usuário final não vê que a aplicação é dividida. Tudo parece e funciona como um único sistema.
Isso é possível porque o Webpack monta os módulos dinamicamente e os apresenta como se fossem parte de um único aplicativo.

Who this course is for:

Para você que ainda não fez uso do Webpack, e tem apenas um conhecimento básico sobre sua utilização, ou está acostumado a desenvolver soluções monolíticas em um único repositório. Acredito que este curso é ideal para ajudá-lo a criar soluções desacopladas. Nele, aprenderemos a construir, do zero, uma solução baseada em Microfrontends, utilizando o Webpack Module Federation.
Para desenvolvedores web que desejam dar um próximo passo e aprender a criar e publicar bibliotecas e componentes usando repositório npmjs e então aplicá-los em diversos projetos.
Ou ainda para aqueles que desejam criar suas aplicações e combiná-las com diversos frameworks, aproveitando o melhor de cada tecnologia.
Ou ainda, se você está migrando seu projeto e deseja manter o legado em funcionamento enquanto desenvolve novos módulos em paralelo, este curso mostrará como integrá-los em uma única solução de forma eficiente.
Ao final, você será capaz de criar soluções escaláveis e integradas, que combinam múltiplas tecnologias em um único sistema funcional.

Microfrontend na prática

What you'll learn

Explore related topics

Course content

Introdução1 lecture • 9min

Preparando nosso ambiente de trabalho2 lectures • 19min

Webpack Introdução6 lectures • 1hr 2min

Gerenciador de pacotes npmjs - Trabalhando com Bibliotecas24 lectures • 3hr 8min

Gerenciador de pacotes npmjs - Trabalhando com componentes10 lectures • 1hr 22min

Module Federation36 lectures • 3hr 53min

Google Firebase5 lectures • 34min

Docker5 lectures • 35min

Docker conceitos8 lectures • 50min

Vite Federation8 lectures • 1hr 14min

Requirements

Description

Who this course is for: