guias
Frameworks

Deploy Vite + React

Como fazer deploy de um app Vite + React na Veloz.

Faça deploy de uma SPA (Single Page Application) com Vite e React na Veloz.

Pré-requisitos

  • Node.js 18+ instalado
  • Um projeto Vite + React (ou vamos criar um)

1. Criar o projeto

npm create vite@latest meu-app -- --template react-ts
cd meu-app
npm install

2. Instalar a CLI

npm install -g onveloz
veloz login

3. Deploy

veloz deploy
ℹ Framework detectado: Vite + React
ℹ Tipo: Site Estático
ℹ Build: npm run build
ℹ Output: dist

? Confirmar e fazer deploy? (Y/n)

A Veloz detecta Vite + React como site estático e serve os arquivos da pasta dist diretamente.

✓ Build concluído em 8s
✓ Deploy concluído!
✓ https://meu-app.onveloz.com

SPA Routing

Se seu app usa React Router (ou qualquer client-side routing), a Veloz redireciona automaticamente todas as rotas para index.html — não precisa configurar nada.

// App.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
 
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/dashboard/*" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
}

Todas as rotas (/about, /dashboard/settings, etc.) funcionam sem 404.

Variáveis de ambiente

Vite usa o prefixo VITE_ para variáveis acessíveis no client:

veloz env set VITE_API_URL=https://api.meuapp.com
veloz env set VITE_STRIPE_KEY=pk_live_...

Importante: Variáveis VITE_* são injetadas no build. Após alterar, faça um novo deploy.

// No código
const apiUrl = import.meta.env.VITE_API_URL;

Proxy de API

Se seu frontend precisa se comunicar com uma API, configure o proxy no vite.config.ts para desenvolvimento local:

// vite.config.ts
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": "http://localhost:8080",
    },
  },
});

Em produção, aponte VITE_API_URL para a URL real da API.

Build output

Por padrão, Vite gera os arquivos em dist/:

dist/
├── index.html
├── assets/
│   ├── index-abc123.js
│   └── index-def456.css
└── favicon.ico

Se você alterou o outDir no vite.config.ts, atualize no veloz.json:

{
  "services": {
    ".": {
      "build": {
        "outputDir": "build"
      }
    }
  }
}

Com Tailwind CSS

Funciona sem configuração extra. O build do Vite já processa o Tailwind:

npm install -D tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from "@tailwindcss/vite";
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Monorepo

Se seu Vite + React faz parte de um monorepo:

meu-projeto/
├── apps/
│   ├── web/          ← Vite + React
│   └── api/          ← Backend
└── packages/
    └── ui/           ← Componentes compartilhados

cd meu-projeto
veloz deploy
# Selecione "web" na lista de apps

Próximos passos