Deploy vibe-coded app to Vercel is the fastest path from AI-generated prototype to a URL your users can hit — if you treat export, Git, and environment variables as part of the build, not an afterthought. This step-by-step vibe coding deployment tutorial walks you from Lovable, Bolt, or Cursor output through GitHub and Vercel preview deploys, with fixes for the build failures that show up after AI codegen. Updated October 2026.
If you already built something with an AI app builder, you are closer than you think. Most vibe-coded stacks — Next.js, Vite, or React — deploy cleanly on Vercel when the repo is structured correctly. Start with our how to vibe code a web app guide if you are still in the build phase, or skim the Vibe Coding Roadmap to see where deployment fits in your overall stack.
Table of contents
- What you need before you deploy
- Export from Lovable, Bolt, or Cursor
- Push to GitHub the right way
- Connect Vercel and import the repo
- Set environment variables
- Preview deploys and production
- Fix common build failures after AI codegen
- Post-deploy checklist
- FAQ
What you need before you deploy
Thirty minutes is realistic when you have accounts ready and your app runs locally — even roughly. You do not need DevOps experience. You do need three things: a finished or near-finished project, a GitHub account, and a Vercel account (free tier works for MVPs).
Before you click deploy, confirm these basics:
- Local build passes. Run
npm run buildor your framework equivalent. If it fails locally, Vercel will fail too. - Framework detected. Vercel auto-detects Next.js, Vite, Remix, and most React setups. Check
package.jsonfor a clearbuildscript. - Secrets listed. Write down every API key your app uses — Supabase, Stripe, OpenAI, Clerk. You will paste these into Vercel, not commit them.
- No hardcoded localhost URLs. AI builders love
http://localhost:3000in fetch calls. Search the repo and replace with env-based URLs.
Tools like Lovable and Bolt often ship with Supabase or similar backends pre-wired. If you used one, read our Lovable review for export quirks before you push.
Next.js vs Vite on Vercel
Most vibe-coded apps land on Next.js App Router or Vite + React. Vercel is optimized for Next.js — zero config, serverless functions in /app/api, image optimization built in. Vite static sites deploy as static output: set build to npm run build and output to dist unless your template docs say otherwise. If your AI builder generated Create React App (legacy), consider migrating to Vite before deploy; CRA builds are slower and harder to debug on Vercel.
Export from Lovable, Bolt, or Cursor
Each AI builder exports differently. The goal is identical: a folder with source code, a lockfile, and a .gitignore that excludes node_modules and .env.
Lovable export
In Lovable, open your project → Settings or GitHub integration → connect GitHub or download a ZIP. Prefer GitHub sync if available; it keeps history clean. Verify package.json exists at the repo root, not nested in a subfolder.
Bolt.new export
Bolt projects often live in StackBlitz. Use “Export to GitHub” or download, then unzip locally. Bolt sometimes generates extra config files — keep them unless build docs say otherwise.
Cursor / local vibe coding
If you built in Cursor, you already have a folder. Initialize git if you have not:
git init
git add .
git commit -m "Initial vibe-coded app"Before committing, scan for .env files. Never push secrets. Add .env to .gitignore and create .env.example with placeholder keys so future you (and Vercel) know what to set.
| Source | Export method | Watch for |
|---|---|---|
| Lovable | GitHub sync or ZIP | Nested folders, missing lockfile |
| Bolt.new | GitHub / download | StackBlitz-specific paths |
| Cursor | Local git init | Committed secrets, localhost URLs |
Push to GitHub the right way
GitHub is the handoff layer between your AI builder and Vercel. Create a new repository on github.com — empty, no README if you already have local files.
git remote add origin https://github.com/YOUR_USER/YOUR_REPO.git
git branch -M main
git push -u origin mainBranch naming matters. Vercel defaults to main for production. Use feature branches later for preview deploys on every pull request.
Quick sanity checks after push:
- Root contains
package.json, not only asrcsubfolder with no config. .gitignoreincludesnode_modules,.env,.next,dist.- Lockfile committed (
package-lock.json,pnpm-lock.yaml, oryarn.lock).
AI-generated repos sometimes include huge binary assets or duplicate components. A five-minute cleanup saves twenty minutes of Vercel build timeouts. Use how to review AI-generated code as a pre-push checklist.
Connect Vercel and import the repo
Log in to vercel.com with GitHub. Click Add New → Project, select your repo, and review framework settings.
Vercel usually detects:
- Framework Preset: Next.js, Vite, etc.
- Root Directory: leave blank unless your app lives in
/apps/webor similar monorepo path. - Build Command: default
npm run build— override only if yourpackage.jsonuses something else. - Output Directory: auto for Next.js; for Vite static sites, often
dist.
Click Deploy. The first build may take two to five minutes. You will get a *.vercel.app URL when it succeeds.
If import fails immediately, check the build log for “Module not found” or “Cannot find package” — usually a missing dependency AI forgot to add to package.json. Install locally, commit, push, and redeploy.
Monorepo and root directory gotchas
Some AI builders nest the app in /frontend or /apps/web. In Vercel import settings, set Root Directory to that folder — not the repo root — or builds fail looking for package.json in the wrong place. If you have both a marketing site and app in one repo, create two Vercel projects pointing at different root directories. This is common when you vibe-coded the product first and added a landing page later.
Node version mismatches
AI templates sometimes assume Node 20 while Vercel defaults to 18. Add "engines": { "node": ">=20" } to package.json or set Node version in Project Settings → General. Cryptic fetch or ESM errors during build often trace to version skew, not broken logic.
Set environment variables
AI-built apps break in production for one reason more than any other: missing environment variables. Local .env files do not travel to Vercel. You must add each key in Project Settings → Environment Variables.
Common variables for vibe-coded stacks:
| Variable | Used by | Notes |
|---|---|---|
NEXT_PUBLIC_SUPABASE_URL | Supabase client | Must be prefixed NEXT_PUBLIC_ for browser access in Next.js |
NEXT_PUBLIC_SUPABASE_ANON_KEY | Supabase auth | Anon key is safe for client; never expose service role |
OPENAI_API_KEY | Server routes | Server-only — no NEXT_PUBLIC_ prefix |
STRIPE_SECRET_KEY | Payments | Server-only |
DATABASE_URL | Prisma / ORM | Server-only |
Set variables for Production, Preview, and Development unless you intentionally use different backends per environment. After adding vars, redeploy — existing deployments do not pick up new env values automatically.
Supabase tip: add your Vercel domain to Supabase Auth redirect URLs, or login will fail silently in production.
Preview deploys and production
Every push to a non-main branch triggers a preview deployment with its own URL. This is essential for vibe coding: you can ask Cursor or Claude to fix a branch, push, and share the preview link without touching production.
Recommended workflow:
- main = production (your custom domain later).
- feature/fix-auth = preview URL for testing.
- Merge to main only after preview looks correct.
Enable “Automatically expose System Environment Variables” if your app reads VERCEL_URL. Custom domains: Project Settings → Domains → add your domain and follow DNS instructions (usually a CNAME to cname.vercel-dns.com).
Planning SEO before launch? See SEO for vibe-coded apps so your live URL is indexable from day one.
Custom domains without breaking auth
Adding app.yourdomain.com takes minutes in Vercel Domains, but auth providers need the new URL too. Update Supabase redirect URLs, Clerk allowed origins, and OAuth app callbacks the same day you switch DNS — otherwise users complete login on *.vercel.app while production marketing points elsewhere. Keep the default Vercel URL active as a fallback until DNS propagates (often under an hour, sometimes 24).
Fix common build failures after AI codegen
AI-generated code deploys until it does not. These failures appear constantly in vibe coding deployment tutorials — and all are fixable in one sitting.
“Module not found” or missing packages
The model imported a library but never ran npm install package-name. Add the dependency locally, commit lockfile, push.
TypeScript errors fail the build
Vercel runs strict builds for Next.js. Fix types or temporarily set typescript.ignoreBuildErrors in next.config.js — only as a stopgap; fix types before charging customers.
ESLint errors block deploy
Similar fix: resolve lint issues or adjust eslint.ignoreDuringBuilds short term. Long term, run lint locally in Cursor before push.
Environment variable undefined at build time
NEXT_PUBLIC_* vars must exist at build time for client bundles. Add them in Vercel before redeploying.
API routes work locally but 500 in production
Usually missing server env vars or CORS. Check Vercel function logs: Project → Deployments → select deploy → Logs.
Image or asset 404
AI often uses wrong paths (/public/logo.png vs ./logo.png). Next.js static assets belong in /public.
When builds fail repeatedly, use targeted prompts from debugging prompts for vibe coding — paste the Vercel log, ask for a minimal fix, one file at a time.
Serverless function timeouts and body size
AI-generated API routes that call OpenAI or process uploads may exceed Vercel Hobby limits (10s execution on some plans, body size caps). Symptoms: 504 errors only in production. Fix by streaming responses, moving heavy work to background jobs, or upgrading plan. Log the function duration in Vercel → Functions tab before rewriting architecture.
Edge vs Node runtime confusion
Next.js routes with export const runtime = 'edge' cannot use certain Node APIs. AI models sprinkle edge runtime for speed without checking dependencies. If build succeeds but runtime crashes, switch the route to Node runtime or remove incompatible packages like native bcrypt — use bcryptjs instead.
Post-deploy checklist
A live URL is not “done.” Run through this list before you share the link:
- Smoke test auth flows — sign up, login, logout on the Vercel URL, not localhost.
- Test one paid or protected route if applicable.
- Check mobile layout — AI UIs often break at 375px width.
- Verify API keys are server-side — view page source; secrets should not appear in client JS.
- Add analytics if you are launching publicly.
- Set up error monitoring (Sentry free tier) — AI code throws edge cases.
If this is your first ship, avoid the token-wasting loops described in vibe coding mistakes that waste tokens — deploy early, fix on preview branches, merge when stable.
FAQ
Can I deploy a Lovable app to Vercel for free?
Yes. Vercel’s hobby tier covers most MVPs. You pay when you need team features, heavy bandwidth, or enterprise compliance. Lovable may have its own hosting — Vercel gives you more control, custom domains, and standard Git workflow.
Do I need Docker to deploy vibe-coded apps on Vercel?
No. Vercel builds from your Git repo using native framework support. Docker is for other platforms or self-hosting. For typical Next.js or Vite AI output, connect GitHub and deploy.
Why does my app work on localhost but not on Vercel?
Almost always environment variables, auth redirect URLs, or hardcoded localhost API endpoints. Compare your local .env to Vercel Project Settings line by line.
How long does the first Vercel deploy take?
Usually two to five minutes for a small AI-built app. Monorepos or heavy dependencies can take longer. Subsequent deploys are often faster due to caching.
You now have a repeatable path to deploy vibe-coded app to Vercel: export, push to GitHub, import, set env vars, fix the predictable build errors, and use preview URLs to iterate safely. For your next step — auth, CI/CD, or tool choice — browse best vibe coding tools in 2026 and the 7-day beginner plan to keep shipping without burning credits on redeploy loops.
