Bolt.new: Construindo Apps com Backend Node.js e APIs Reais

O Bolt.new não é só para frontends — com o WebContainer rodando Node.js real no browser, você pode construir apps com backend completo, APIs REST e integrações com qualquer serviço externo.

Por que backend no Bolt?

Quando você precisa de:

• Lógica de servidor que não pode expor no frontend
• Chamadas a APIs com chaves secretas
• Processamento de dados antes de exibir
• Webhooks de serviços externos

O Bolt permite criar esse backend no mesmo projeto, sem precisar de uma infraestrutura separada.

Criando um app com Express.js

Crie um app fullstack com:

BACKEND (Express.js):
- GET /api/posts: retorna lista de posts
- POST /api/posts: cria novo post (body: title, content)
- DELETE /api/posts/:id: deleta post
- Dados em memória por enquanto (array de objetos)
- CORS configurado para permitir o frontend

FRONTEND (React):
- Lista de posts
- Formulário para criar post
- Botão deletar em cada post
- Fetch para as rotas da API

O Bolt vai criar dois processos: o servidor Express na porta 3001 e o Vite dev server na porta 5173.

Estrutura do projeto gerado

/server
  index.js         → Express app
  /routes
    posts.js       → Rotas de posts
/src
  /components
    PostList.jsx
    PostForm.jsx
  App.jsx
  main.jsx
package.json       → Scripts para rodar ambos

Integrando com banco de dados real

Para persistência de dados, peça ao Bolt para usar Supabase, PlanetScale, ou qualquer outro banco com client npm:

Agora integre o backend com Supabase:
- Instale @supabase/supabase-js
- Crie um cliente Supabase no servidor usando as variáveis de ambiente SUPABASE_URL e SUPABASE_SERVICE_KEY
- Substitua o array em memória por queries reais no Supabase
- A SERVICE_KEY nunca deve ir para o frontend — só use no servidor

Variáveis de ambiente no Bolt

O Bolt tem suporte a arquivos .env:

Crie um arquivo .env com:
SUPABASE_URL=sua_url
SUPABASE_SERVICE_KEY=sua_chave
VITE_SUPABASE_URL=sua_url
VITE_SUPABASE_ANON_KEY=sua_chave_anon

Variáveis com prefixo VITE_ ficam disponíveis no frontend.
As outras só ficam disponíveis no Node.js do servidor.

APIs de terceiros no backend

Exemplo com API de clima:

Adicione um endpoint GET /api/weather/:city que:
- Chama a API do OpenWeatherMap usando a chave WEATHER_API_KEY
- Retorna temperatura, condição e umidade formatados
- Trate erros quando a cidade não for encontrada
O frontend deve ter um campo de busca e exibir o resultado

Rodando múltiplos processos

O Bolt suporta o pacote concurrently para rodar frontend e backend simultaneamente:

{
  "scripts": {
    "dev": "concurrently \"node server/index.js\" \"vite\"",
    "start": "node server/index.js"
  }
}

Peça ao Bolt: "Configure o package.json para rodar o servidor Express e o Vite simultaneamente com npm run dev"

Com essa abordagem, você tem um fullstack completo rodando no browser — e pronto para fazer deploy na Netlify (frontend) + Railway/Render (backend) quando precisar escalar.