Deploy Gratuito de um Projeto Full Stack em 10 Passos

Baixe aqui o arquivo e aprenda passo a passo como fazer o deploy gratuito com Render de um projeto MERN (MongoDB, Express, React, Node.js).

Neste artigo você vai aprender em 10 passos simples como realizar o deploy de um projeto completo usando a plataforma Render, mas que podem ser adaptados para outras plataformas como Heroku ou Vercel. Vamos direto ao ponto, com uma linguagem acessível e exemplos práticos!

Por que fazer o deploy de um projeto MERN?

Fazer o deploy de um projeto MERN permite que sua aplicação saia do ambiente local (localhost) e fique disponível online para qualquer pessoa acessar. Isso é essencial para demonstrar seu trabalho, testar em produção ou até compartilhar com clientes e recrutadores.

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Passo 1: Criar o Build do Frontend em React

O que é build e por que ele é necessário?

Chamamos de build o processo de transformar seu projeto React em arquivos estáticos (HTML, CSS e JavaScript) que podem ser servidos por um servidor. Sem isso, seu frontend não poderá ser acessado online.

No terminal, na pasta do frontend, execute:

npm run build

Isso vai criar uma pasta dist com os arquivos index.html, index.js e index.css. Esses arquivos são os que o servidor vai entregar aos usuários.

Dica: Certifique-se de que todas as dependências do frontend estão instaladas com npm install antes do build.

Passo 2: Servir o Frontend de Forma Estática

Como configurar o backend para servir o frontend?

No backend (Node.js com Express), você precisa configurar o servidor para entregar os arquivos estáticos gerados no build do React. Use o middleware express.static para isso.

Exemplo de código no arquivo principal do backend (server.js):

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, '../frontend/dist')));

Isso vai fazer com que a pasta dist do frontend seja servida como a rota padrão.

Dica: Use o módulo path do Node.js para criar caminhos corretos entre o backend e a pasta dist.

Passo 3: Criar uma Rota de Redirecionamento

Por que redirecionar rotas não mapeadas?

Em aplicações React, quando o usuário acessa uma rota não mapeada diretamente, o servidor deve redirecionar para o index.html para que o React Router gerencie a navegação.

Adicione esta rota no backend, após todas as outras rotas:

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../frontend/dist/index.html'));
});

Isso garante que qualquer rota não reconhecida seja redirecionada para o frontend.

Passo 4: Organizar as Rotas da API no Backend

Como evitar conflitos entre rotas do frontend e backend?

Para evitar confusão entre as rotas do frontend e do backend, adicione um prefixo /api a todas as rotas do backend.

Por exemplo:

app.use('/api/users', userRoutes);
app.use('/api/places', placeRoutes);
app.use('/api/bookings', bookingRoutes);

No frontend, atualize as chamadas à API para incluir o prefixo /api. Exemplo:

const baseURL = '/api';
fetch(`${baseURL}/users`);

Dica: Consolidar o baseURL em uma variável facilita futuras alterações.

Passo 5: Diferenciar Ambientes (Development vs. Production)

Como configurar o frontend para diferentes ambientes?

Use variáveis de ambiente para definir a URL da API dependendo do ambiente (desenvolvimento ou produção). No arquivo principal do frontend (App.jsx), configure o baseURL com um operador ternário:

const baseURL = import.meta.env.MODE === 'development' 
  ? 'http://localhost:4000/api' 
  : 'https://seu-dominio.com/api';

Isso garante que o frontend se conecte à API correta em cada ambiente.

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Passo 6: Automatizar Build e Start com Scripts

Como preparar o projeto para o deploy?

Crie um arquivo package.json na raiz do projeto para gerenciar os scripts de build e start. Exemplo:

{
  "scripts": {
    "install-all": "npm install --prefix backend && npm install --prefix frontend",
    "build": "npm run build --prefix frontend",
    "start": "npm run start --prefix backend"
  }
}

Execute os comandos:

• npm run install-all: Instala dependências do backend e frontend.
• npm run build: Gera a pasta dist do frontend.
• npm run start: Inicia o servidor backend.

Passo 7: Criar e Subir o Repositório no GitHub

Como preparar o projeto para o GitHub?

1. Inicialize um repositório Git na pasta raiz:git init
2. Adicione todos os arquivos:git add .
3. Faça o commit inicial:git commit -m "Configurações iniciais para deploy"
4. Renomeie a branch para main (se necessário):git branch -M main
5. Vincule ao repositório remoto no GitHub:git remote add origin <URL_DO_REPOSITORIO>
6. Envie o projeto:git push -u origin main

Dica:

• Certifique-se de que o repositório é público (ou privado com acesso ao Render).

Passo 8: Configurar o Render para o Deploy

Como configurar o deploy no Render?

1. Crie uma conta no Render (gratuita).
2. Crie um novo "Web Service" e conecte ao repositório GitHub.
3. Configure:
   • Language: Node
   • Branch: main
   • Root Directory: (deixe em branco, pois o package.json está na raiz)
   • Build Command: npm run build
   • Start Command: npm run start
4. Adicione variáveis de ambiente (ex.: chaves do MongoDB, AWS S3, etc.) no painel do Render.

Passo 9: Atualizar o Frontend com a Nova URL

Como ajustar a URL da API após o deploy?

Após o deploy, o Render fornece uma URL (ex.: https://seu-projeto.onrender.com). Atualize o baseURL no frontend:

const baseURL = import.meta.env.MODE === 'development' 
  ? 'http://localhost:4000/api' 
  : 'https://seu-projeto.onrender.com/api';

Faça um novo commit e push:

git add .
git commit -m "Atualização da base URL"
git push

Passo 10: Deploy Final e Testes

Como garantir que tudo funciona?

1. No Render, clique em "Deploy latest commit" para atualizar o projeto.
2. Acesse a URL fornecida pelo Render e teste:
   • Verifique se o frontend carrega corretamente.
   • Teste as chamadas à API (ex.: login, listagem de dados).
   • Confirme a conexão com o banco de dados (MongoDB).

Tabela de Verificação:

Conclusão

Com esses 10 passos, você consegue fazer o deploy de um projeto MERN de forma gratuita e eficiente.

O segredo é organizar bem o frontend e o backend, configurar as rotas corretamente e usar uma plataforma como o Render para simplificar o processo. Agora que seu projeto está online, teste todas as funcionalidades e compartilhe com o mundo!

Próximos passos:

• Adicione monitoramento de erros no Render.
• Considere otimizar o desempenho com lazy loading no React.
• Explore opções de escalabilidade (ex.: planos pagos ou outras plataformas).

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

FAQ - Como fazer deploy gratuito

Hashtag Treinamentos

Para acessar publicações de Full Stack, clique aqui!

Posts mais recentes de Full Stack

• 
  LESS CSS: Guia Completo do Pré-processador (2026)8 de maio de 2026
  LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático.
• 
  Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional29 de dezembro de 2025
  Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS.
• 
  Try Catch no JavaScript: Programação Defensiva na Prática27 de novembro de 2025
  Aprenda a usar try catch no JavaScript e melhore a sua programação defensiva!

Posts mais recentes da Hashtag Treinamentos

• 
  Planilha de Controle de Notas Fiscais no Excel [Grátis]2 de outubro de 2026
  Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço.
• 
  Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?2 de outubro de 2026
  Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe.
• 
  Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA30 de setembro de 2026
  Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.