Deploy guides

Deploy a Lovable app to Vercel

Great fit, with an official Vercel integration guide. Remember Hobby is non-commercial.

Specific to Lovable + Vercel
  • For TanStack Start projects Vercel requires @lovable.dev/vite-tanstack-config version 2.6.2 or newer in package.json; leave Output Directory empty.
  • Older React + Vite projects: framework preset Vite, output dist, plus a vercel.json rewrite to index.html.
Need an always-on server?

Vercel doesn't run always-on servers. If your project has a long-running backend (websockets, bots, background jobs), use Railway or Render for that part.

Step by step

  1. Check your project type

    • TanStack Start (new projects): package.json lists @tanstack/react-start or @lovable.dev/vite-tanstack-config; there are files under src/routes/.
    • React + Vite (older projects): vite.config.ts and index.html at the repo root, no src/routes/ folder, build output is dist/.

  2. Get the code onto GitHub

    • Connect GitHub (available on all plans): Project → Settings/Connectors → GitHub → Connect project. Lovable creates a repo and keeps it in two-way sync.
    • Downloading the codebase as a file and editing code in Lovable require a paid plan.

  3. Create the project on Vercel

    Go to vercel.com/new, import your GitHub repository, accept the detected framework preset and click Deploy.

  4. Check the build settings

    Vercel auto-detects Vite, Next.js, TanStack Start (via Nitro) and most frameworks. For a plain Vite app the defaults are build command npm run build and output dist.

    For Lovable: build command npm run build, output dist (Netlify / Cloudflare / static). On Vercel leave Output Directory empty for TanStack projects.

  5. Add environment variables before the first build

    In Vercel: Project → Settings → Environment Variables. Copy these from Lovable:

    • VITE_SUPABASE_URL
    • VITE_SUPABASE_PUBLISHABLE_KEY
    • VITE_SUPABASE_PROJECT_ID
    • SUPABASE_URL and SUPABASE_PUBLISHABLE_KEY (server-side, TanStack Start projects)

    Changed a value later? Rebuild. Vite bakes variables in at build time. Troubleshoot missing env vars

  6. Make page refreshes work (Vite / React Router single-page apps)

    vercel.json 
    {
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

    Server-rendered projects (TanStack Start, Next.js) don't need this. Vercel docs (opens in a new tab)

  7. Update login redirect URLs

    Add your new Vercel URL (and later your custom domain) to your auth provider's allowed URLs. In Supabase: Authentication → URL Configuration. Redirect troubleshooting · Check RLS before going live

  8. Add your domain

    Project → Settings → Domains → Add. Vercel shows the exact DNS records (A record for the apex, CNAME for www) to create at your registrar; HTTPS is issued automatically.

What it will cost

Free tier Hobby: $0 — 100 GB data transfer, 1M CDN requests, 1M function invocations / month. Paid from $20/mo: Pro: $20/month per developer seat, includes $20 of usage credit; 1 TB transfer, 10M CDN requests. Checked 17 Oct 2026 on Vercel's pricing page (opens in a new tab).

  • The free Hobby plan is for personal, non-commercial use. A business or monetised app needs Pro.
  • Prices exclude VAT/sales tax.

Other options for Lovable