Skip to main content

​
Overview

The portfolio uses Vite as its build tool and development server. The configuration is minimal and leverages Vite’s smart defaults for optimal React development. Location: /vite.config.js

​
Current Configuration

Here’s the complete Vite configuration used in the project: 
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

​
Configuration Options

​
plugins
Plugin[]
required
Array of Vite plugins to enable additional functionality.Currently configured with:
  • @vitejs/plugin-react - Official Vite plugin for React support
Version: ^5.1.1

​
Plugin: @vitejs/plugin-react

The React plugin provides:
  • Fast Refresh (Hot Module Replacement for React)
  • JSX/TSX transformation
  • React DevTools integration
  • Automatic JSX runtime

​
Plugin Configuration

The plugin is used with default settings. You can customize it: 
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      // Enable Fast Refresh (default: true)
      fastRefresh: true,
      
      // Babel plugins (optional)
      babel: {
        plugins: ['@babel/plugin-proposal-decorators']
      },
      
      // Include/exclude files (optional)
      include: '**/*.jsx',
    })
  ],
})

​
Common Customizations

​
Change Server Port

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true // Auto-open browser
  }
})

​
Add Path 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'),
      '@data': path.resolve(__dirname, './src/data')
    }
  }
})
Then import like: 
import { projects } from '@data/projects'
import Header from '@components/Header/Header'

​
Configure Build Output

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true,
    minify: 'terser'
  }
})

​
Add Environment Variables Prefix

export default defineConfig({
  plugins: [react()],
  envPrefix: 'VITE_' // Default, can customize
})

​
Enable CSS Preprocessing

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

​
Configure for Production

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

export default defineConfig(({ command }) => {
  const config = {
    plugins: [react()],
  }
  
  if (command === 'build') {
    config.build = {
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['react', 'react-dom', 'react-router-dom']
          }
        }
      }
    }
  }
  
  return config
})

​
Available Scripts

These npm scripts use the Vite configuration:
​
dev
script
Start development server with host exposure
npm run dev
Runs: vite --host
​
build
script
Build for production
npm run build
Runs: vite buildOutput: /dist directory
​
preview
script
Preview production build locally
npm run preview
Runs: vite preview

​
Dependencies

Vite-related packages in the project: 
{
  "devDependencies": {
    "@vitejs/plugin-react": "^5.1.1",
    "vite": "^7.3.1"
  }
}

​
Performance Optimization

​
Code Splitting

Vite automatically code-splits dynamic imports: 
// Lazy load components
const Projects = lazy(() => import('./components/Projects/Projects'))

​
Asset Optimization

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[hash][extname]'
      }
    },
    chunkSizeWarningLimit: 1000
  }
})

​
Enable Compression

npm install vite-plugin-compression -D

import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    react(),
    compression({ algorithm: 'gzip' })
  ]
})

​
Troubleshooting

​
Clear Cache

rm -rf node_modules/.vite
npm run dev

​
Port Already in Use

Change the port in vite.config.js or kill the process: 
lsof -ti:5173 | xargs kill -9

​
Slow HMR

Exclude large directories: 
export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      ignored: ['**/node_modules/**', '**/dist/**']
    }
  }
})

​
Official Documentation

For more advanced configurations, see:

Build docs developers (and LLMs) love

Get started for freeTalk to us