How VPN Affects Development Servers

Your local dev server runs on your machine. It should be completely unaffected by VPN. But it often isn't.

VPNs can:

• •

  Redirect localhost DNS resolution

• •

  Block common development ports (3000, 8080, etc.)

• •

  Interfere with websockets (breaking hot reload)

• •

  Break API proxy configurations

Common Development Server Issues

You'll recognize these symptoms:

• •

  Server starts but browser can't connect

• •

  Hot reload stops working mid-session

• •

  API calls to localhost fail

• •

  Websocket connections drop

• •

  "Connection refused" in the browser

Affected Development Tools

Almost every local dev environment is affected:

• •

  React / Next.js dev server

• •

  Vue CLI

• •

  Angular CLI

• •

  Webpack Dev Server

• •

  Vite

• •

  Express / Node servers

• •

  Django / Flask dev servers

If it runs on localhost, VPN can break it.

Diagnosing the Problem

# Start your dev server
npm run dev

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

# Test localhost access
curl http://localhost:3000

Fix 1: Use IP Address

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

Fix 2: Bind to 0.0.0.0

Make your server listen on all network interfaces:

# Start with explicit host
HOST=0.0.0.0 npm run dev

# Find your machine's IP
ipconfig getifaddr en0

Fix 3: Configure Hot Reload Explicitly

Websocket connections for hot reload often break first. Configure them explicitly:

// webpack.config.js
devServer: {
  host: '0.0.0.0',
  client: {
    webSocketURL: 'ws://127.0.0.1:3000/ws',
  },
}

Fix 4: Route Dev Tools Direct (Recommended)

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

Framework-Specific Configurations

Next.js

npm run dev -- -H 0.0.0.0

Create React App

# .env file
HOST=0.0.0.0
WDS_SOCKET_HOST=127.0.0.1

Vite

// vite.config.js
export default {
  server: {
    host: '0.0.0.0',
    hmr: {
      host: '127.0.0.1',
    },
  },
}

Vue CLI

// vue.config.js
module.exports = {
  devServer: {
    host: '0.0.0.0',
  },
}

Verifying Full Functionality

After setting up SplitTunnel:

1. Connect your VPN

2. Start your dev server

3. Open in browser

4. Edit a file—verify hot reload works

5. Test API calls from your app

6. Check browser console for websocket errors

7. Confirm work resources (Slack, email) still accessible