Lovable to Vercel: Complete Deployment Guide (Free Hosting)

If you've built a website with Lovable's AI platform and want to deploy it to Vercel's lightning-fast edge network, this guide walks you through every step. Many Lovable users migrate to Vercel for better reliability, instant rollbacks, and superior developer experience. Whether you're moving due to Lovable 2.0 issues or simply want more hosting options, this guide shows you exactly how to transfer your Lovable project to Vercel's platform.

Why Deploy Lovable Projects to Vercel?

Vercel is the platform built by the creators of Next.js, offering:

Free Tier Includes:

• Unlimited deployments
• 100GB bandwidth per month
• Automatic HTTPS and SSL
• Global edge network (70+ regions)
• Automatic Git integration
• Preview deployments for every branch
• Serverless functions (12 seconds execution)
• Zero-config deployments for most frameworks

What Makes Vercel Great for Lovable:

• Auto-detects React, Vite, and most frameworks
• Instant rollbacks to previous deployments
• Built-in performance analytics
• Edge functions for dynamic content
• No cold starts on the free tier

New to Vercel? Start with our Getting Started with Vercel guide for a beginner-friendly introduction to the platform before diving into Lovable-specific deployment.

Step 1: Export Your Lovable Project

First, get your code out of Lovable:

1. Open your Lovable project in the Lovable dashboard
2. Click the menu icon (three dots or hamburger menu)
3. Select "Export" or "Download"
4. Choose "Download as ZIP"
5. Save the ZIP file to your computer
6. Extract the ZIP to a folder on your machine

Your project should contain:

• package.json - Dependencies and scripts
• src/ - Your source code
• public/ - Static assets
• index.html - Entry point
• vite.config.js or similar - Build configuration

Step 2: Set Up a Git Repository

Vercel deploys from Git repositories. Let's push your code to GitHub:

# Navigate to your extracted project folder
cd path/to/your-lovable-project

# Initialize a Git repository
git init

# Add all files to Git
git add .

# Create your first commit
git commit -m "Initial commit: Lovable project export"

Create a GitHub Repository

1. Go to GitHub and log in
2. Click the "+" icon in the top right corner
3. Select "New repository"
4. Name your repository (e.g., "my-lovable-site")
5. Choose Public or Private (both work with Vercel)
6. Don't initialize with README, .gitignore, or license
7. Click "Create repository"

Push Your Code to GitHub

# Add your GitHub repository as the remote origin
git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git

# Push your code to GitHub
git branch -M main
git push -u origin main

Your code is now on GitHub and ready to deploy!

Step 3: Create a Vercel Account

If you don't have one already:

1. Go to Vercel
2. Click "Sign up with GitHub" (easiest option)
3. Authorize Vercel to access your GitHub account
4. Complete your profile setup

Vercel will automatically detect your GitHub repositories.

Step 4: Import Your Project to Vercel

Now for the deployment:

1. Click "Add New..." in the Vercel dashboard
2. Select "Project"
3. You'll see a list of your GitHub repositories
4. Find your Lovable project repository
5. Click "Import"

Vercel will analyze your repository and detect your framework.

Step 5: Configure Build Settings

Vercel is smart and usually auto-detects everything. For typical Lovable projects (React + Vite):

Framework Preset: Vite (auto-detected)

Build Command:

npm run build

Output Directory:

dist

Install Command:

npm install

Root Directory: Leave blank (unless your code is in a subdirectory)

Environment Variables

If your Lovable project needs environment variables (API keys, backend URLs):

1. Click "Environment Variables" section
2. Click "Add"
3. Enter your variable name (e.g., VITE_API_URL)
4. Enter the value
5. Select environments: Production, Preview, Development

Common Lovable environment variables:

VITE_API_URL=https://api.example.com
VITE_SUPABASE_URL=https://yourproject.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

Note: Vite uses VITE_ prefix for environment variables that should be exposed to the browser.

Step 6: Deploy!

Click "Deploy"

Vercel will:

1. Clone your repository
2. Install dependencies with npm install
3. Run your build command
4. Deploy to their global edge network
5. Give you a .vercel.app URL

First deployment typically takes 30-90 seconds.

You can watch the build logs in real-time. If everything succeeds, you'll see:

✓ Build Completed
✓ Deployment Ready

Your site is now live at https://your-project.vercel.app!

Step 7: Set Up a Custom Domain

Once deployed, you can add your own domain:

1. In your Vercel project, click "Settings"
2. Click "Domains" in the sidebar
3. Enter your domain (e.g., example.com or www.example.com)
4. Click "Add"

If Your Domain is at Another Registrar

Vercel will show you DNS records to add:

For apex domain (example.com):

• Type: A
• Name: @
• Value: 76.76.21.21

For www subdomain (www.example.com):

• Type: CNAME
• Name: www
• Value: cname.vercel-dns.com

Add these records at your domain registrar:

1. Log in to your registrar (GoDaddy, Namecheap, etc.)
2. Find DNS settings
3. Add the A and/or CNAME records
4. Save changes
5. Wait for DNS propagation (usually 5-30 minutes, can take up to 24 hours)

Automatic HTTPS

Vercel automatically provisions and renews SSL certificates for all domains. No configuration needed—it just works.

Step 8: Enable Automatic Deployments

This is already enabled by default! Every time you push to your Git repository, Vercel automatically rebuilds and deploys:

# Make changes to your code
# Then commit and push
git add .
git commit -m "Update homepage design"
git push origin main

# Vercel automatically detects the push and rebuilds

You'll get a notification email when deployments complete.

Preview Deployments

Every branch and pull request gets its own preview URL:

1. Create a new branch: git checkout -b feature/new-design
2. Make changes and push: git push origin feature/new-design
3. Vercel automatically creates a preview deployment
4. Share the preview URL with your team before merging

This is ideal for testing changes before going live.

Advanced: Using Vercel CLI

For more control, install the Vercel CLI:

# Install Vercel CLI globally
npm install -g vercel

# Log in to your Vercel account
vercel login

# Deploy from your local machine
vercel

# Deploy to production
vercel --prod

Deploy Without Git

If you don't want to use Git:

# Navigate to your project folder
cd your-lovable-project

# Build locally
npm run build

# Deploy directly
vercel --prod

This uploads your built files directly to Vercel.

Troubleshooting Common Issues

Build Fails: "Command not found: npm"

Problem: Vercel can't find npm

Solution: Ensure you have a package.json in your project root. Vercel auto-detects it and installs dependencies.

Build Fails: "dist directory not found"

Problem: Build output directory doesn't match configuration

Solutions:

1. Check your vite.config.js (or similar) for the output directory name
2. Common alternatives: build, out, public, .output
3. Update Vercel settings: Project Settings > Build & Development Settings > Output Directory

404 Errors on Client-Side Routes

Problem: Direct navigation to /about or other routes returns 404

Solution: Create a vercel.json in your project root:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

This tells Vercel to serve index.html for all routes, allowing your React Router (or similar) to handle routing.

Or use public/_redirects (for Vite projects):

/*    /index.html   200

Environment Variables Not Working

Problem: import.meta.env.VITE_API_URL is undefined

Solutions:

1. Ensure variables are prefixed with VITE_ for Vite projects
2. Add them in Project Settings > Environment Variables
3. Redeploy after adding variables (or push a new commit)
4. Check you selected the correct environment (Production/Preview/Development)

Build Exceeds Free Tier Time Limit

Problem: Build takes longer than 45 minutes (Hobby plan limit)

Solutions:

1. Optimize your build process
2. Reduce dependencies
3. Use npm ci instead of npm install (faster)
4. Upgrade to Vercel Pro ($20/month, 6-hour build limit)

API Calls Failing After Deployment

Problem: API requests that worked in Lovable now fail

Common causes:

1. CORS issues: Your API doesn't allow requests from your Vercel domain
2. Environment variables missing: Add them in Vercel dashboard
3. HTTPS/HTTP mismatch: Vercel forces HTTPS; ensure your API supports it
4. Hardcoded localhost URLs: Replace with environment variables

Solution:

// Use environment variables
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000'

fetch(`${API_URL}/api/data`)
  .then(response => response.json())
  .then(data => console.log(data))

Add VITE_API_URL in Vercel's environment variables.

Deployment Shows Old Version

Problem: Changes aren't visible after deployment

Solutions:

1. Hard refresh your browser: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
2. Check deployment status in Vercel dashboard—it might still be building
3. Verify you pushed to the correct branch
4. Check the deployment URL matches where you're looking

Custom Domain Not Working

Problem: Domain doesn't resolve or shows errors

Solutions:

1. Check DNS propagation: Use whatsmydns.net
2. Verify DNS records are correct (A record to 76.76.21.21 or CNAME to cname.vercel-dns.com)
3. Wait—DNS can take up to 24 hours (usually 5-30 minutes)
4. Check domain is verified in Vercel dashboard (green checkmark)
5. Ensure you removed conflicting DNS records (old CNAME or A records)

Comparing Vercel to Other Hosting Options

For Lovable projects, Vercel is excellent because it auto-detects React/Vite setups and has generous free tier limits.

Optimizing Your Lovable Site on Vercel

Enable Edge Caching

Vercel automatically caches static assets at the edge. For more control, add headers:

Create vercel.json:

{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Use Vercel Analytics

Enable free analytics:

1. Go to Project Settings > Analytics
2. Click "Enable"
3. Add the analytics script to your project (Vercel provides instructions)

Track Core Web Vitals and user interactions automatically.

Add Security Headers

Improve security with headers in vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        },
        {
          "key": "Permissions-Policy",
          "value": "geolocation=(), microphone=(), camera=()"
        }
      ]
    }
  ]
}

Use Serverless Functions (Optional)

If you need backend functionality, create API routes:

1. Create api/ folder in your project root
2. Add a file like api/hello.js:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Vercel!' })
}

Access it at: https://your-project.vercel.app/api/hello

This is ideal for:

• Form submissions
• Database queries
• Third-party API calls (hiding API keys)
• Authentication

Migrating from Lovable Hosting to Vercel

If you're currently using Lovable's hosting:

1. Export your project (as described in Step 1)
2. Deploy to Vercel (follow Steps 2-6)
3. Test thoroughly at your .vercel.app URL
4. Update DNS to point to Vercel (Step 7)
5. Monitor for any issues in the first 24 hours
6. Cancel Lovable hosting once confirmed working

Next Steps After Deployment

1. Set up monitoring: Enable Vercel Analytics for performance tracking
2. Configure error tracking: Integrate with Sentry or LogRocket
3. Optimize images: Use Vercel's built-in Image Optimization
4. Add serverless functions: Create API routes for dynamic functionality
5. Set up staging: Create a develop branch for preview deployments

Vercel vs Cloudflare: Which Should You Choose?

Choose Vercel if:

• You want the easiest setup (literally one-click import)
• You need serverless functions without extra configuration
• You're building with React, Next.js, or Vite
• You want preview deployments for every PR
• You value developer experience and speed

Choose Cloudflare if:

• You want unlimited bandwidth (Vercel caps at 100GB free)
• You need edge computing with Workers
• You prefer unlimited builds (Vercel has 6,000/month limit)
• Your site has very high traffic
• You want the absolute fastest global performance (300+ regions)

For most Lovable projects, Vercel is the better choice due to its simplicity and generous free tier. Both are excellent platforms—you can't go wrong with either.

Conclusion

Deploying your Lovable project to Vercel is straightforward:

1. Export from Lovable
2. Push to Git
3. Import to Vercel
4. Deploy

You get:

• Automatic deployments on every Git push
• Global CDN with 70+ edge locations
• Free SSL certificates
• Preview deployments for testing
• 100GB bandwidth per month (free)

Vercel makes hosting your Lovable AI-built websites effortless. The entire process from export to live site takes less than 10 minutes.

Have questions about deploying your Lovable project to Vercel? Leave a comment below!

Frequently Asked Questions

Will my Lovable app work on Vercel? Yes! Lovable generates React/Vite applications that are fully compatible with Vercel's platform. Vercel auto-detects Vite projects and configures everything automatically.

Can I use my custom domain with Vercel? Absolutely. Vercel provides free SSL certificates and makes custom domain setup simple through their dashboard. You can use both root domains and subdomains.

What happens to my Lovable hosting after migration? Your original Lovable-hosted site continues to work. You can keep both running or unpublish the Lovable version once migration is complete. There's no automatic cancellation—you have full control.

Is Vercel hosting really free? Yes! Vercel's free tier includes unlimited deployments, 100GB bandwidth per month, custom domains with SSL, and automatic Git integration. It's perfect for personal projects and small business sites.

How do I move my Lovable project to Vercel? Export your Lovable project as a ZIP file, push it to GitHub, then connect your GitHub repository to Vercel. The entire process takes about 10-15 minutes with automatic deployments after initial setup.

Related guides:

• Complete Guide: Deploy Your Lovable Project to Cloudflare
• 3 Ways to Move Your Lovable Website and Keep Free Hosting
• 7 More Ways to Move Your Lovable Website to Free Hosting