Electron + Vite + React, template para unir essas três coisas maravilhosas!

Depois de muito tempo apegado ao desenvolvimento web, me surgiu uma necessidade de desenvolver algum app nativo para desktops em geral, como já utilizava o JS/TS a primeira coisa que me veio a mente foi: Electron.

Porém, sabemos que o Electron tem uma certa barreira inicial de configuração, relembrando muito a ideia do React que antes era necessário toda uma configuração no Webpack, Babel e até de algumas tools mais b-side como Eslint e Prettier.

Na busca por instruções de configurações acabei achando diversos repos pelo caminho, todos utilizando o famoso Create React App, mas como eu buscava performance eu acabei encontrando o repo electron-vite-react, que faz a integração perfeita entre Electron e Vite.

Foi ai que me veio a ideia de pegar esse template e aprimorar ele do meu jeitinho, adicionando as seguintes ferramentas:

• Eslint;
• Prettier;
• Tailwind;
• Sass;
• Husky;
• Commitlint.

E com isso adicionado, o setup inicial de projetos em Electron ficou muito mais poderoso.

Barreiras encontradas

Durante o desenvolvimento de um app, acabei notando que o Electron não tinha suporte para o uso do react-router-dom em produção, com isso acabei criando um contexto simples que lida com todo roteamento de componentes entre pages, funcionando semelhante com a lib, porém não sei se essa é a melhor solução para isso, após diversas pesquisas, foi o meio que encontrei para conseguir fazer, então peço que me deem sugestões de como posso resolver essa questão.

Outra questão pertinente é que alguns tipos de código meio que quebram o app somente em produção, dificultando o desenvolvimento e tendo que sempre está atento a isso (também quero ajuda de alguém que for mais experiente nisso).

Considerações finais

A soma dessas três tecnologias nos trás um grande poder na hora de desenvolver apps nativos, além de facilitar tudo pelo fato de estar usando algo que já temos contato diariamente. O template se encontra no repo electron-vite-template e quem puder contrubuir para a construção de um template ainda mais robusto será muito bem vindo.

Para o futuro pretendo lançar um script pra transformar esse template em um executável e todos terem acesso sem precisar ir diretamente em meu respositório.