Deploy guides

Deploy a Lovable app to Netlify

Easiest external host for Lovable. Netlify detects TanStack Start and Vite automatically.

Specific to Lovable + Netlify
  • Netlify publishes an official Lovable guide; use the Git import flow so environment variables and rebuilds work.
  • Netlify Drop (drag-and-drop) does not inject environment variables, so a Supabase-backed app will load without data. Prefer Git import.
Need an always-on server?

Netlify 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 Netlify

    In Netlify choose Add new project → Import an existing project, connect GitHub and pick your repository. Netlify detects Vite and fills in the build settings.

  4. Check the build settings

    For Vite: build command npm run build, publish directory dist. The publish directory is relative to the base directory.

    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 Netlify: Project configuration → Environment variables (add them before the first build). 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)

    public/_redirects (ends up in dist/_redirects) 
    /*  /index.html  200

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

  7. Update login redirect URLs

    Add your new Netlify 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 → Domain management → Add a domain, then follow the DNS instructions (or delegate your domain to Netlify DNS). HTTPS is automatic.

What it will cost

Free tier Free: $0 forever — 300 credits/month. Paid from $9/mo: Personal: $9/month, 1,000 credits. Pro: $20/month, 3,000 credits, unlimited members. Checked 17 Oct 2026 on Netlify's pricing page (opens in a new tab).

  • Every production deploy costs credits, so frequent auto-deploys from an AI builder eat into the free 300.

Other options for Lovable