Deploying Lovable Apps to Vercel with Custom Domains

Lovable has quickly become the go-to full-stack AI engineer for bootstrapping React applications. By combining GPT-based code generation with Supabase integration, it allows developers to spin up production-grade CRUD applications, dashboards, and SaaS MVPs in hours instead of weeks.

However, once your AI-generated app moves past the prototype phase, the default Lovable preview URL is no longer sufficient. You need production-grade infrastructure: automated CI/CD, edge caching, zero-downtime rollouts, and a custom domain with SSL.

This guide walks through deploying a Lovable-generated application to Vercel, connecting a custom domain, configuring environment variables, and handling Supabase auth redirects for production.

Prerequisites

Before diving into the deployment pipeline, ensure you have the following in place:

A fully functional application generated and tested inside Lovable.
A Vercel account (Hobby or Pro tier).
A Supabase project connected to your Lovable app (if your app uses auth or a database).
A domain name purchased from a registrar (e.g., Namecheap, Cloudflare, AWS Route 53).
Node.js (v18+) and Git installed locally if you prefer manual CLI operations.

Step 1: Exporting Your Code from Lovable

Lovable provides seamless integration with GitHub. While you can download a raw ZIP archive of your project, connecting directly to GitHub is the best approach for maintaining a continuous deployment pipeline.

Open your project in the Lovable editor.
Click on the GitHub icon in the top right corner of the navigation bar.
Authenticate with your GitHub account if you haven't already.
Click Create Repository. Lovable will automatically push the initial commit of your project to a new public or private repository under your GitHub account.

Once pushed, clone your newly created repository to your local machine to verify its structure:

git clone https://github.com/your-username/your-lovable-app.git
cd your-lovable-app
npm install
npm run dev

Verify that the local development server boots up without errors on http://localhost:8080 (or Vite's default port).

Step 2: Importing the Project into Vercel

Vercel is the optimal hosting platform for Vite-based React SPAs due to its global Edge Network and native support for zero-configuration deployments.

Navigate to the Vercel Dashboard.
Click Add New... and select Project.
Under Import Git Repository, find your Lovable-generated repository and click Import.
Configure the project settings:
- Project Name: Leave as default or rename for production.
- Framework Preset: Vercel automatically detects Vite. Leave this as-is.
- Root Directory: Leave empty (unless your project structure nests the app inside a monorepo subdirectory).
- Build Command: npm run build (default for Vite).
- Output Directory: dist (default for Vite).

Do not click Deploy just yet. You must configure your environment variables first, or your build may fail due to missing API keys.

Step 3: Configuring Environment Variables

Lovable apps that use Supabase, Stripe, or third-party APIs rely on environment variables. If these are missing during the build or runtime, your app will break.

In the Vercel project configuration screen, expand the Environment Variables section.
Open your local .env file from your Lovable project and map the keys over to Vercel. Typically, this includes:
- VITE_SUPABASE_URL
- VITE_SUPABASE_ANON_KEY
Ensure you select the appropriate environments (Production, Preview, and Development). For a standard production launch, select all three.

Note: Vite embeds variables prefixed with VITE_ into the client-side bundle at build time. Ensure these are set in Vercel before triggering the deployment.

Once your environment variables are added, click Deploy. Vercel will pull your repository, install dependencies, run the Vite build command, and assign a .vercel.app preview URL.

Step 4: Connecting a Custom Domain

With your app live on a Vercel preview domain, it’s time to hook up your production custom domain.

Adding the Domain in Vercel

Go to your project dashboard in Vercel.
Click on the Settings tab at the top.
Select Domains from the left-hand sidebar.
Enter your root domain (e.g., app.yourdomain.com or yourdomain.com) and click Add.
Vercel will present you with the required DNS records based on whether you are using a root domain or a subdomain.

Configuring DNS Records at Your Registrar

Log into your DNS provider (Cloudflare, Namecheap, Route 53, etc.) and add the records specified by Vercel.

For a apex/root domain (yourdomain.com), you will typically add:

Type: A
Name: @
Value: 76.76.21.21 (Vercel's global IP)

For a subdomain (app.yourdomain.com), add a CNAME record:

Type: CNAME
Name: app
Value: cname.vercel-dns.com

Vercel automatically provisions an SSL/TLS certificate via Let's Encrypt once the DNS propagates, which usually takes anywhere from a few seconds to a few minutes.

Step 5: Updating Supabase Auth Redirects

If your Lovable app uses Supabase Authentication (Magic Links, OAuth, or password resets), authentication will break after moving to your custom domain unless you update your Supabase redirect URLs. Supabase blocks unauthorized redirect targets for security reasons.

Navigate to your Supabase Dashboard.
Select your project and navigate to Authentication > URL Configuration.
Under Site URL, update the URL from your Lovable preview or old Vercel URL to your new custom domain:
```
https://app.yourdomain.com
```

Under Redirect URLs, add explicit entries for your production domain and local development:

https://app.yourdomain.com/**
https://app.yourdomain.com/auth/callback
http://localhost:8080/**

Click Save.

Failure to update these URLs will result in users being redirected back to your old preview environment or encountering AuthApiError: Unauthorized exceptions upon login.

Step 6: Setting Up Continuous Deployment

One of the primary benefits of migrating your Lovable app to Vercel via GitHub is automated CI/CD.

Production Branch: Every push to the main or master branch will automatically trigger a production build on Vercel.
Preview Deployments: Whenever you open a Pull Request or push to a feature branch, Vercel will generate a unique, isolated preview deployment with its own URL, allowing you to test changes before merging.

Optional: Adding Vercel CLI for Local Deployments

If you prefer deploying directly from your terminal or want to integrate deployments into a custom CI script, install the Vercel CLI:

npm i -g vercel

Authenticate with your Vercel account:

vercel login

Link your local repository to your Vercel project:

vercel link

To push a preview deployment directly from your terminal:

vercel

To deploy straight to production, bypassing the preview stage:

vercel --prod

Troubleshooting Common Issues

Even with smooth tooling, edge cases arise when moving AI-generated codebases to production environments. Here is how to resolve the most common errors.

1. Client-Side Routing 404 Errors

Because Vite builds Single Page Applications (SPAs), navigating directly to a sub-route (e.g., app.yourdomain.com/dashboard) or refreshing the page can result in a 404 Not Found error from the server.

Solution: Vercel handles Vite routing automatically if your vercel.json is configured correctly, but you can explicitly define rewrites to ensure all requests fall back to index.html. Create a vercel.json file in your root directory:

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

2. Mixed Content / CORS Errors with Supabase

If your app makes API calls that fail with CORS or mixed-content errors after deployment, verify that your Supabase client initialization uses environment variables correctly rather than hardcoded strings.

// src/integrations/supabase/client.ts
import { createClient } from '@supabase/supabase-js'

const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL
const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY

if (!SUPABASE_URL || !SUPABASE_ANON_KEY) {
  throw new Error('Missing Supabase environment variables in Vercel dashboard.')
}

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

3. Build Fails on TypeScript Strict Checks

Lovable generates rapid prototypes, which occasionally include minor TypeScript warnings that don't block Vite's dev server but will fail strict production builds on Vercel.

Solution: Check your build logs in the Vercel dashboard. If you encounter strict type errors, you can temporarily adjust your tsconfig.json to loosen strict checks, though fixing the underlying types is recommended for production apps:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "strictNullChecks": false
  }
}

Production Best Practices for Lovable Apps

Moving to production means your application is now exposed to real users, latency, and potential security vectors. Consider implementing these next steps:

Enable Web Application Firewall (WAF) & DDoS Protection: If your registrar is Cloudflare, route your custom domain through Cloudflare's proxy (orange cloud) before pointing to Vercel to leverage free DDoS mitigation and rate limiting.
Monitor with Error Tracking: Integrate an error monitoring tool like Sentry or LogRocket into your Vite entry point (src/main.tsx) to catch unhandled client-side exceptions in production.
Optimize Asset Delivery: Vercel automatically caches static assets at the edge. Ensure your images uploaded via Lovable/Supabase storage are optimized or served via a CDN like Cloudinary or Supabase Image Transformations.