React + Vite + Supabase

Configures Vite bundler for React development and production builds.

Includes optimizations for Supabase client and React library.

reads this file automatically. Configuration handles development server,

build optimization, plugin setup, and path aliases.

Configuration Sections

Section	Purpose
plugins	Register Vite plugins (React, etc)
resolve	Module resolution and aliases
server	Development server settings
build	Production build optimization

## Plugins

plugins: [react()]

@vitejs/plugin-react: Handles JSX transformation and Fast Refresh

Fast Refresh: Preserves component state during edits

RESOLVE CONFIGURATION:

resolve: {
  alias: {
    '@': path.resolve(__dirname, './src')  // @/components -> src/components
  }
}

Allows importing with @ prefix for shorter paths

Usage: import Foo from '@/components/Foo'

vs: import Foo from '../../../components/Foo'

Development Server

server: {
  port: 5173,
  open: true  // Auto-open browser on npm run dev
}

port: 5173 (Vite default, change if needed)

open: true opens browser automatically

HMR (Hot Module Replacement) enabled by default

Build Configuration

Option	Value	Purpose
outDir	'dist'	Output folder for production build
sourcemap	true	Generate source maps for debugging
rollupOptions.output.manualChunks	{...}	Code splitting strategy

## Code Splitting Strategy

manualChunks: {
  'react-vendor': ['react', 'react-dom', 'react-router-dom'],
  'supabase-vendor': ['@supabase/supabase-js']
}

Separates large libraries into separate bundle chunks

Benefits: Better caching, parallel loading, smaller app bundle

react-vendor: ~180KB

supabase-vendor: ~200KB

main app: ~50KB (example)

Build Output

After npm run build:

dist/
  ├─ index.html (entry point)
  └─ assets/
      ├─ react-vendor-abc123.js
      ├─ supabase-vendor-def456.js
      ├─ index-ghi789.js
      └─ style-jkl012.css

HASHED FILENAMES:

Content-based hashes (abc123, def456, etc)

Changes to code = different hash

Enables long-term caching

CDN/browser cache files forever

Updates automatically detected by new hash

Development Workflow

npm run dev starts Vite dev server

Open http://localhost:5173 in browser

Edit code, save file

Vite detects change

Module reloaded via HMR

Browser updates instantly

Component state preserved (Fast Refresh)

PRODUCTION BUILD:

npm run build runs Vite production build

Code is minified and optimized

Unnecessary code is tree-shaken (removed)

Output written to dist/ folder

dist/ ready for deployment to any static host

SUPABASE-SPECIFIC OPTIMIZATIONS:

WebSocket support: Vite handles transparently

Environment variables: VITE_ prefix required

Realtime subscriptions: No special config needed

Storage uploads: Works from browser as-is

Deployment

Deploy dist/ folder to:

Vercel: Automatic from Git

Netlify: Automatic from Git

Firebase Hosting: firebase deploy

GitHub Pages: gh-pages package

AWS S3 + CloudFront

Any static host with HTTP server

FILE REFERENCES:

package.json - npm scripts calling Vite

.env - Environment variables (development)

.env.production - Environment variables (production)

Key Concepts

Lightning-fast development (Vite uses esbuild)

Instant HMR (Hot Module Replacement)

Code splitting for optimal caching

Tree-shaking removes unused code

Sourcemaps for debugging production code