Bolt.new → React → Produção

📁 Introdução e Download do Código

Opção 1 — Descarregar como ZIP (mais rápida)

1. No canto superior direito da interface do Bolt.new, clique no ícone do GitHub.
2. Selecione “Download Project” ou “Download ZIP”.
3. Extraia o ficheiro ZIP para uma pasta no seu computador.

Opção 2 — Exportar para GitHub (recomendada)

Garante versionamento, backup e facilita futuras atualizações:

1. Clique no ícone do GitHub no canto superior direito.
2. Selecione “Create Repository” ou “Connect to GitHub”.
3. Autorize o Bolt.new a aceder à sua conta GitHub.
4. No repositório criado, clique em “Code” → “Download ZIP”.

Opção 3 — Ficheiros individuais

Se precisar apenas de um ficheiro específico (ex: config.json, componentes em src/):

1. Na barra lateral esquerda (painel Files), clique com o botão direito no ficheiro desejado.
2. Selecione “Download” (se disponível).

🔍 Diagnóstico de Erros Comuns

Este comportamento é perfeitamente normal. Projetos modernos em React com Vite não funcionam ao abrir o index.html diretamente no navegador via protocolo file://.

Porquê acontece isto?

▶ Fase 1: Execução Local (Desenvolvimento)

Para ver o site a funcionar no seu computador, necessita de criar um servidor de desenvolvimento local.

instalarnpm install

executarnpm run dev

output➤  Local:   http://localhost:5173/
➤  Network: http://192.168.1.100:5173/

🔧 Fase 2: Build de Produção

Quando o site estiver pronto para publicação, gere os ficheiros estáticos otimizados:

buildnpm run build

Este comando cria uma pasta dist/ contendo:

• index.html — ponto de entrada do site.
• assets/ — JavaScript, CSS e imagens otimizados com hash no nome (ex: index-abc123.js).
• Outros ficheiros estáticos (favicon, imagens públicas, etc.).

Verificar o Build Localmente

Antes de enviar para o servidor, teste o build:

pré-visualizarnpm install -g serve
serve -s dist

Aceda a http://localhost:3000 para confirmar que tudo funciona como esperado.

🌐 Fase 3: Publicação em Servidor Web

Se ao carregar o conteúdo de dist/ para o servidor (cPanel, Plesk, etc.) a página continuar em branco, siga estas correções por ordem.

5.1 — Configurar Caminhos Relativos no Vite

Por padrão, o Vite assume que o site fica na raiz do domínio (/). Se estiver numa subpasta, os caminhos dos assets falham.

Edite o ficheiro vite.config.ts (ou vite.config.js) na raiz do projeto:

vite.config.tsimport { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',  // caminhos relativos
})

Após guardar, execute novamente:

reconstruirnpm run build

5.2 — Organizar Ficheiros no Servidor

No gestor de ficheiros do alojamento (cPanel → File Manager, ou FTP):

1. Aceda à pasta do site (habitualmente public_html/, httpdocs/ ou www/).
2. Abra a pasta dist/ no seu computador — não envie a pasta dist como um todo.
3. Copie apenas o conteúdo interior de dist/ (o index.html, a pasta assets/, etc.) para a pasta do servidor.
4. Remova ficheiros pré-existentes que possam conflitar: default.html, index.php (se não for necessário), index.htm antigo.

public_html/
├── index.html
├── assets/
│   ├── index-abc123.js
│   ├── index-def456.css
│   └── ...
└── .htaccess

5.3 — Configurar Reescrita de Rotas (.htaccess)

Se o projeto usa React Router com BrowserRouter, o servidor tentará procurar pastas físicas para cada URL e devolverá erro 404.

Crie um ficheiro .htaccess na raiz do site (junto ao index.html):

.htaccess<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

nginxlocation / {
  try_files $uri $uri/ /index.html;
}

5.4 — Configurar MIME Types (se necessário)

Alguns alojamentos antigos não reconhecem ficheiros .js com módulos ES6. Se vir erros de MIME type na consola do navegador, adicione ao .htaccess:

.htaccess<IfModule mod_mime.c>
  AddType application/javascript .js
  AddType text/css .css
</IfModule>

🚀 Fase 4: Plataformas Automatizadas

Se prefere não configurar servidores manualmente, existem plataformas gratuitas que automatizam o processo:

🔥 Resolução de Problemas Avançada

Erro: “Cannot find module” ao executar npm install

O package.json pode estar corrompido ou incompleto. Soluções:

limpar e reinstalarrm -rf node_modules package-lock.json
npm cache clean --force
npm install

Erro: Porta 5173 já em uso

usar outra portanpm run dev -- --port 3000

Ou altere no vite.config.ts:

vite.config.tsexport default defineConfig({
  plugins: [react()],
  base: './',
  server: {
    port: 3000,
  },
})

Erro: Build falha com “out of memory”

Em projetos muito grandes:

aumentar memórianode --max-old-space-size=4096 npm run build

Imagens não aparecem em produção

Verifique se as imagens estão na pasta public/ ou se são importadas corretamente no código:

referência correta// Imagem na pasta public/
<img src="/logo.png" alt="Logo" />

// Imagem importada
import logo from './assets/logo.png';
<img src={logo} alt="Logo" />

Cache do navegador mostra versão antiga

O Vite adiciona hashes automáticos aos ficheiros em npm run build, mas o index.html pode estar em cache. Force a atualização:

• Ctrl + F5 (Windows/Linux) ou Cmd + Shift + R (Mac) para recarregar sem cache.
• Adicione meta tags no index.html:

  anti-cache<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">

✅ Checklist Final de Publicação

• Projeto descarregado do Bolt.new (ZIP ou GitHub)
• Node.js instalado (versão 18+)
• npm install executado sem erros
• npm run dev funciona em localhost:5173
• Alterações testadas localmente
• base: './' configurado no vite.config.ts (se necessário)
• npm run build executado com sucesso
• Pasta dist/ verificada com serve -s dist
• Ficheiros de dist/ copiados para a raiz do servidor
• Ficheiros antigos removidos (default.html, index.php)
• Ficheiro .htaccess criado com reescrita de rotas
• Site testado no domínio público
• Cache do navegador limpo (Ctrl+F5)
• Consola do navegador sem erros (F12 → Console)