Vite Local Development Guide

Vite is a next-generation frontend build tool that leverages the browser’s native ESM and esbuild for pre-bundling during development, offering cold starts and hot module replacement (HMR) that are significantly faster than traditional Webpack. Official templates for Vue, React, Svelte, Solid, and others use Vite by default.

Default localhost Access

After starting the terminal, the actual URL will be printed; if port 5173 is occupied, Vite will automatically attempt the next port (5174…).

Quick Start

npm create vite@latest my-app
cd my-app
npm install
npm run dev

Optional templates include: React, Vue, Svelte, Solid, Vanilla, etc.

Modify Port and Host

vite.config.ts:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    host: true, // Allow LAN access, e.g., http://192.168.x.x:3000
    open: true, // Open the browser on startup
  },
});

Or via command line: npm run dev -- --port 3000 --host

API Proxy

To avoid CORS issues when coordinating with the backend:

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
});

Relationship with Framework Articles

5173 is the “default port” for the Vite ecosystem; searching for localhost:5173 typically leads to the Vite development server.

Frequently Asked Questions

Port 5173 Conflict
Refer to the port-conflicts article; alternatively, change the configuration to 3000, 5174, etc.

HMR Not Working
Check if you are accessing through a reverse proxy; the proxy must support WebSocket. Note the file watching limitations under WSL; you can set server.watch.usePolling: true.

Summary

Vite local development defaults to http://localhost:5173, serving as the standard dev server for modern React/Vue/Svelte projects, with build outputs located in dist/ for static deployment.