Skip to main content
Vite is a modern, fast build tool for frontend development with instant server start and lightning-fast hot module replacement (HMR).
Official documentation: vite.dev

​
Prerequisites

Before using Vite, ensure Node.js is installed on your system.
Check Node.js installation
node -v
If Node.js is not installed, download it from nodejs.org.

​
Installation Methods

Install Vite globally on your system.
Install globally
npm install -g vite
Global installation allows you to use Vite commands from anywhere, but project-specific versions are recommended for consistency.

​
Quick Start

1

Create Project

Use the Vite project creator to scaffold a new application.
Create Vite project
npm create vite@latest
You’ll be prompted to:
  • Choose a project name
  • Select a framework (React, Vue, Svelte, etc.)
  • Choose a variant (JavaScript, TypeScript, etc.)
2

Navigate to Project

Enter project directory
cd your-project-name
3

Install Dependencies

Install packages
npm install
4

Start Development Server

Run development server
npm run dev
Your application will be available at http://localhost:5173 (default port).

​
Common Commands

CommandDescription
node -vCheck if Node.js is installed
npmInstall packages globally
npxCreate project temporarily without global install
npm install -g viteInstall Vite globally
npm create vite@latestCreate a new Vite project
npm run devStart development server
npm run buildBuild for production
npm run previewPreview production build locally

​
Project Structure

A typical Vite project structure: 
my-vite-app/
├── node_modules/
├── public/              # Static assets
├── src/
│   ├── assets/         # Images, fonts, etc.
│   ├── components/     # Reusable components
│   ├── App.jsx         # Main app component
│   └── main.jsx        # Entry point
├── index.html          # HTML entry
├── package.json        # Dependencies and scripts
├── vite.config.js      # Vite configuration
└── .gitignore

​
Configuration

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,              // Custom port
    open: true,              // Auto-open browser
  },
  build: {
    outDir: 'dist',          // Output directory
    sourcemap: true,         // Generate sourcemaps
  }
})
vite.config.js with aliases
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@assets': path.resolve(__dirname, './src/assets'),
    }
  }
})
Now you can import with clean paths:
import Button from '@components/Button'
import logo from '@assets/logo.svg'

​
Development Workflow

npm run dev

​
Framework-Specific Setup

Create React project
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
For TypeScript:
npm create vite@latest my-react-app -- --template react-ts

​
Key Features

Lightning Fast

Instant server start and ultra-fast Hot Module Replacement (HMR) regardless of app size.

Optimized Builds

Production builds use Rollup for highly optimized static assets with automatic code splitting.

Rich Features

TypeScript, JSX, CSS, and more work out of the box with no configuration needed.

Framework Agnostic

First-class support for React, Vue, Svelte, and vanilla JavaScript/TypeScript.

​
Environment Variables

Vite exposes environment variables through import.meta.env.
Create .env files in your project root:
.env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App
Only variables prefixed with VITE_ are exposed to your client-side code for security reasons.
Access in your code:
const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE
const isDev = import.meta.env.DEV
const isProd = import.meta.env.PROD
Different environment files:
  • .env - Loaded in all cases
  • .env.local - Loaded in all cases, ignored by git
  • .env.[mode] - Only loaded in specified mode (e.g., .env.production)
  • .env.[mode].local - Only loaded in specified mode, ignored by git

​
Troubleshooting

If port 5173 is already in use, Vite will automatically try the next available port. To specify a custom port:
vite.config.js
export default defineConfig({
  server: {
    port: 3000
  }
})
Or run with CLI flag:
npm run dev -- --port 3000
Ensure all dependencies are installed:
npm install
Clear cache and reinstall:
rm -rf node_modules package-lock.json
npm install
If HMR becomes slow in large projects:
  • Reduce the number of files being watched
  • Use path aliases to optimize imports
  • Check for circular dependencies
  • Consider splitting large components

​
Best Practices

Use npx

Always use npm create vite@latest to ensure you’re using the latest version.

Environment Variables

Prefix environment variables with VITE_ and never commit .env files with secrets.

Path Aliases

Configure path aliases to avoid deep relative imports like ../../../components/Button.

Build Analysis

Regularly analyze your production bundle size to catch bloat early.

​
Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us