TechPurger
[ANÚNCIO: 728x90]

Passo a Passo: Como fazer o deploy de um projeto Node.js e React de forma gratuita

Publicado em: 24 de Maio de 2026 Por: Rinaldo Purger

Construir a aplicação na sua máquina (localhost) é apenas a primeira metade da jornada de um desenvolvedor. Colocar seu sistema no ar para que outras pessoas acessem — e preferencialmente, sem gastar com servidores pesados — é o próximo passo natural.

Neste guia técnico, vamos separar a arquitetura em dois mundos e usar os melhores serviços gratuitos de Cloud disponíveis em 2026: Render para o Backend (Node.js) e Vercel para o Frontend (React).

[ANÚNCIO: 300x250]

Parte 1: Hospedando a API (Backend) no Render

O Render é uma das melhores alternativas atuais ao antigo plano gratuito do Heroku. Ele hospeda aplicações Web Services diretamente do seu GitHub.

  1. Suba todo o código da sua API Node.js para um repositório no GitHub.
  2. Crie uma conta gratuita no Render e clique em "New Web Service".
  3. Conecte sua conta do GitHub e selecione o repositório da API.
  4. Nas configurações, certifique-se de que os comandos de build e start estão corretos:
    • Build Command: npm install
    • Start Command: npm start (ou node server.js)
  5. Escolha o plano "Free" e clique em Create Web Service.
Aviso Importante: No plano gratuito do Render, se a sua API ficar muito tempo sem receber requisições, ela entrará em modo de hibernação. A primeira requisição após hibernar pode demorar de 30 a 50 segundos para responder enquanto a instância "acorda".

Parte 2: Hospedando o Frontend (React) na Vercel

A Vercel é otimizada para ecossistemas de Frontend (como React, Next.js, Vite). Ela processa arquivos estáticos com extrema velocidade através da sua CDN global.

  1. Antes do deploy, vá no código do seu React e altere a URL base do axios (ou fetch) para a nova URL da API gerada pelo Render (ex: https://minha-api.onrender.com). Não esqueça de configurar o CORS na API!
  2. Suba o projeto React para outro repositório no GitHub.
  3. Crie uma conta na Vercel e clique em "Add New > Project".
  4. Importe o seu repositório React. A Vercel é inteligente o suficiente para detectar se você usou Create React App ou Vite, preenchendo as configurações automaticamente.
  5. Clique em Deploy.

E o Banco de Dados?

Se a sua API usa um banco de dados, você também precisa hospedá-lo na nuvem. Para MongoDB, utilize o plano gratuito MongoDB Atlas. Para PostgreSQL ou MySQL, plataformas como Supabase ou Neon Serverless oferecem excelentes tiers gratuitos de banco relacional para desenvolvimento.

Conclusão

Dividir o frontend e o backend aproveitando os pontos fortes das CDNs estáticas (Vercel) e das hospedagens PaaS dinâmicas (Render) é a arquitetura padrão da indústria hoje. Com esses passos, você tem um ecossistema produtivo completo com custo zero.