How to Deploy a Vibe-Coded App to Production Without Breaking Everything

The Deployment Gap in Vibe Coding

AI coding tools are excellent at building features. They are not excellent at preparing code for production. The app works on localhost. The demo looks great. But between "it runs on my machine" and "it runs safely for real users," there is a list of things that AI tools consistently skip.

This guide covers every step of that gap. It is not specific to any hosting platform - whether you deploy to Vercel, Netlify, Railway, Render, Fly.io, a VPS, or anywhere else, the principles and checks are the same.

Step 1: Separate Secrets from Code

This is the most critical step and the one most often skipped in vibe-coded projects.

What to move to environment variables

• Database connection strings (DATABASE_URL)
• API keys for third-party services (Stripe, OpenAI, SendGrid, Supabase)
• JWT secrets and session keys
• OAuth client secrets
• Any credential that grants access to a system

How to do it

1. Create a .env file in your project root with all secrets
2. Add .env to your .gitignore (verify it is actually ignored with git status)
3. Create a .env.example file with the variable names but no values - this documents what env vars are needed
4. Update your code to read from process.env instead of hardcoded values
5. If secrets were ever committed to git history, rotate them immediately - removing from current code does not remove from history

Frontend vs backend variables

In Next.js, variables prefixed with NEXT_PUBLIC_ are embedded in the browser bundle and visible to anyone. In Vite, it is VITE_. Never put secret keys behind these prefixes. Only public, non-sensitive values (API base URLs, public Stripe keys, feature flags) should use public prefixes.

Step 2: Set Up HTTPS

Every production app needs HTTPS. No exceptions.

Managed platforms (Vercel, Netlify, Railway)

HTTPS is automatic. Your app gets a valid SSL certificate when you deploy. Verify it works by visiting your URL with https:// and checking that the browser shows a lock icon. Also verify that http:// redirects to https://.

Self-hosted (VPS, Docker)

Use Let's Encrypt with a reverse proxy like Caddy (auto-HTTPS built in) or Nginx with Certbot. Set up auto-renewal so your certificate does not expire without warning. A typical Caddy configuration handles HTTPS automatically with zero additional config.

Custom domains

If you are using a custom domain, make sure your DNS records point to the right server and your hosting platform's SSL covers the custom domain. Some platforms require you to verify domain ownership before issuing a certificate.

Step 3: Add Security Headers

Security headers tell the browser how to handle your app's content. AI-generated apps almost never include them. Adding them takes 5 minutes and prevents entire categories of attacks.

Essential headers

Where to add them

Vercel: Add a headers section to vercel.json.
Netlify: Add to _headers file or netlify.toml.
Next.js: Add to the headers() function in next.config.js.
Express: Use the helmet npm package (one line of code).
Nginx/Caddy: Add directly to the server configuration.

Step 4: Build and Test for Production

Your development build and production build are different. Always test the production build before deploying.

For Next.js / React apps

npm run build
npm run start

Visit http://localhost:3000 and test the critical paths: login, main feature, payment (if applicable). Look for:

• Missing environment variables that worked in development but are not set for production
• API endpoints that use localhost URLs instead of production URLs
• Asset loading failures (images, fonts, scripts)
• Console errors that only appear in the production build

For static sites

Build the static output and serve it locally with a simple HTTP server. Check that all links work and no resources 404.

Step 5: Configure Error Tracking

In development, you see errors in your terminal. In production, errors happen silently unless you capture them.

Options

• Sentry - the most popular option. Free tier covers 5,000 errors per month. Add the SDK to your frontend and backend.
• LogRocket - session replay plus error tracking. Useful for debugging UI issues.
• Simple logging - if you are on a VPS, structured logging to a file with a log rotation is the minimum viable option.

The key requirement: when a user hits an error in production, you should know about it without them telling you.

Step 6: Set Up Monitoring

Monitoring tells you when something breaks after deployment. You need three types:

Uptime monitoring

A service that pings your URL every few minutes and alerts you when it goes down. Free options exist, and VibeDoctor includes uptime monitoring on paid plans with checks as frequent as every minute.

SSL certificate monitoring

Auto-renewal usually works, but when it fails, your users see a security warning instead of your app. Set up alerts for certificate expiry at least 14 days in advance.

Performance monitoring

Track your Lighthouse scores over time. A score that drops from 75 to 40 after a deployment tells you something went wrong. VibeDoctor tracks performance scores across scans so you can see the trend.

Step 7: Run Pre-Deployment Checks

Before you push the deploy button, run these checks:

1. npm audit - fix any critical or high dependency vulnerabilities
2. Environment variables - verify all required env vars are set on your hosting platform
3. Build succeeds - npm run build completes without errors
4. No .env in git - git status should not show .env
5. No localhost URLs - search your code for localhost and 127.0.0.1 in non-development files
6. CORS configured - if your frontend and backend are on different domains, set the correct allowed origins (not *)

Step 8: Deploy

The actual deployment depends on your platform:

Vercel / Netlify

Connect your GitHub repository. Push to the main branch. The platform builds and deploys automatically. Set environment variables in the platform's dashboard (not in the repository).

Railway / Render / Fly.io

Similar to Vercel but supports backend services. Connect your repo, configure environment variables, and deploy. These platforms handle SSL and domain routing for you.

VPS (DigitalOcean, Hetzner, etc.)

You manage everything: reverse proxy, SSL certificates, process management, and deployments. Use Docker Compose for reproducible builds. Use a reverse proxy like Caddy for automatic HTTPS. Use PM2 or systemd for process management.

Step 9: Verify the Live Deployment

After deploying, verify that the live app works correctly:

1. HTTPS - visit with https:// and check the lock icon
2. HTTP redirect - visit with http:// and verify it redirects to HTTPS
3. Critical paths - test login, main feature, and payment flow manually
4. Console errors - open browser DevTools and check for JavaScript errors
5. Mobile - test on a real phone or Chrome DevTools mobile emulation
6. API endpoints - verify your API returns data (not CORS errors or 500s)

Step 10: Run a Full Diagnostic Scan

The final step. Run a comprehensive scan against your live deployed URL and your connected GitHub repository.

A VibeDoctor scan checks both:

• Your codebase - security vulnerabilities, dependency CVEs, code quality, AI-specific patterns, hallucinated imports
• Your live URL - performance scores, SSL validation, security headers, console errors, broken links, SEO meta tags, page weight

Fix any critical or high findings before sharing your app publicly. Review medium findings and address what you can. This is your final quality gate between "deployed" and "ready for users."

Post-Deployment Checklist

FAQ