Exporting Lovable Projects for Manual Deployment to Any Host

Why exporting Lovable code requires specific adjustments for external hosting

Lovable projects are standard Vite + React + TypeScript applications, which means they can run on any hosting platform that supports static sites. However, Lovable manages some things behind the scenes that you need to configure manually when deploying elsewhere. The biggest adjustment is environment variables. Lovable stores secrets in its Cloud tab, and these are automatically injected during builds on lovable.app. When you deploy to Vercel, Netlify, or another platform, you need to set these variables manually. Without them, your app cannot connect to Supabase and will fail silently or show connection errors. SPA routing is another common issue. Lovable apps use React Router with BrowserRouter for client-side routing. On lovable.app, this works automatically. On other platforms, you need to configure a fallback rule so all URL paths serve index.html, letting React Router handle the routing. Without this, direct URL visits return 404 errors.

• Environment variables from Lovable Cloud are not automatically available on external hosting platforms
• SPA fallback routing is not configured on the target hosting platform
• The build output directory (dist/) is not correctly specified in the hosting platform's settings
• Internal @lovable packages referenced in the code may not be publicly available after export
• Node version mismatch — Lovable uses Node 22, which must be specified on the hosting platform

Error messages you might see

Before you start

• A Lovable project you want to deploy outside of lovable.app
• A GitHub account (for GitHub sync method) or a Pro plan (for ZIP download via Dev Mode)
• An account on your target hosting platform (Vercel, Netlify, AWS, etc.)

How to fix it

// Project only exists inside Lovable editor
// No external access to the code

// After GitHub sync:
// github.com/your-org/your-project
//   src/
//   public/
//   package.json
//   vite.config.ts
//   index.html
//   .env.example

// No way to get the code outside Lovable without GitHub

// Download ZIP from Dev Mode:
// 1. Click + next to Preview → Code
// 2. Click the download icon to get the ZIP
// 3. Extract on your computer
// 4. Contains: src/, public/, package.json, etc.

// Secrets are stored in Lovable Cloud tab → Secrets
// Not available on external platforms

// On Vercel/Netlify, add these environment variables:
// VITE_SUPABASE_URL = https://[project-id].supabase.co
// VITE_SUPABASE_PUBLISHABLE_KEY = eyJhbG...
// VITE_SUPABASE_PROJECT_ID = your-project-id
//
// Also add any custom secrets your app uses
// (API keys for Stripe, etc.)

// No SPA routing configured
// Direct URL visits return 404

// vercel.json (add to project root for Vercel)
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}
// public/_redirects (add for Netlify)
/* /index.html 200
// Build settings on hosting platform:
// Build command: npm run build
// Output directory: dist
// Node version: 22

Complete code example

1{
2  "rewrites": [
3    {
4      "source": "/(.*)",
5      "destination": "/index.html"
6    }
7  ],
8  "headers": [
9    {
10      "source": "/assets/(.*)",
11      "headers": [
12        {
13          "key": "Cache-Control",
14          "value": "public, max-age=31536000, immutable"
15        }
16      ]
17    }
18  ]
19}

Best practices to prevent this

• Use GitHub sync over ZIP download — it keeps your code version-controlled and enables automatic deployments on push
• Never hardcode API keys in source code — always use environment variables with the VITE_ prefix for frontend variables
• Set Node version to 22 on your hosting platform to match Lovable's build environment
• Add vercel.json or _redirects to your project before the first external deployment to avoid 404 errors
• Copy environment variables from Lovable's Cloud tab > Secrets to your hosting platform's environment settings
• Test the deployed version in an incognito window to catch any caching or environment variable issues
• If your project uses Lovable Cloud (managed Supabase), the backend stays on Lovable's infrastructure even if frontend hosting moves
• After export, check that all @lovable/* package imports resolve correctly or replace them with public alternatives

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns