Skip to main content

​
Production Build

Build the platform for production using Vite: 
npm run build
This command:
  1. Type-checks all TypeScript files
  2. Bundles React components with tree-shaking
  3. Minifies JavaScript and CSS
  4. Generates optimized assets with content hashes
  5. Outputs to dist/ directory

​
Build Output

dist/
├── index.html              # Entry HTML file
├── assets/
│   ├── index-[hash].js     # Main JavaScript bundle
│   ├── index-[hash].css    # Compiled CSS
│   └── vendor-[hash].js    # Third-party dependencies
└── favicon.svg             # (if present)
Content hashes like [hash] enable long-term caching. Browsers only download changed files.

​
Build Configuration

From vite.config.ts:
vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  
  build: {
    outDir: 'dist',
    sourcemap: false,  // Set true for debugging
    minify: 'esbuild',
    target: 'es2022',
  },
  
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '.'),
    }
  }
});

​
Preview Production Build

Test the build locally: 
npm run preview
This starts a local server serving the dist/ folder on port 4173.

​
Type Checking

Run type check without building: 
npm run lint
This runs tsc --noEmit to catch TypeScript errors.

​
Build Optimizations

​
Code Splitting

Vite automatically splits vendor code: 
// Vendor bundle (React, Router, etc.)
vendor-abc123.js  // ~150KB

// App code
index-def456.js   // ~80KB

​
Tree Shaking

Unused code is automatically removed: 
// Only imported icons are bundled
import { Users, Mail } from 'lucide-react';
// The other 600+ icons are tree-shaken

​
Minification

Vite uses esbuild for ultra-fast minification:
  • Variable name mangling
  • Whitespace removal
  • Dead code elimination
  • Constant folding

​
Build for Different Environments

npm run dev
  • Source maps enabled
  • HMR active
  • No minification

​
Analyzing Bundle Size

Use rollup-plugin-visualizer to analyze bundle: 
npm install --save-dev rollup-plugin-visualizer
vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),
    visualizer({ open: true })
  ],
});
After build, opens an interactive treemap showing bundle composition.

​
Common Build Issues

Fix all type errors before building:
npm run lint
Common issues:
  • Missing type definitions
  • Unused imports
  • Type mismatches
Ensure all dependencies are installed:
rm -rf node_modules package-lock.json
npm install
npm run build
Check for:
  • Circular dependencies
  • Dynamic imports that fail
  • Missing files referenced in imports

​
Next Steps

Deployment

Deploy your build to production

Email Server

Configure production email

Environment Setup

Production environment variables

Build docs developers (and LLMs) love

Get started for freeTalk to us