Why Your Vibe-Coded App Won't Deploy (And How to Fix It)

You've spent days prompting your way to a working app. It looks great on localhost. You push to GitHub, the CI/CD pipeline kicks off, and then... red. Build failed. Or worse — it "succeeds" but the live site shows a blank page.

If this sounds familiar, you're not alone. Deployment is where most vibe-coded projects hit their first real wall.

---

The Gap Between "It Works" and "It's Deployed"

AI coding tools are brilliant at getting something running on your machine. But they operate in a bubble. They don't know about your hosting provider's build configuration, your CI/CD pipeline's expectations, or the dozen environment variables your production setup needs.

The result is a category of failures that are invisible during development but catastrophic during deployment.

The 7 Most Common Deployment Failures

1. Wrong Output Directory

This is the single most common deployment failure we see. Your hosting platform expects the built files in a specific folder, but your build tool outputs somewhere else.

• Vite outputs to dist/
• Create React App outputs to build/
• Next.js outputs to .next/

If your deployment config says output_location: "build" but you're using Vite, your deploy will "succeed" but serve nothing. The fix is simple once you know — but AI rarely sets this correctly because it doesn't know your hosting platform.

Fix: Check your build tool's documentation for the output directory, then match it exactly in your deployment workflow or hosting config.

2. Missing Environment Variables

On localhost, your .env file has everything. In production, those variables don't exist unless you explicitly add them to your hosting platform's settings.

Common symptoms:

• API calls return 401 or 403
• Database connections fail silently
• The app loads but features don't work
• Console shows undefined where keys should be

Fix: List every variable in your .env file. Add each one to your hosting platform's environment settings. Never commit .env to git — use .env.example as a template.

3. SPA Routing Returns 404

Your React or Vue app uses client-side routing. Navigate from the homepage to /blog and it works. But paste yourdomain.com/blog directly into the browser and you get a 404.

This happens because the server looks for a physical file at /blog/index.html, which doesn't exist. The routing is handled by JavaScript, but the server doesn't know that.

Fix: Add a fallback rule that redirects all routes to index.html. For Azure Static Web Apps, add a staticwebapp.config.json. For Netlify, add a _redirects file. For Vercel, add rewrites to vercel.json.

4. Dependencies That Only Work Locally

AI loves installing packages. Your package.json might have 80+ dependencies, some of which:

• Require native binaries that aren't available in the CI environment
• Were added as devDependencies but are needed at runtime
• Have peer dependency conflicts that npm silently ignores locally but fail in CI

Fix: Run npm ci (not npm install) in a clean directory to simulate the CI environment. Fix any errors before pushing.

5. Hardcoded Localhost URLs

AI frequently hardcodes http://localhost:3000 or http://127.0.0.1:8080 as API endpoints. These work perfectly in development. In production, they point to nothing.

Fix: Use environment variables for all API URLs. Set VITE_API_URL (or equivalent) differently for development and production.

6. External Asset References

Your app loads images from Unsplash, CDNs, or other external URLs. In development, they load fine. In production:

• CORS policies block them
• The external service rate-limits your domain
• The URLs change or expire
• Page load times suffer from dozens of external requests

Fix: Download external assets into your project's public directory and reference them locally. This also improves performance and reliability.

7. The "It Built But Nothing Renders" Problem

The build succeeds, the files are deployed, but the page is blank. This usually means:

• JavaScript errors that crash the app on load (check browser console)
• The base path in your build config doesn't match your hosting setup
• CSS or JS files are referenced with wrong paths
• A critical API call fails and there's no error boundary to catch it

Fix: Always implement error boundaries in React apps. Check the browser console on the deployed site — the error is almost always visible there.

A Pre-Deployment Checklist

Before you push, run through this:

• ✅ npm run build succeeds locally with zero errors
• ✅ Output directory matches your hosting config
• ✅ All environment variables are set in the hosting platform
• ✅ No hardcoded localhost URLs remain in the code
• ✅ External assets are downloaded locally
• ✅ SPA fallback routing is configured
• ✅ .gitignore includes node_modules/, .env, and build output
• ✅ You've tested the production build locally with npx serve dist or equivalent

When Dev Changes Don't Reach Production

Another common frustration: you've made changes, pushed to GitHub, but the live site hasn't updated. Common causes:

• Wrong branch: Your CI/CD only triggers on main but you pushed to dev
• Build cache: The hosting platform cached a previous build. Force a fresh deploy.
• CDN cache: The content is updated but your browser or CDN is serving stale files. Hard refresh or purge the cache.
• Silent build failures: The build "passed" but the deploy step was skipped due to a conditional in your workflow

Fix: Always check your CI/CD logs after pushing. Don't assume green means deployed — read the output.

We've Seen All of This Before

At VibeGO, deployment rescue is one of our most common engagements. We take projects that are stuck in localhost limbo and get them live — properly. That means CI/CD pipelines, environment management, SSL, monitoring, and fallback configurations that actually work.

If your vibe-coded app won't deploy, or deploys but doesn't work, we can fix it — usually faster than you'd expect.

Book a Deployment Review →

Talk to the VibeGO Team →