Sobre • Ferramentas • Configurações • Como executar • Recomendações e Explicações • Visualização • Licença • Linguagens
É uma aplicação que foi desenvolvida para fins de estudo da arquitetura de micro-frontends, nela utilizei o webpack e module federation para tratar os mfe's
As seguintes ferramentas foram usadas na construção do projeto:
- React
- Typescript
- Webpack & Module Federation
- Javascript
- Redux & Redux Toolkit
- Styled Component
- Workspaces
O projeto possui configurações com modos de ambientes.
Ex.: Development, Staging, Production.
As configurações de ambiente já estão adicionadas ao projeto, então para faze-lo funcionar, basta instalar as dependências na raiz do projeto e executar
O projeto irá utilizar as portas:
3000 & 3001 & 3002
Shell - Shell / Host / Container / Consumer.
Esses são os nomes mais comuns que você irá encontrar, todos eles tem o mesmo objetivo, que é para englobar os outros projetos.
Mfe1 - Compartilho uma página com alguns cards, nele importo um componente da shell e caso a shell não esteja executando, um mock entra no lugar do componente.
Mfe2 - Se dá pela utilização de um estado do redux disparado diretamente da Shell, conseguindo compartilhar o estado da aplicação, poderia ser feito também com ContextApi, adicionando a instância da shell no proprio remote e alterar o caminho absoluto para o do module-federation.
Ex.: import { AuthProvider, useAuth } from '~/hooks/auth'
Para
Ex.: import { AuthProvider, useAuth } from 'shell/hooks/auth'
Deve ser feito para os dois.
Basta fazer os seguintes passos...
- Basta instalar as dependências na raiz do projeto usando:
yarn install
Não se preocupe, pois o workspaces irá fazer todo o trabalho de instalar as dependências de cada projeto.
- E para rodar o projeto:
yarn dev
Quando executado, irá abrir 3 instâncias de Webpack DevServer, uma para cada projeto.
O projeto está utilizando a arquitetura de mono-repo somente para facilitar o entendimento.
Porém, caso precise criar uma arquitetura parecida, o ideal é executar cada projeto separadamente, e não acoplar itens de um mfe para outro, pois caso um mfe fique offline o outro que está utilizando-o como dependência irá ficar off até que o outro torne a ficar online novamente.
Isso ocorre pois o projeto x usa como dependência o projeto y, então, logo quando o modulo não é encontrado acontece um error e deixa de funcionar.
Existe diversas formas para tratar esse problema, porém o ideial é não segregar valor de um para outro.
Ex.: Error Boundaries, Mock do component e etc...
O mais utilizado é o Error Boundaries.
Página de Login - Shell.
Projeto em execução.
Este projeto esta sobe a licença MIT.
Feito com ❤️ por Alan Neres 👋🏽 Entre em contato!
- Solved webpack.config's