Primeiro deploy do Dogwalk — Vite + Cloudflare Pages

Três dias depois de começar a codar, eu já tinha um frontend básico — tela de login, homepage, e um formulário de busca. Não era bonito, mas funcionava. Aí veio o momento da verdade: botar no ar.

Vite como build tool

Escolhi Vite desde o início. O ecossistema React 19 tava (e ainda tá) migrando pra Vite, e não fazer sentido começar um projeto novo com CRA em 2026.

# Configuração inicial — Vite 8 + React 19 + TypeScript
npm create vite@latest dogwalk -- --template react-ts
cd dogwalk
npm install react-router-dom@latest @tanstack/react-query

O que me ganhou no Vite foi o HMD instantâneo — mudava um componente e via o resultado em milissegundos. Em dias de muito fluxo de UI, isso salvava horas.

O deploy: Cloudflare Pages

Escolhi Cloudflare Pages por três motivos:

Integração com Git — push na branch = deploy automático
Edge network — CDN global sem configurar nada
Preço — plano gratuito generoso pra um projeto que ainda não tinha usuários

O primeiro wrangler pages deploy foi emocionante:

npx wrangler pages deploy dist/ --project-name dogwalk

O build passou. O deploy foi pro ar. E aí veio o baque: página em branco.

O erro clássico: SPA routing no Cloudflare

O Cloudflare Pages servia o index.html na raiz, mas qualquer rota como /dashboard ou /passeios dava 404. O Vite Router tava configurado pra history mode (sem #), e o CF não sabia redirecionar.

// createBrowserRouter no React Router — lindo em dev, 404 em prod
const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/dashboard", element: <Dashboard /> },
  { path: "/passeios", element: <Passeios /> },
]);

A solução: um arquivo _redirects na raiz do build:

# public/_redirects — Cloudflare Pages SPA fallback
/*    /index.html    200

Sim, uma linha. Uma LINHA de config que me custou 2 horas de debug. Tava escrito na documentação, mas quem lê documentação inteira antes de fazer o primeiro deploy?

API e CORS

O backend FastAPI tava rodando local (localhost:8000), então o frontend no ar (dogwalk.pages.dev) não conseguia chamar a API — CORS bloqueava.

# FastAPI — CORS config (primeira versão)
from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://dogwalk.pages.dev"],
    allow_methods=["*"],
    allow_headers=["*"],
)

Resolver CORS em produção quando você só testou em dev é sempre um tapa na cara. Mas depois de configurado, o fluxo completo funcionou: frontend no CF → API local via Cloudflare Tunnel.

O aprendizado

Problema	Causa	Fix	Tempo perdido
Página branca	SPA history mode sem fallback	`_redirects`	2h
CORS bloqueado	Origem não configurada	`allow_origins`	1h
Build falhando	Versão errada do Node	`.nvmrc`	30min

No fim do dia, o Dogwalk tava no ar. O site era feio, tinha uma tela de login que não logava ninguém, e a API caía a cada 10 minutos. Mas estava no ar.

Não precisa ser perfeito no primeiro deploy. Precisa existir.

Comandos úteis

~/lifelog — bash

$cat about.txt

╔══════════════════════════════════════╗
║  Samuel Medeiros                    ║
║  Senior Software Engineer           ║
║  Stack: Python · TypeScript · Rust  ║
║  Projetos: Arachne, Dogwalk,        ║
║            Capivara, TatuEngine      ║
╚══════════════════════════════════════╝