Connect your GitHub repository to Vercel or Netlify by importing the repo in their dashboard, configuring build settings and environment variables, and enabling auto-deploy. Every push to main triggers a new production deployment automatically. Pull requests get preview deployments with unique URLs for testing before merging.
From GitHub to Live Website in One Click
Deployment tools like Vercel and Netlify watch your GitHub repository and automatically build and publish your app whenever you push new code. This is called continuous deployment — your live website stays in sync with your latest code without any manual steps.
Here is how it works: you connect your GitHub repo to Vercel (or Netlify). You tell it how to build your project (usually 'npm run build') and where the output goes (usually a 'dist' or '.next' folder). From that point on, every push to the main branch triggers a new deployment. Your site updates within 30-60 seconds.
The real magic is preview deployments. When you open a pull request (like V0 does automatically), Vercel builds that branch and gives it a unique preview URL. You can test the changes at that URL before merging. Once you merge the PR, Vercel deploys the updated main branch to production.
This workflow is especially powerful with AI tools. If Lovable auto-syncs to GitHub, every Lovable prompt triggers a GitHub commit, which triggers a Vercel deployment. Your live site updates after every prompt. If V0 creates a PR, you get a preview deployment to test before merging.
Environment variables (like Supabase keys or API tokens) must be set in Vercel's dashboard — they do not transfer from GitHub or your AI tool automatically.
Prerequisites
- A GitHub repository with a buildable project (Vite, Next.js, or static site)
- A Vercel account (free tier works) or Netlify account
- Environment variables ready if your app uses Supabase, Stripe, or other services
Step-by-step guide
Import your GitHub repo into Vercel
Import your GitHub repo into Vercel
Go to vercel.com and sign in (or create a free account). On your dashboard, click the Add New button and select Project. Vercel will ask you to connect your GitHub account — click Continue with GitHub and authorize access. You will see a list of your GitHub repositories. Find the repo you want to deploy and click the Import button next to it.
Expected result: Your GitHub repository appears in Vercel's project setup screen, ready to configure.
Configure build settings
Configure build settings
After importing, Vercel shows a configuration screen. For a Lovable project (Vite + React), set the Framework Preset dropdown to Vite. The Build Command should be 'npm run build' and the Output Directory should be 'dist.' For a V0 project (Next.js), select Next.js as the framework — Vercel auto-detects the correct settings. For Node.js version, select 22 from the dropdown. Leave the Root Directory as the default unless your code is in a subdirectory.
1{2 "rewrites": [3 { "source": "/(.*)", "destination": "/index.html" }4 ]5}Expected result: Build settings are configured correctly for your project's framework.
Add environment variables
Add environment variables
On the same configuration screen, scroll down to the Environment Variables section. Click to expand it. Add each variable your app needs: click the Name field, type the variable name (e.g., VITE_SUPABASE_URL), then type the value in the Value field. Click Add for each one. Common variables for Lovable projects include VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY, and VITE_SUPABASE_PROJECT_ID. Never put secret keys in your code — always use environment variables.
Expected result: All required environment variables are listed in Vercel's project settings.
Deploy and verify the live site
Deploy and verify the live site
Click the Deploy button. Vercel clones your repo, installs dependencies, runs the build command, and deploys the output. This takes 30-90 seconds. When it finishes, you see a success screen with a preview of your live site and a URL like your-project.vercel.app. Click the URL to verify your app works correctly. Check that pages load, navigation works, and any Supabase or API connections function.
Expected result: Your app is live at a .vercel.app URL and all features work correctly.
Test auto-deploy by pushing a change
Test auto-deploy by pushing a change
To confirm auto-deploy is working, make a change in your AI tool. If using Lovable, send a prompt like 'Change the hero section heading to Welcome to My App.' Lovable pushes a commit to GitHub, and within 60 seconds Vercel starts a new deployment. Go to your Vercel dashboard and click the project — you will see a new deployment in progress. When it finishes, refresh your live site to see the change. If using V0, create a PR and check for a preview deployment URL in the PR comments on GitHub.
Expected result: A new deployment appears in Vercel automatically after the GitHub commit, and the live site shows the updated change.
Complete working example
1{2 "rewrites": [3 {4 "source": "/(.*)",5 "destination": "/index.html"6 }7 ],8 "headers": [9 {10 "source": "/(.*)",11 "headers": [12 {13 "key": "X-Content-Type-Options",14 "value": "nosniff"15 },16 {17 "key": "X-Frame-Options",18 "value": "DENY"19 },20 {21 "key": "Referrer-Policy",22 "value": "strict-origin-when-cross-origin"23 }24 ]25 }26 ]27}Common mistakes when connecting GitHub with Deployment Tools Like Vercel
Why it's a problem: Forgetting to add environment variables in Vercel
How to avoid: Environment variables from Lovable's Cloud tab or your local .env file do not transfer automatically. Add each one manually in Vercel's project settings under Environment Variables.
Why it's a problem: Getting 404 errors on page refresh for Vite/React apps
How to avoid: Add a vercel.json file with a rewrite rule that sends all routes to /index.html. This handles client-side routing correctly.
Why it's a problem: Using the wrong Node.js version
How to avoid: Set Node.js to version 22 in Vercel's project settings. Older versions may not support the syntax used by Lovable or V0 projects.
Why it's a problem: Not updating OAuth redirect URLs after deploying to a custom domain
How to avoid: If your app uses OAuth (Google login, GitHub login), update the redirect URLs in your OAuth provider's settings to include your new Vercel domain.
Best practices
- Always set environment variables in Vercel's dashboard — never hardcode secrets in your repository.
- Add a vercel.json file with SPA rewrites for Vite/React projects to prevent 404 errors.
- Use preview deployments to test V0 pull requests before merging to production.
- Set Node.js version to 22 to match the version used by Lovable and V0.
- Monitor the Vercel dashboard after each AI tool change to catch build failures early.
- Set up a custom domain on Vercel for production use instead of the default .vercel.app URL.
- Use Vercel's deployment protection to password-protect preview deployments for sensitive projects.
- Configure build notifications (email or Slack) so you know immediately when a deployment fails.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
My Lovable project auto-deploys to Vercel but the latest deployment failed with 'Module not found' errors. The app works fine in Lovable's preview. Walk me through how to debug Vercel build errors when the source code comes from an AI tool.
Frequently asked questions
Does Vercel auto-deploy every Lovable change?
Yes. If your Lovable project is connected to GitHub and that GitHub repo is imported into Vercel, every Lovable prompt triggers a commit, which triggers a Vercel deployment. Your live site updates within 60 seconds of each prompt.
Do I need Vercel if Lovable has its own Publish feature?
Lovable's Publish gives you a basic hosted URL. Vercel gives you custom domains, preview deployments, analytics, edge functions, and better performance. For production apps, Vercel is recommended.
How do preview deployments work with V0 pull requests?
When V0 creates a PR on GitHub, Vercel automatically builds that branch and posts a unique preview URL as a comment on the PR. You can test the changes at that URL before merging.
Can I use Netlify instead of Vercel?
Yes. Netlify supports the same import-from-GitHub workflow. The build settings and environment variable configuration are similar. Netlify also supports preview deployments for pull requests.
Can RapidDev help set up a production deployment pipeline?
Yes. RapidDev's engineering team can configure your GitHub-to-Vercel pipeline, set up environment variables, add custom domains, and configure preview deployments for your AI-built projects.
What if my Vercel deployment fails but the app works in Lovable?
This usually means missing environment variables on Vercel or a Node.js version mismatch. Check the Vercel build logs (click the failed deployment in your dashboard) for the specific error message, then fix the configuration.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation