Jun 2, 2026 · Frontend Stacks · 1min read

React + Vite Local Development Guide

Create a React project with Vite, start a hot-reloading development server at localhost:5173, and build production static assets.

React + Vite is currently the most popular combination for local React development: Vite provides ultra-fast cold starts and HMR, while React handles the UI. It is suitable for single-page applications (SPAs), component libraries, and small to medium-sized frontend projects.

Quick Start

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

Default localhost Access

Purpose	Address
Development Server	http://localhost:5173
Preview Production Build	http://localhost:4173 (`npm run preview`)

You can modify server.port and server.host in vite.config.ts.

Common Commands

Command	Description
`npm run dev`	Start the development server
`npm run build`	Output to `dist/`
`npm run preview`	Preview the build results locally

Coordinating with Backend APIs

During development, you can configure a proxy in vite.config.ts to avoid cross-origin issues in the browser:

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

Frontend requests to /api/users will be forwarded to the backend running on port 8080.

Summary

React + Vite is quick to get started with and provides smooth hot reloading. You can debug locally at http://localhost:5173. For production, deploy the dist/ directory to static hosting services like NGINX or Cloudflare Pages.