Module-Federation-Angular-React-Vue

Module Federation

Projeto criando com o Shell Angular e remotes React, Angular e Vue

Veja a documentação »

Sobre o Projeto

Monolito VS Microfrontend

O que é Module Federation

Funcionalidade introduzida no Webpack 5 que permite que diferentes aplicações (ou partes delas) compartilhem módulos uns com os outros em tempo de execução, sem a necessidade de fazer um build centralizado. Isso é particularmente útil em arquiteturas de microfrontends, onde cada microfrontend pode ser desenvolvido e implantado independentemente, mas ainda assim pode consumir módulos de outros microfrontends.

Nesse projeto criamos uma aplicação onde o Shell foi desenvolvido com Angular enquanto os Remotes com React, Angular e Vue

Para exemplificar criamos essa interface, onde cada tab consome o module de um MFE

(back to top)

Remotes

Saiba mais sobre os frameworks/libs que usamos.

• 
• 
• 

(back to top)

Como começar

Instale as depencias de cada aplicação :

• mfe-angular

• mfe-react

• mfe-vue

• shell

  npm install 

Start Server

• mfe-angular

   cd mfe-angular
  npm run start

• mfe-react

   cd mfe-react
  npm run start-mfe

• mfe-vue

   cd mfe-vue
  npm run start

• shell

   cd shell
  npm run start

Contato

Linkedin - Eduarda Alves