Vite

Fast and modern frontend build tool setup guide

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

npm (Global)

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.

npx (Temporary)

Use npx to create projects without global installation.

Create project with npx

npm create vite@latest

This is the recommended approach. npx downloads and runs the latest version temporarily, ensuring you always use the most current release.

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

Command	Description
node -v	Check if Node.js is installed
npm	Install packages globally
npx	Create project temporarily without global install
npm install -g vite	Install Vite globally
npm create vite@latest	Create a new Vite project
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview 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

Basic vite.config.js

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
  }
})

Path Aliases

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

Start development

npm run dev

Framework-Specific Setup

React

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

Vue

Create Vue project

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

For TypeScript:

npm create vite@latest my-vue-app -- --template vue-ts

Svelte

Create Svelte project

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

For TypeScript:

npm create vite@latest my-svelte-app -- --template svelte-ts

Vanilla JS

Create vanilla JavaScript project

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

For TypeScript:

npm create vite@latest my-vanilla-app -- --template vanilla-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.

Using Environment Variables

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

Port Already in Use

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

Module Not Found Errors

Ensure all dependencies are installed:

npm install

Clear cache and reinstall:

rm -rf node_modules package-lock.json
npm install

Slow HMR Performance

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

• Official Documentation
• GitHub Repository
• Plugin Directory
• Community Chat