🚀 Deploy de projetos React: do código local à produção
Desenvolver uma aplicação React é apenas uma parte do processo. Para que ela deixe o ambiente local e fique disponível para usuários reais, é necessário preparar, gerar o build e configurar corretamente a publicação.
⚙️ 1. Prepare o projeto
Antes do deploy, revise título, favicon, caminhos de recursos e configurações do Vite. Se a aplicação for publicada em um subdiretório, o parâmetro base também precisa refletir esse caminho. Essa etapa ajuda a evitar problemas com assets e URLs após a publicação.
📦 2. Gere o build de produção
Em projetos React com Vite, o build transforma a aplicação em arquivos otimizados para produção e gera a pasta dist. É esse resultado que será servido pela hospedagem, e não os arquivos usados durante o desenvolvimento.
Uma boa prática é validar o resultado localmente com o preview de produção. Assim, problemas que só aparecem depois do build podem ser identificados antes da publicação.
🔐 3. Configure as variáveis de ambiente
Aplicações que consomem APIs normalmente precisam de URLs e configurações diferentes entre desenvolvimento e produção. Separar esses valores por ambiente organiza o projeto e evita alterações desnecessárias no código.
No Vite, as variáveis destinadas ao código do cliente seguem a convenção VITE_. Informações sensíveis não devem ser expostas em variáveis incorporadas ao bundle do frontend.
🌐 4. Publique frontend e backend
Quando o React depende de uma API, o deploy não termina ao publicar o frontend. A API também precisa estar acessível em produção, e o frontend deve apontar para o endereço correto.
Uma estratégia comum é manter frontend e API em repositórios separados e publicar cada parte conforme sua responsabilidade. A Vercel permite conectar um repositório Git e automatizar novas publicações a partir de commits.
🧭 5. Atenção às rotas de uma SPA
Um problema comum aparece quando o usuário acessa diretamente uma rota interna ou atualiza a página. Em uma Single Page Application, essa rota pode não existir fisicamente no servidor.
Por isso, a hospedagem precisa direcionar as requisições apropriadas para o index.html, permitindo que o React controle a navegação. Na Vercel, isso pode ser resolvido com regras de rewrite.
🚀 Deploy não é apenas “colocar no ar”
Um deploy profissional envolve preparação, build, variáveis de ambiente, hospedagem, integração com APIs, roteamento e validação. Tratar essas etapas como parte do desenvolvimento resulta em uma aplicação mais previsível, fácil de manter e pronta para evoluir.
O objetivo não é apenas publicar: é entregar uma experiência funcionando corretamente em produção.