Este é um projeto de estudo sobre Microfrontends, desenvolvido com o objetivo de explorar e compreender os conceitos associados a esta arquitetura. Microfrontend é uma abordagem arquitetônica que possibilita a divisão de uma aplicação monolítica em partes menores, independentes e autônomas, proporcionando benefícios como escalabilidade, manutenção facilitada e desenvolvimento paralelo.
O projeto consiste em uma aplicação web dividida em módulos independentes, cada um representando uma funcionalidade específica. Cada módulo é um Microfrontend, desenvolvido e mantido separadamente, permitindo que a equipe trabalhe de forma isolada em suas respectivas áreas sem afetar outras partes do sistema.
- Vite: Utilizado com o plugin vite-plugin-federation para controle de Microfrontends.
- Tailwind CSS: Utilizado para estilizar a aplicação.
- TypeScript: Implementado para tipagem forte e uma experiência de desenvolvimento aprimorada.
- React: Empregado para a construção de componentes modulares e reutilizáveis.
O projeto possui uma estrutura intuitiva, com os principais diretórios sendo:
/host: O Microfrontend "host" é o componente principal desenvolvido em React. Ele contém o componente Home (que inclui a ProductList, Navbar e AppRoutes)./order-app: Componente secundário desenvolvido em React. Ele abriga os componentes Checkout e Orders./product-app: Outro componente secundário desenvolvido em React. Ele contém o componente ProductDetails.
- Instalar Dependências: Execute
pnpm installpara instalar as dependências do projeto. - Iniciar Servidor do Microfrontend host: Execute
pnpm run dev:hostspara iniciar o servidor do host. - Construir Remotos: Execute
pnpm run build:remotespara construir os Microfrontends remotos. - Iniciar Servidores dos Microfrontends remotos: Execute
pnpm run serve:remotes- order-app: http://localhost:5001
- product-app: http://localhost:5002
Visite http://localhost:5000 para visualizar o projeto no seu navegador.
Este projeto está licenciado sob a Licença MIT.