Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lucaspdroz/mfe-demo-uhuutalks
2/12/2020
https://github.com/lucaspdroz/mfe-demo-uhuutalks
Last synced: 5 days ago
JSON representation
2/12/2020
- Host: GitHub
- URL: https://github.com/lucaspdroz/mfe-demo-uhuutalks
- Owner: lucaspdroz
- License: mit
- Created: 2022-12-02T20:04:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-02T23:04:59.000Z (about 1 month ago)
- Last Synced: 2024-12-03T00:19:02.408Z (about 1 month ago)
- Language: JavaScript
- Size: 645 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Criando seu primeiro MFE
Para facilitar as coisas usaremos um template que já possui webpack configurado com Plugin de
importação e exportação de arquivos chamado `ModuleFederationPlugin`
> pnpx create-mf-app
## Passos (faça esses passos 2x uma para remoto e outra para host)
### Passo 1:
Escolha o nome do seu app
### Passo 2:
Escolha o tipo do seu app (pode ser uma aplicação / API ou Biblioteca), nesse caso iremos com aplicação
### Passo 3:
Escolha a porta de saída do seu app
> PS: Lembre-se de não usar a mesma ou uma porta já utilizada para evitar reconfigurar webpack e tudo mais
### Passo 4:
Escolha a tecnologia do seu app (usremos React, mas sinta-se a vontade para experimentar os outros)
### Passo 5:
Escolha a linguagem (usaremos JS por simplicidade, há forma de exportar as tipagens do Typescript, mas demanda um pouco mais do tempo do que a proposta da talk)
### Passo 6:
Escolha o modelo css (usaremos o default)
# Done
```sh
▶️ cd appname
▶️ npm install
▶️ npm start
ou
▶️ cd appname
▶️ yarn
▶️ yarn start
```
## No app remote
Crie seu componente React normalmente
## Exportando o Componente
No seu `webpack.config.js` na raíz do projeto, busque pelo objeto `plugins` e na prorpieade `exposes`.
O `exposes` é o responsável por expor o nosso componente para fora da aplicação
Lembre-se
Primeiro parâmetro exportação Nomeada do componente
Caminho absoluto dentro da aplicação (usando a extensão do arquivo)
exemplo:
```sh
"./MyComponent": "./src/MyComponent.jsx",
```
> PS: atente-se ao nome dentro da propriedade `name` em `ModuleFederationPlugin`, pois usaremos posteriormente
## No app host
Agora vamos importar o componente
## Importar o Componente
primeiro padâmetro, busque no nome do remote, importe usando o padrão `nome@url:PORT/fileNameExport.js`
exemplo:
```sh
remote:'remote@http://localhost:8082/remotesEntry.js'
```
Agora no projeto, busque pelo arquivo onde você deseja adicionar o MFE, e importe-o dessa forma:
```js
import MeuComponent from 'remote/MyComponent'
```
### Utilizando o componente
Você pode usar como um componente normal escrito em JSX, porém são boas práticas e prevenção de erros usar a importação de módulos asincronas do React, para ter tolerância a falhas é recomendado uma classe em React para tratar o erro
## Gerando o Estatico
Em `remote` rode
> yarn build
Agora você deve servir a pasta `/dist`
Recomendo o uso da ferramenta [`http-server`](https://www.npmjs.com/package/http-server) para servir os estaticos localmente