Configuration Files
4 files
Production-ready configuration files with detailed comments and best practices. Each file works together as a complete deployment solution.
Vite build configuration with optimizations
typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
build: {
outDir: 'dist',
sourcemap: true,
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
},
},
},
},
}) Pro Tips
- ⚡ Vite is 10-100x faster than webpack for development
- 📦 manualChunks splits vendor code for better caching
- 🗺️ sourcemap: true helps debug production issues
- 💡 outDir: "dist" matches Cloudflare Pages directory setting
- 🎯 Vite uses esbuild for lightning-fast builds
- 🔧 Add base: "/my-app/" if deploying to subdirectory
Project dependencies and scripts
json
{
"name": "my-react-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"eslint": "^8.55.0",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0"
}
} Pro Tips
- 📦 "type": "module" enables ES modules in Node.js
- ⚡ "tsc && vite build" type-checks before building
- 🔍 Add ESLint for code quality checks
- 💡 "vite preview" tests production build locally
- 🎯 Keep dependencies minimal for faster builds
- 🔧 Use "npm ci" in CI/CD for reproducible installs
TypeScript compiler configuration
json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
} Pro Tips
- 🔒 "strict": true enables all strict type-checking
- ⚡ "skipLibCheck": true speeds up compilation
- 📦 "jsx": "react-jsx" uses new JSX transform (no React import needed)
- 💡 "noEmit": true because Vite handles transpilation
- 🎯 "moduleResolution": "bundler" optimized for Vite
- 🔧 Customize based on your project needs
Environment variables template
bash
# Public variables (exposed to browser, prefix with VITE_)
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My React App
VITE_ENABLE_ANALYTICS=true
# Build info
VITE_BUILD_TIME=${new Date().toISOString()}
VITE_VERSION=1.0.0 Pro Tips
- 🔒 VITE_ prefix makes variables available in browser
- ⚠️ All VITE_ variables are PUBLIC (baked into bundle)
- 💡 Access with import.meta.env.VITE_API_URL
- 🚫 Never put secrets in VITE_ variables
- 📝 Copy to .env.local for local development
- 🎯 For secrets, use serverless functions or backend API