Vite

Vite

What is Vite?

Vite is a fast tool for building websites. It helps you see your changes instantly while coding, instead of waiting for the whole site to reload.

Think of it as a super-fast “web server + builder” for modern web apps.

Example

Imagine you want to make a small React app:

  1. Create a new project:
npm create vite@latest my-app
cd my-app
npm install
  1. Start development server:
npm run dev
  1. Open your browser
    Go to http://localhost:5173 → you see your app immediately.
    Change something in the code → it updates instantly, no full reload.
  2. Build for production (optimized):
npm run build

This creates a folder with all files ready to deploy.

✅ Key idea: Vite is fast while coding and still produces optimized files for deployment.

Configuring Vite is fairly straightforward because it uses a single config file, usually called vite.config.js (or .ts for TypeScript). I’ll break it down step by step with examples.

1. Create the config file

If it’s not already created:

touch vite.config.js

Inside, start with a basic template:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; // if using React

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

2. Common Configuration Options

a) Base URL

If your app will be deployed to a subfolder:

export default defineConfig({
  base: '/my-subfolder/',
});

b) Server Options

Control the dev server behavior:

export default defineConfig({
  server: {
    port: 3000,      // default is 5173
    open: true,      // automatically open in browser
    strictPort: true // fail if the port is in use
  }
});

c) Build Options

Control production build settings:

export default defineConfig({
  build: {
    outDir: 'dist',       // folder for production build
    sourcemap: true,      // generate source maps
    minify: 'esbuild',    // options: 'esbuild', 'terser', false
  }
});

d) Aliases

Shortcut paths for imports:

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

Now you can do:

import Button from '@/components/Button';

e) Environment Variables

Create .env files:

VITE_API_URL=https://api.example.com

Access in code:

console.log(import.meta.env.VITE_API_URL);

f) Plugins

Vite supports plugins for frameworks, features, or optimizations:

import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
});

💡 Tip: Most configuration is optional. You only need to add what you actually need. Vite works great with zero-config for React, Vue, or vanilla JS.

Here’s a ready-to-use vite.config.js template for a modern React project with common settings included:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  
  // Project path aliases
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },

  // Dev server settings
  server: {
    port: 3000,       // dev server port
    open: true,       // open browser automatically
    strictPort: true, // fail if port is already in use
  },

  // Build settings
  build: {
    outDir: 'dist',   // output folder for production
    sourcemap: true,  // useful for debugging production code
    minify: 'esbuild',// faster minification
  },

  // Base URL (useful if deploying to subfolder)
  base: '/',

  // Environment variables prefix
  envPrefix: 'VITE_',
});

✅ Features in this template:

  1. React plugin included.
  2. Alias @ → /src for cleaner imports.
  3. Dev server options for auto-opening browser and custom port.
  4. Build options with output folder, sourcemaps, and minification.
  5. Environment variable prefix for .env files.

Leave a Reply