Nesta aula, falaremos novamente sobre Micro-Frontends apresentando o framework single-spa que é responsável por orquestrar nossos MFEs vamos aprender como conectar diferentes frameworks dentro de single page aplications, permitindo que você divida o código por funcionalidade criando uma estrutura semelhante aos microsserviços, também iremos use a federação de módulo para compartilhar nosso código entre projetos, finalmente, usaremos redux para conectar nosso estado com todos as outras estruturas.
No final desta lição, você será capaz de aplicar esses conceitos para criar Micro-Frontends com diferentes frameworks se comunicando usando redux para gerenciar nosso estado.
Clone o repositório.
gh repo clone git@github.com:rocketseat-experts-club/Micro-Frontends-Single-SPA-2021-05-18.git
react-single-spacd no diretório.
cd react-single-spaInstale as dependências do projeto:
yarn installobs pra esse projeto nos estamos utilizando yarn workspces, por isso o yarn se torna obrigatorio
Inicie o servidor de desenvolvimento:
yarn startFinalmente, vá para localhost: 3001 no navegador de sua escolha e você está pronto para ir 🚀.
💡 Dica profissional use o branch final como guia de referência final, este branch contém o projeto final para que você possa acompanhar.
- Svelt como framework de UI
- Single-spa como orquestrador
- React como uma linguagem de IU
- Redux como gerenciador de state
- Webpack5 como module bundler + module federation plugin
- TailwindCss UI como nosso kit de ferramentas de design
Na pasta packages, temos os nossos micro front-end's:
home: projeto principal onde todos os MFE's vão se conectarnav: MFE feito com react e exportado para ohomesummary: MFE utilizando svelt tambem sendo exportado para ohomeproduct-list: MFE utilizando vanilla JS sendo exportado para ohomestore: MFE compartilhando a redux store sendo utilizado por todos os outros MFE's
 |
|---|
| Vitor Alencar |
Projetado com ♥ por vitormalencar. Licenciado sob a Licença MIT.