Nunca foi tão fácil distribuir seu component React como micro-frontends!
Passo 0: Setup projeto react
Vamos iniciar uma aplicação React usando create-react-app.
npx create-react-app my-app-react
Passo 1: Instalando ragu-cli e ragu-react-server-adapter.
Basta entrar dentro da pasta do projeto e adicionar as dependências abaixo:
yarn add ragu-cli react-server-adapterPasso 2: Exportando um component como Micro-frontends
Crie um arquivo que exporte uma função default. Essa função é o micro-frontend que será carregado.
Passo 3: Pré-visualizando seu micro-frontend
Agora basta executar ragu-cli dev passando como parâmetro o arquivo do seu micro-frontend.
Abra a URL indicada no terminal no browser e você pode visualizar seu micro-frontend.
http://localhost:3100/preview.
Passo 4: Recebendo parâmetros
Parâmetros são enviados para micro-frontends através de query parameters . Para recebê-los utilizar o primeiro parâmetro da função exportada do seu micro-frontend.
Basta passar os parâmetros customizados na URL de preview e ele refletirá na renderização do seu Micro-frontend.
Passo 5: Deploy do seu micro-frontend
Para fazer o deploy do seu micro-frontend, tudo que você vai precisar é executar o comando:
yarn ragu-cli static --file hello-mfe.js --baseurl http://mycdn.comPara realizar o deploy, basta expor todo o conteúdo da pasta .ragu-components que foi gerada pelo comando acima na url definida em --baseurl .
Exemplo completo:
https://github.com/carlosmaniero/react-demo-mfe-ragu
Pipeline de deploy no github pages:
https://github.com/carlosmaniero/react-demo-mfe-ragu/blob/master/.github/workflows/publish.yml
Caminho do micro-frontend:
https://carlosmaniero.github.io/react-demo-mfe-ragu/hello-mfe.json
Próximo passo:
Carregando micro-frontends com Ragu em 2 linhas: Sem framework
Carregando micro-frontends com Ragu em 2 linhas: Com React
