The latest articles on Forem by Henrique Souza (@henrique_souza_971900376e). https://forem.com/henrique_souza_971900376e https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1961405%2F1d7c7c5c-c64e-4b21-960f-3b45b51f74a9.jpg https://forem.com/henrique_souza_971900376e en Henrique Souza Wed, 21 Aug 2024 18:54:00 +0000 https://forem.com/henrique_souza_971900376e/como-implementar-microfrontend-com-reactjs-41np https://forem.com/henrique_souza_971900376e/como-implementar-microfrontend-com-reactjs-41np <p><strong>Microfrontend</strong> é uma abordagem que divide uma grande aplicação em pequenos pedaço ou pequeno apps, esse conceito segue a ideia de “<em>microserviço</em>”, porém no lado do frontend. Resumidamente, o gráfico apresentado mostra como funciona uma aplicação que possui uma arquitetura microfrontend.</p> <h3> Conceitos </h3> <p>Antes de entrarmos na implementação é preciso entender alguns termos e conceitos. Existem dois termos que são bastante utilizados Host e Remotes.</p> <blockquote> <p><strong>Host</strong> é à aplicação principal e funciona com um container da aplicação. É nele que renderizamos todos os nossos microfrontends.</p> <p><strong>Remotes</strong> são os microfrontends. Aqui podemos fazer implementações de usando frameworks distintos e se preocupando somente em expor o que for necessário para o Host renderizar.</p> </blockquote> <h3> Module federation </h3> <p>É um plugin que permite compartilhar dependências entre as aplicações definindo quais módulos podem ser expostos ou consumidos.</p> <h3> Implementação </h3> <p>Para exemplificar essa implementação, estarei usando o <em><strong>react + viteJs</strong></em>.</p> <p>Setup inicial do projeto ainda não muda! Esse será o Host (container)</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft5t44t9wf9arucb4c7gd.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft5t44t9wf9arucb4c7gd.png" alt="estrutura de pasta" width="348" height="492"></a></p> <p>Vamos fazer uma configuração no projeto no arquivo <em><strong>vite.config.ts</strong></em></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2hwmdvauyj0yajipmlhs.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2hwmdvauyj0yajipmlhs.png" alt="vite.config.ts" width="574" height="448"></a></p> <p>Para o module federation estamos usando uma dependência do vite para fazer essa gestão <em><strong>@originjs/vite-plugin-federation</strong></em>. Fazemos um remote para consumir os microfrontends referenciando os arquivos que estão com os módulos exportados. No exemplo, no microfrontend está no link <em><a href="http://localhost:4173/assets/remoteEntry.js" rel="noopener noreferrer">http://localhost:4173/assets/remoteEntry.js</a></em> que é o app login.</p> <p>Agora é só adicionar o app no seu arquivo de renderização do host.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp3kpephzf5q88owvohtf.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp3kpephzf5q88owvohtf.png" alt="vite.config.ts" width="535" height="240"></a></p> <p>Fazemos a importação do microfrontend no projeto e carregamos da maneira que já conhecemos no react.</p> <p>Agora que temos nossa configuração do host finalizada, agora precisamos fazer montar um pequeno app que seria nosso remote.</p> <p>Vamos criar um outro projeto com vite e modificaremos o arquivo <em><strong>vite.config.ts</strong></em></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh3ec760mhcqi5jvq7xen.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh3ec760mhcqi5jvq7xen.png" alt="vite.config.ts" width="559" height="426"></a></p> <p>Agora com uma novidade, adicionamos o <em><strong>filename, exposes e shared</strong></em>.</p> <blockquote> <p><strong><em>Filename</em></strong> é o nome do arquivo que ficará nossos módulos exportados.</p> <p><strong><em>Exposes</em></strong> é são os componentes que queremos exportar para microfrontend.</p> <p><strong><em>Shared</em></strong> são dependências que queremos compartilhar.</p> </blockquote> <p>Mais informações estão na biblioteca <em><strong>originjs/vite-plugin-federation.</strong></em></p> <p>Após esses ajustes, precisamos realizar um build no projeto e executar com algum servidor para conseguimos pegar o arquivo.js exportado.</p> <p>Link da implementação completa <a href="https://github.com/HenriqueSouzza/microfrontend-vite" rel="noopener noreferrer">código fonte</a></p> <h3> Conclusão </h3> <p>É uma arquitetura escalável e com boas possibilidades para fazer uma modernização em projetos legados sem que precise parar toda aplicação que está em produção. É um forte aliado para os devs que tem surgido em propostas de desenvolvimento.</p> softwaredevelopment softwareengineering frontend webdev