Skip to main content

​
Overview

The SAAC Frontend template uses Vite 7.x as its build tool and development server. Vite provides lightning-fast Hot Module Replacement (HMR), optimized builds, and a rich plugin ecosystem.

​
Configuration File

The Vite configuration is defined in vite.config.ts at the project root:
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react() , tailwindcss()],
})

​
Plugins

​
React SWC Plugin

The @vitejs/plugin-react-swc plugin enables React support with SWC (Speedy Web Compiler).
SWC is a Rust-based compiler that’s significantly faster than Babel:
  • 20x faster compilation times
  • Lower memory usage during development
  • Faster HMR (Hot Module Replacement)
  • Full TypeScript and JSX support built-in
This plugin handles:
  • JSX transformation
  • React Fast Refresh for instant HMR
  • TypeScript transpilation
  • Modern JavaScript features
Configuration options: 
react({
  // Enable Fast Refresh (default: true)
  fastRefresh: true,
  
  // SWC options
  jsxRuntime: 'automatic', // or 'classic'
  jsxImportSource: 'react', // for custom JSX pragma
})

​
Tailwind CSS Plugin

The @tailwindcss/vite plugin integrates Tailwind CSS v4 directly into Vite’s build pipeline.
Tailwind CSS v4 uses a native Vite plugin and doesn’t require PostCSS configuration.
Features:
  • Just-in-Time (JIT) compilation
  • Automatic CSS purging in production
  • Fast HMR for CSS changes
  • No additional PostCSS setup needed

​
Development Server

​
Default Settings

Vite’s default dev server configuration:
​
host
string
default:"localhost"
The hostname to bind the dev server to
​
port
number
default:"5173"
The port number for the dev server
​
open
boolean
default:"false"
Automatically open the browser on server start
​
strictPort
boolean
default:"false"
Exit if port is already in use (instead of trying next port)

​
Customizing Dev Server

vite.config.ts
export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 3000,
    open: true,
    host: true, // Expose to network
    strictPort: true,
  }
})

​
Build Configuration

​
Production Build Options

vite.config.ts
export default defineConfig({
  plugins: [react(), tailwindcss()],
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'esbuild',
    target: 'es2015',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        }
      }
    }
  }
})
​
outDir
string
default:"dist"
Output directory for production build
​
sourcemap
boolean
default:"false"
Generate source maps for debugging production builds
​
minify
'esbuild' | 'terser' | false
default:"'esbuild'"
Minification method. esbuild is faster, terser produces smaller output
​
target
string
default:"'modules'"
Browser compatibility target (es2015, es2020, etc.)

​
Path Aliases

Add path aliases for cleaner imports:
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    }
  }
})
When adding path aliases, make sure to also update tsconfig.json with matching path mappings for TypeScript support.

​
Environment Variables

Vite exposes environment variables through import.meta.env: 
// Accessing env variables
const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV
const isProd = import.meta.env.PROD
.env file example:
.env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=SAAC Frontend
Only variables prefixed with VITE_ are exposed to your client-side code.

​
Commands

The following npm scripts use Vite: 
npm run dev
# Starts Vite dev server on http://localhost:5173

​
Advanced Configuration

​
CSS Preprocessing

vite.config.ts
export default defineConfig({
  plugins: [react(), tailwindcss()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    },
    modules: {
      localsConvention: 'camelCase'
    }
  }
})

​
Optimizing Dependencies

vite.config.ts
export default defineConfig({
  plugins: [react(), tailwindcss()],
  optimizeDeps: {
    include: ['react', 'react-dom'],
    exclude: ['@custom/large-lib']
  }
})

​
Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us