Why localhost:3000 Stops Working

Port 3000 is the default development port for half the JavaScript ecosystem. React, Next.js, Express—they all reach for it first. And VPNs love to interfere with it.

• •

  Corporate VPNs may block common development ports

• •

  DNS-based VPNs redirect "localhost" resolution

• •

  "Zero trust" VPNs intercept traffic on all ports

Affected Frameworks

If you use any of these, you've probably hit this:

• •

  React (Create React App)

• •

  Next.js

• •

  Vue CLI

• •

  Angular CLI

• •

  Express.js

• •

  Vite

All default to port 3000. All break the same way.

Quick Diagnosis

# Start your dev server
npm run dev

# Check if it's actually listening
lsof -i :3000

# Try the IP directly
curl http://127.0.0.1:3000

Fix 1: Use IP Instead of localhost

Sometimes "localhost" gets redirected by VPN DNS, but the IP stays local. Try http://127.0.0.1:3000 instead of http://localhost:3000.

Fix 2: Change Port

Some ports are less likely to be blocked:

# React
PORT=3001 npm start

# Next.js
npm run dev -- -p 3001

# Vite
npm run dev -- --port 3001

Fix 3: Bind to All Interfaces

Force your dev server to listen on all network interfaces, then access via your Mac's actual IP:

# Next.js
npm run dev -- -H 0.0.0.0

Fix 4: Route Dev Tools Direct (Best)

The most reliable fix: route your development tools outside the VPN tunnel entirely.

Framework Configuration Examples

Next.js

// package.json
{
  "scripts": {
    "dev": "next dev -H 0.0.0.0"
  }
}

Create React App

# .env file
HOST=0.0.0.0
PORT=3000

Vite

// vite.config.js
export default {
  server: {
    host: '0.0.0.0',
    port: 3000
  }
}

Verifying Everything Works

After setting up:

1. Connect your VPN

2. Start your dev server

3. Open http://localhost:3000

4. Check hot reload works

5. Test API routes

6. Confirm work resources are still accessible