localhost:5173

http://localhost:5173

Port 5173 is the default development server port for Vite, a next-generation frontend build tool. Vite provides instant server start, lightning-fast Hot Module Replacement (HMR), and optimized builds for React, Vue, Svelte, and vanilla JavaScript projects.

→ Open localhost:5173

What is Vite?

Vite (French word for "fast") is a modern build tool that offers:

Instant Server Start - No bundling in development
Lightning Fast HMR - Updates reflect instantly
Native ES Modules - Uses browser ESM support
Optimized Builds - Pre-configured Rollup production builds
Framework Support - React, Vue, Svelte, Preact, Lit
TypeScript Support - Built-in TypeScript compilation
CSS Pre-processors - Sass, Less, Stylus support

Projects Using Port 5173

Vite Development Server - Default port since Vite 3.0
Vite + React - React applications with Vite
Vite + Vue - Vue 3 applications with Vite
Vite + Svelte - Svelte applications with Vite
SvelteKit - Uses Vite under the hood
Astro - Static site generator using Vite
Nuxt 3 - Vue framework powered by Vite

Create Vite Project

Create New Vite App

# Create Vite project with npm
npm create vite@latest

# Or with yarn
yarn create vite

# Or with pnpm
pnpm create vite

# Follow prompts:
# Project name: my-vite-app
# Select framework: React / Vue / Svelte / Vanilla
# Select variant: TypeScript / JavaScript

# Navigate to project
cd my-vite-app

# Install dependencies
npm install

# Start development server
npm run dev

# Server starts at: http://localhost:5173
    

Create Vite + React Project

# Create React + TypeScript project
npm create vite@latest my-react-app -- --template react-ts

# Or React + JavaScript
npm create vite@latest my-react-app -- --template react

# Install and run
cd my-react-app
npm install
npm run dev

# Access at: http://localhost:5173
    

Create Vite + Vue Project

# Create Vue 3 + TypeScript project
npm create vite@latest my-vue-app -- --template vue-ts

# Or Vue 3 + JavaScript
npm create vite@latest my-vue-app -- --template vue

# Install and run
cd my-vue-app
npm install
npm run dev

# Access at: http://localhost:5173
    

Start Vite Development Server

# Start development server
npm run dev

# Server output:
# VITE v4.x.x  ready in xxx ms
# ➜  Local:   http://localhost:5173/
# ➜  Network: use --host to expose

# Start with specific host
npm run dev -- --host

# Start with specific port
npm run dev -- --port 5174

# Open browser automatically
npm run dev -- --open

# Combine options
npm run dev -- --host --port 5173 --open
    

Change Vite Port from 5173

Command Line Option

# Run on different port
npm run dev -- --port 5174
npm run dev -- --port 3000

# Or set in package.json
{
  "scripts": {
    "dev": "vite --port 5174",
    "dev:5000": "vite --port 5000"
  }
}

# Run: npm run dev:5000
    

Configure in vite.config.js

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5174,
    // Optional: strictPort fails if port is in use
    strictPort: false,
    // Optional: automatically open browser
    open: true,
    // Optional: allow network access
    host: true
  }
})
    

Environment Variable

# Set PORT environment variable
# Linux/Mac
PORT=5174 npm run dev

# Windows PowerShell
$env:PORT=5174; npm run dev

# Windows Command Prompt
set PORT=5174 && npm run dev
    

Fix "Port 5173 Already in Use"

Error: Port 5173 is already in use

Another Vite dev server or process is using port 5173.

Another Vite project is running
Previous dev server didn't shut down properly
Zombie Node.js process on port 5173
Different application using same port

Solutions

Press Ctrl+C in terminal to stop Vite
Use different port: npm run dev -- --port 5174
Kill process using port 5173
Set strictPort: false in config to auto-increment
Restart terminal or IDE

Find and Kill Process on Port 5173

Windows

# Find process using port 5173
netstat -ano | findstr :5173

# Kill process by PID
taskkill /PID [process_id] /F

# Kill all node processes (use with caution)
taskkill /IM node.exe /F
    

Linux/Mac

# Find process on port 5173
lsof -i :5173
sudo lsof -i :5173

# Kill process directly
lsof -ti:5173 | xargs kill -9
sudo lsof -ti:5173 | xargs kill -9

# Using npx kill-port
npx kill-port 5173

# Check all node processes
ps aux | grep node
    

Vite Configuration Options

// vite.config.js - Complete configuration
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  
  server: {
    port: 5173,
    host: true, // Listen on all addresses
    open: true, // Open browser automatically
    strictPort: false, // Try next available port if occupied
    cors: true, // Enable CORS
    
    // Proxy API requests to backend
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    
    // HTTPS configuration
    https: false,
    
    // Hot Module Replacement options
    hmr: {
      overlay: true
    }
  },
  
  // Build configuration
  build: {
    outDir: 'dist',
    sourcemap: true,
    minify: 'esbuild'
  },
  
  // Path aliases
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components')
    }
  },
  
  // CSS configuration
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
})
    

Vite Project Structure

my-vite-app/
├── index.html          # Entry HTML file
├── package.json        # Dependencies and scripts
├── vite.config.js      # Vite configuration
├── .gitignore
├── public/            # Static assets (served as-is)
│   └── favicon.ico
└── src/
    ├── main.jsx       # Application entry point
    ├── App.jsx        # Root component
    ├── App.css
    ├── components/    # React/Vue components
    │   └── Hello.jsx
    ├── assets/       # Images, fonts
    │   └── logo.svg
    └── styles/       # Global styles
        └── index.css

# package.json scripts
{
  "scripts": {
    "dev": "vite",              # Start dev server
    "build": "vite build",      # Production build
    "preview": "vite preview"   # Preview production build
  }
}
    

Vite vs Other Build Tools

Feature	Vite	Create React App	Webpack
Default Port	5173	3000	8080
Cold Start	Instant (<1s)	Slow (10-30s)	Slow (varies)
HMR Speed	Instant	Moderate	Moderate
Bundle in Dev	No (ESM)	Yes	Yes
Build Tool	Rollup	Webpack	Webpack
Configuration	Minimal	Zero config	Complex

Enable HTTPS on Vite

// vite.config.js
import { defineConfig } from 'vite'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [basicSsl()],
  server: {
    https: true,
    port: 5173
  }
})

// Install plugin
npm install @vitejs/plugin-basic-ssl -D

// Start server
npm run dev

// Access at: https://localhost:5173
// Browser will show certificate warning (normal for self-signed)
    

Vite Environment Variables

# .env file (root of project)
VITE_API_URL=http://localhost:3000
VITE_APP_TITLE=My Vite App
VITE_ENABLE_FEATURE=true

# .env.development
VITE_API_URL=http://localhost:3000

# .env.production
VITE_API_URL=https://api.production.com

# Access in code (must start with VITE_)
// src/App.jsx
const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE

console.log('API URL:', apiUrl)
console.log('Mode:', import.meta.env.MODE) // 'development' or 'production'
console.log('Dev:', import.meta.env.DEV)   // boolean
console.log('Prod:', import.meta.env.PROD) // boolean
    

Build Vite Application

# Production build
npm run build

# Output to dist/ folder
# Optimized, minified, tree-shaken

# Preview production build locally
npm run preview

# Preview starts on http://localhost:4173 by default

# Build with custom output directory
vite build --outDir build

# Build with source maps
vite build --sourcemap

# Analyze bundle size
npm run build -- --mode analyze
    

Vite Proxy Configuration

// vite.config.js - Proxy API requests to backend
export default defineConfig({
  server: {
    proxy: {
      // Proxy /api requests to backend on port 3000
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      
      // Proxy WebSocket connections
      '/socket.io': {
        target: 'ws://localhost:3001',
        ws: true
      },
      
      // Multiple proxy rules
      '/auth': 'http://localhost:3002',
      '/users': {
        target: 'http://localhost:3003',
        changeOrigin: true
      }
    }
  }
})

// In your app, fetch from /api
fetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data))

// Vite proxies to http://localhost:3000/users
    

Access Vite from Other Devices

# Allow network access
npm run dev -- --host

# Or in vite.config.js
export default defineConfig({
  server: {
    host: true, // or '0.0.0.0'
    port: 5173
  }
})

# Vite will show both URLs:
# ➜  Local:   http://localhost:5173/
# ➜  Network: http://192.168.1.100:5173/

# Access from phone/tablet on same network
# http://192.168.1.100:5173

# Find your IP
# Windows: ipconfig
# Linux/Mac: ifconfig or ip addr show
    

Common Port 5173 Issues

Vite server won't start - port busy

Kill process using port 5173
Use different port with --port flag
Set strictPort: false in config
Check for zombie Node processes

HMR not working

Check WebSocket connection in browser DevTools
Verify firewall isn't blocking connections
Try --host flag if using WSL
Check file watcher limits on Linux

Cannot access from other devices

Start with --host flag
Set host: true in vite.config.js
Check firewall allows port 5173
Use network IP, not localhost

Vite Plugins

// Popular Vite plugins
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vue from '@vitejs/plugin-vue'
import svelte from '@sveltejs/vite-plugin-svelte'

// Install plugins
npm install @vitejs/plugin-react -D
npm install @vitejs/plugin-vue -D
npm install @sveltejs/vite-plugin-svelte -D

// Additional useful plugins
npm install vite-plugin-pwa -D           // PWA support
npm install vite-plugin-compression -D   // Gzip compression
npm install vite-plugin-html -D          // HTML template
npm install vite-plugin-restart -D       // Auto-restart on config change

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    react(),
    VitePWA(),
    compression()
  ]
})
    

Performance Tip: Vite's speed comes from serving native ES modules during development. No bundling means instant cold starts and lightning-fast HMR regardless of app size.

Frequently Asked Questions

Why does Vite use port 5173?

Vite 3.0 changed from port 3000 to 5173 to avoid conflicts with other popular tools. "5173" resembles "VITE" on a phone keypad (5=J/K/L, 1=, 7=P/Q/R/S, 3=D/E/F).

Is Vite faster than Create React App?

Yes, significantly. Vite starts instantly (<1 second) while CRA can take 10-30 seconds. Vite's HMR is also much faster because it doesn't rebundle the entire app.

Can I use Vite with existing projects?

Yes, but migration requires configuration changes. Vite expects ES modules, so CommonJS code needs updates. Official migration documentation available for popular frameworks.

Does Vite work with TypeScript?

Yes, Vite has built-in TypeScript support. Just use .ts/.tsx files and Vite handles compilation automatically. No additional configuration needed.

How do I deploy Vite apps?

Run npm run build to create optimized static files in dist/ folder. Deploy this folder to any static hosting: Vercel, Netlify, GitHub Pages, etc.

Related Ports and Resources

localhost:3000 - React/Node.js port
localhost:4200 - Angular CLI port
localhost:8080 - Vue CLI port
localhost:5000 - Flask/Svelte port
localhost:4173 - Vite preview port
Connection Issues - Fix port problems