localhost:5173 — Vite

If you started a React, Vue, or Svelte project recently and expected to see localhost:3000 but got 5173 instead — welcome to Vite. Created by Evan You (the same person who built Vue.js), Vite has effectively replaced Create React App, Vue CLI, and most other frontend build tools. The React team themselves now recommend Vite or Next.js over CRA for new projects.

The name "Vite" is French for "fast," and the port number is an Easter egg: 5-1-7-3 spells "SITE" on a phone keypad. But the speed is the real selling point — Vite's dev server starts in under 300 milliseconds regardless of project size, while CRA could take 30+ seconds.

Quick Access: Open localhost:5173

What Uses Port 5173?

Vite powers the dev server for multiple frameworks. Any of these will land you on 5173:

# React
npm create vite@latest my-app -- --template react
cd my-app && npm install && npm run dev

# Vue
npm create vite@latest my-app -- --template vue

# Svelte
npm create vite@latest my-app -- --template svelte

# SvelteKit
npm create svelte@latest my-app

# Astro
npm create astro@latest

# All output something like:
#   VITE v6.x ready in 250ms
#   ➜ Local: http://localhost:5173/

Why Vite is So Fast

Traditional bundlers like Webpack (used by CRA) bundle your entire application before serving anything to the browser. On a medium project, that means processing thousands of modules at startup.

Vite takes a different approach: it doesn't bundle during development at all. Instead, it serves your source files as native ES modules. When your browser requests App.jsx, Vite transforms just that one file on the fly using esbuild (written in Go, insanely fast) and serves it directly. Dependencies get pre-bundled once and cached. The result: startup is instant, and when you edit a file, only that file gets re-processed — not the whole app.

For production builds, Vite switches to Rollup, which produces optimized, tree-shaken bundles. So you get fast development and optimized production output.

Configuring Vite

Change the Port

// vite.config.js
export default {
  server: {
    port: 3000,        // Use a different port
    open: true,        // Auto-open browser on start
    host: true         // Listen on all interfaces (LAN access)
  }
}

// Or via CLI:
npm run dev -- --port 3000

Proxy API Requests (Avoid CORS)

Your frontend runs on 5173, your backend API on 3000 or 8000. Instead of fighting CORS, tell Vite to proxy API requests:

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      }
    }
  }
}

Now fetch('/api/users') from your frontend transparently hits your backend at localhost:3000/api/users. No CORS headers needed in development.

Environment Variables

# .env file in project root
VITE_API_URL=http://localhost:3000
VITE_APP_TITLE=My App

# Access in code (must start with VITE_):
console.log(import.meta.env.VITE_API_URL)

Vite vs. the Competition

	Vite (5173)	CRA (3000)	Next.js (3000)
Cold start	~250ms	~30 seconds	~3 seconds
HMR speed	Instant	1-5 seconds	~1 second
Build tool	esbuild + Rollup	Webpack	Turbopack/Webpack
SSR support	Plugin-based	No	Built-in
Config	vite.config.js	Eject or craco	next.config.js
Status (2026)	Recommended default	Deprecated	Full-stack framework

Troubleshooting

Port already in use: Vite handles this gracefully — it auto-increments to 5174, 5175, etc. If you want to force a specific port and kill whatever's using it, see the commands in our port 8000 troubleshooting section.

HMR not working (changes don't reflect): Check the browser console for WebSocket errors. HMR relies on a WebSocket connection between Vite and the browser. VPNs, browser extensions, and strict firewalls can break it. Try disabling extensions or adding server.hmr.overlay: true to your config to see error overlays.

Can't access from phone/other device: By default Vite only listens on localhost. Add host: true to the server config (or --host flag) to listen on all network interfaces. Then access via your computer's LAN IP (like 192.168.1.5:5173).

Build works but dev server shows errors: Vite dev and build use different tools (esbuild vs Rollup). Some edge cases behave differently. Run npx vite build to check if the production build also fails — if it doesn't, the issue is esbuild-specific.