Hardcoded localhost URLs in Production: A Classic Vibe Coding Bug

Why AI-Generated Code Hardcodes localhost

Bolt, Lovable, Cursor and v0 write code that runs during the session, and during the session your app lives at http://localhost:3000 (Next.js) or http://localhost:5173 (Vite). A concrete URL makes the demo work at once, so the address ends up in fetch calls, CORS settings and webhook registrations.

Nothing fails until the first deployment. Then every call to that address fails, because in a user's browser localhost is the user's own computer, and on your server it is the server itself.

The Patterns AI Tools Generate

// BAD: hardcoded localhost in a fetch call
const response = await fetch('http://localhost:3000/api/users');

// BAD: the same address in a constant (easier to fix, still wrong)
const API_BASE = 'http://localhost:3000';
const users = await fetch(`${API_BASE}/api/users`);

// BAD: hardcoded in a Next.js route handler
export async function POST(req: Request) {
  const webhookUrl = 'http://localhost:3000/api/webhook/stripe';
  await registerWebhook(webhookUrl);
}

// BAD: CORS that only allows your dev server
app.use(cors({ origin: 'http://localhost:3000' }));

// BAD: a local service address
const SUPABASE_URL = 'http://localhost:54321';

In production the fetch calls fail with network errors that show up in the browser console, the CORS setting rejects every request from your real domain, and the Supabase URL points at a local Docker container that does not exist on the server.

The Fix: Relative Paths First, Environment Variables Second

If the frontend and the API are deployed together, as in a Next.js app with route handlers, you do not need a URL at all. A relative path works in development and production:

// GOOD: same-origin call, no hostname needed
const response = await fetch('/api/users');

For a separate API or service, read the URL from an environment variable. Which prefix makes it visible in the browser depends on your framework:

// GOOD: Next.js client code, with a local default for development
const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3000';

// GOOD: Vite client code
const API_BASE = import.meta.env.VITE_API_URL;

// GOOD: server-side, fail loudly if the variable is missing
export async function POST(req: Request) {
  const appUrl = process.env.APP_URL;
  if (!appUrl) throw new Error('APP_URL is not set');
  await registerWebhook(`${appUrl}/api/webhook/stripe`);
}

// GOOD: CORS origin from the environment
app.use(cors({ origin: process.env.ALLOWED_ORIGIN ?? 'http://localhost:3000' }));

Never give a secret a public prefix. A service-role key or API secret named NEXT_PUBLIC_... or VITE_... is copied into the JavaScript every visitor downloads. See client-side secret exposure for how that happens.

Where to Set the Production Values

# .env.local  (your machine only, listed in .gitignore)
NEXT_PUBLIC_API_URL=http://localhost:3000
APP_URL=http://localhost:3000

# Production values go in your host's settings, not in a committed file:
#   NEXT_PUBLIC_API_URL=https://api.your-app.com
#   APP_URL=https://your-app.com

Next.js and Vite both copy public variables into the bundle when you build, so change the value in your host's settings and redeploy for it to take effect.

Setting production values is one step of a release. Our guide to deploying a vibe-coded app to production walks through the rest, from HTTPS and security headers to monitoring.

Commit a .env.example

AI tools rarely create one. A committed .env.example lists every variable the app needs, with placeholders instead of real values, so the next deployment does not miss one:

# .env.example  (committed; placeholders only)
NEXT_PUBLIC_API_URL=https://your-app-domain.com
APP_URL=https://your-app-domain.com
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
STRIPE_SECRET_KEY=your-stripe-secret-key

How to Find Hardcoded URLs in Your Codebase

1. Search for the hostnames. Look for localhost and 127.0.0.1 in your source files. A hit inside a string literal that is not an environment fallback is a candidate.
2. Search for dev ports. :3000, :5173, :8080 and :4000 are usually dev server addresses.
3. Check your env files. .env.local and other files with real values must be in .gitignore, and nothing with a secret should be committed.
4. Scan it. VibeDoctor's Vibe Check reports a missing .env.example next to a .env file (CFG-005) in any project, and hardcoded localhost URLs in Python code (CFG-002). For JavaScript and TypeScript, the search in step 1 is still the way to find them. Free to sign up.

FAQ