🚀 Lesson 10.4: Build and Deployment

🌟 Introduction to Production Deployment

Congratulations! You've built amazing React TypeScript applications throughout this course. Now it's time for the most exciting step—sharing your work with the world by deploying to production.

🎯 Development vs Production

Understanding the differences between development and production environments is crucial:

🔄 The Deployment Pipeline

Modern deployment follows a structured pipeline:

📦 Creating Production Builds

Before deploying, you need to create an optimized production build of your application. This process transforms your development code into highly optimized files ready for production.

🔨 Building with Vite

If you're using Vite (recommended for React TypeScript projects), building is straightforward:

# Build for production
npm run build

# Preview the production build locally
npm run preview

This creates a dist folder containing your optimized application:

dist/
├── assets/
│   ├── index-a1b2c3d4.js      # Your bundled JavaScript
│   ├── index-e5f6g7h8.css     # Your bundled CSS
│   └── logo-i9j0k1l2.svg      # Optimized assets
├── index.html                   # Entry point
└── favicon.ico                  # Site icon

⚙️ Vite Configuration

You can customize the build process in vite.config.ts:

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

export default defineConfig({
  plugins: [react()],
  
  // Build options
  build: {
    // Output directory
    outDir: 'dist',
    
    // Generate source maps for debugging
    sourcemap: false, // Set to true for debugging production
    
    // Minification
    minify: 'esbuild', // Fast and efficient
    
    // Target browsers
    target: 'es2015',
    
    // Chunk size warnings
    chunkSizeWarningLimit: 1000,
    
    // Rollup options for advanced configuration
    rollupOptions: {
      output: {
        // Manual chunk splitting for better caching
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'router': ['react-router-dom'],
        },
      },
    },
  },
  
  // Base path for deployment
  base: '/', // Change if deploying to a subdirectory
  
  // Preview server configuration
  preview: {
    port: 3000,
    host: true,
  },
});

📊 Analyzing Bundle Size

Understanding what's in your bundle helps optimize it:

# Install bundle analyzer
npm install --save-dev rollup-plugin-visualizer

# Build and analyze
npm run build

Add to vite.config.ts:

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),
    visualizer({
      open: true,
      filename: 'dist/stats.html',
      gzipSize: true,
      brotliSize: true,
    }),
  ],
});

🎯 Build Best Practices

// package.json scripts
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext ts,tsx",
    "type-check": "tsc --noEmit"
  }
}

🔐 Environment Variables

Environment variables allow you to configure your application differently for development, staging, and production without changing code. They're essential for managing API keys, feature flags, and environment-specific settings.

🔑 Using Environment Variables in Vite

Vite has built-in support for environment variables through .env files:

# .env.local (for local development - NOT committed to git)
VITE_API_URL=http://localhost:3001/api
VITE_API_KEY=dev_key_12345
VITE_ENABLE_ANALYTICS=false

# .env.production (for production - committed to git)
VITE_API_URL=https://api.myapp.com
VITE_ENABLE_ANALYTICS=true
# Note: Never put secret keys in .env.production!

📝 Accessing Environment Variables

// src/config/env.ts
interface Config {
  apiUrl: string;
  apiKey: string;
  enableAnalytics: boolean;
  environment: 'development' | 'production';
}

export const config: Config = {
  apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:3001/api',
  apiKey: import.meta.env.VITE_API_KEY || '',
  enableAnalytics: import.meta.env.VITE_ENABLE_ANALYTICS === 'true',
  environment: import.meta.env.MODE as 'development' | 'production',
};

// Validate required variables
if (!config.apiUrl) {
  throw new Error('VITE_API_URL is required');
}

// Log config in development only
if (import.meta.env.DEV) {
  console.log('App Configuration:', config);
}

🔒 Security Best Practices

📄 .gitignore Configuration

# .gitignore
# Environment files with secrets
.env.local
.env.*.local

# Build output
dist
dist-ssr
*.local

# Dependencies
node_modules

# Logs
logs
*.log

# IDE
.vscode/*
.idea

🎯 TypeScript Support

Add type definitions for better autocomplete:

// src/vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_API_KEY: string;
  readonly VITE_ENABLE_ANALYTICS: string;
  // Add more env variables here
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

📖 Example: API Client with Environment Variables

// src/lib/api-client.ts
import { config } from '@/config/env';

class ApiClient {
  private baseUrl: string;
  private apiKey: string;

  constructor() {
    this.baseUrl = config.apiUrl;
    this.apiKey = config.apiKey;
  }

  async fetch<T>(endpoint: string, options?: RequestInit): Promise<T> {
    const url = `${this.baseUrl}${endpoint}`;
    
    const response = await fetch(url, {
      ...options,
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.apiKey}`,
        ...options?.headers,
      },
    });

    if (!response.ok) {
      throw new Error(`API Error: ${response.statusText}`);
    }

    return response.json();
  }

  async get<T>(endpoint: string): Promise<T> {
    return this.fetch<T>(endpoint);
  }

  async post<T>(endpoint: string, data: unknown): Promise<T> {
    return this.fetch<T>(endpoint, {
      method: 'POST',
      body: JSON.stringify(data),
    });
  }
}

export const apiClient = new ApiClient();

🌍 Different Environments

# Development
npm run dev
# Uses .env.local and .env.development

# Production build
npm run build
# Uses .env.production

# Custom environment
npm run build -- --mode staging
# Uses .env.staging

📋 Environment Variables Documentation

Create a .env.example file to document required variables:

# .env.example
# Copy this to .env.local and fill in your values

# API Configuration
VITE_API_URL=http://localhost:3001/api
VITE_API_KEY=your_api_key_here

# Feature Flags
VITE_ENABLE_ANALYTICS=false
VITE_ENABLE_DARK_MODE=true

# Third-party Services
VITE_STRIPE_PUBLIC_KEY=pk_test_...
VITE_GOOGLE_ANALYTICS_ID=G-...

☁️ Deployment Platforms Overview

There are many platforms for deploying React applications. Let's compare the most popular options to help you choose the right one for your needs.

🏆 Popular Deployment Platforms

🎯 Choosing the Right Platform

✨ Common Features Across Platforms

💰 Pricing Comparison

▲ Deploying to Vercel

Vercel is one of the most popular platforms for deploying React applications. Created by the makers of Next.js, it offers an exceptional developer experience with zero-configuration deployments.

🚀 Deploying Your First App to Vercel

Step 1: Prepare Your Repository

# Ensure your code is in a Git repository
git init
git add .
git commit -m "Initial commit"

# Push to GitHub (or GitLab/Bitbucket)
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

Step 2: Sign Up for Vercel

1. Go to vercel.com
2. Click "Sign Up"
3. Choose "Continue with GitHub" (recommended)
4. Authorize Vercel to access your repositories

Step 3: Import Your Project

1. Click "Add New Project"
2. Select your repository from the list
3. Vercel auto-detects Vite and configures build settings
4. Click "Deploy"

⚙️ Vercel Configuration

Create vercel.json for custom configuration:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  
  "framework": "vite",
  
  "env": {
    "VITE_API_URL": "https://api.myapp.com"
  },
  
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ],
  
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://api.myapp.com/:path*"
    }
  ]
}

🔐 Setting Environment Variables

1. Go to your project settings on Vercel
2. Navigate to "Environment Variables"
3. Add your variables (one per environment)

# Production
VITE_API_URL=https://api.myapp.com
VITE_API_KEY=prod_key_xyz

# Preview (for PR deployments)
VITE_API_URL=https://staging-api.myapp.com
VITE_API_KEY=staging_key_abc

# Development (optional)
VITE_API_URL=http://localhost:3001
VITE_API_KEY=dev_key_123

🔄 Automatic Deployments

Once connected, Vercel automatically deploys:

📱 Vercel CLI (Optional)

Deploy from the command line:

# Install Vercel CLI globally
npm install -g vercel

# Login to Vercel
vercel login

# Deploy to production
vercel --prod

# Deploy preview
vercel

🌐 Deploying to Netlify

Netlify is another excellent platform for deploying React applications, known for its powerful features like form handling, serverless functions, and split testing.

🚀 Deploying Your First App to Netlify

Method 1: Via Web UI (Easiest)

1. Go to netlify.com and sign up
2. Click "Add new site" → "Import an existing project"
3. Connect to GitHub and select your repository
4. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist
5. Click "Deploy site"

Method 2: Drag and Drop

# Build locally
npm run build

# Drag the dist folder to netlify.com/drop

Method 3: Netlify CLI

# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Initialize Netlify in your project
netlify init

# Deploy
netlify deploy --prod

⚙️ Netlify Configuration

Create netlify.toml in your project root:

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"
  
[build.environment]
  NODE_VERSION = "18"
  
# Redirect rules
[[redirects]]
  from = "/api/*"
  to = "https://api.myapp.com/:splat"
  status = 200
  
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  
# Headers
[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"
    
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    X-XSS-Protection = "1; mode=block"

🔐 Environment Variables in Netlify

1. Go to Site settings → Environment variables
2. Add your variables
3. Choose scopes (Production, Deploy previews, Branch deploys)

# Via Netlify UI or CLI
VITE_API_URL=https://api.myapp.com
VITE_API_KEY=your_key_here

✨ Netlify Unique Features

1. Built-in Forms

<!-- Add netlify attribute to form -->
<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

2. Serverless Functions

// netlify/functions/hello.ts
import { Handler } from '@netlify/functions';

export const handler: Handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'Hello from Netlify!' }),
  };
};

// Access at: https://yoursite.netlify.app/.netlify/functions/hello

3. Split Testing

# netlify.toml
[[redirects]]
  from = "/*"
  to = "/branch-a/:splat"
  status = 200
  conditions = { Cookie = ["split-test=a"] }
  
[[redirects]]
  from = "/*"
  to = "/branch-b/:splat"
  status = 200
  conditions = { Cookie = ["split-test=b"] }

🌍 Custom Domains and SSL

Your deployed app gets a free subdomain (like myapp.vercel.app), but you'll want a custom domain for a professional look. Both Vercel and Netlify make this easy with automatic SSL certificates.

🛒 Buying a Domain

Popular domain registrars:

🔗 Connecting Domain to Vercel

Step 1: Add Domain in Vercel

1. Go to Project Settings → Domains
2. Enter your domain (e.g., myapp.com)
3. Vercel provides DNS records to add

Step 2: Configure DNS

Add these records at your domain registrar:

🔗 Connecting Domain to Netlify

Option 1: Use Netlify DNS (Recommended)

1. Go to Site settings → Domain management
2. Click "Add custom domain"
3. Choose "Use Netlify DNS"
4. Update nameservers at your registrar:
   • dns1.p0x.netlify.com
   • dns2.p0x.netlify.com
   • dns3.p0x.netlify.com
   • dns4.p0x.netlify.com

Option 2: External DNS

Add these records at your DNS provider:

🔒 SSL Certificates

Both platforms provide free, automatic SSL certificates:

🎯 Subdomain and Apex Domain

# Apex domain (root domain)
myapp.com

# www subdomain
www.myapp.com

# Custom subdomains
api.myapp.com
blog.myapp.com
docs.myapp.com

📋 Domain Configuration Checklist

⚙️ CI/CD with GitHub Actions

Continuous Integration and Continuous Deployment (CI/CD) automate testing and deployment. Every time you push code, your tests run automatically, and if they pass, your app deploys to production.

🎯 Why Use CI/CD?

🔧 GitHub Actions Basics

GitHub Actions is a CI/CD platform built into GitHub. It runs workflows defined in YAML files:

# .github/workflows/deploy.yml
name: Deploy to Production

# Trigger on push to main branch
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    
    steps:
      # Checkout code
      - uses: actions/checkout@v3
      
      # Setup Node.js
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      # Install dependencies
      - name: Install dependencies
        run: npm ci
      
      # Run type check
      - name: Type check
        run: npm run type-check
      
      # Run linter
      - name: Lint
        run: npm run lint
      
      # Run tests
      - name: Run tests
        run: npm test
      
      # Build for production
      - name: Build
        run: npm run build
        env:
          VITE_API_URL: ${{ secrets.VITE_API_URL }}
          VITE_API_KEY: ${{ secrets.VITE_API_KEY }}

🚀 Advanced Workflow Example

# .github/workflows/ci-cd.yml
name: CI/CD Pipeline

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

# Allow manual trigger
  workflow_dispatch:

jobs:
  # Job 1: Test
  test:
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        node-version: [16, 18, 20]
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run tests with coverage
        run: npm run test:coverage
      
      - name: Upload coverage to Codecov
        uses: codecov/codecov-action@v3
        with:
          file: ./coverage/coverage-final.json
  
  # Job 2: Build and Deploy
  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
        env:
          VITE_API_URL: ${{ secrets.VITE_API_URL }}
          VITE_API_KEY: ${{ secrets.VITE_API_KEY }}
      
      # Deploy to Vercel
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

🔐 Managing Secrets

Store sensitive information in GitHub Secrets:

1. Go to your repository on GitHub
2. Settings → Secrets and variables → Actions
3. Click "New repository secret"
4. Add your secrets:
   • VITE_API_URL
   • VITE_API_KEY
   • VERCEL_TOKEN
   • etc.

env:
  VITE_API_URL: ${{ secrets.VITE_API_URL }}
  VITE_API_KEY: ${{ secrets.VITE_API_KEY }}

📊 Workflow Status Badges

Add a badge to your README to show workflow status:

![CI/CD](https://github.com/username/repo/workflows/CI-CD/badge.svg)

🎯 Common Workflow Patterns

1. Preview Deployments for PRs

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy Preview
        # Deploy to preview environment
        run: vercel --env=preview

2. Scheduled Workflows

on:
  schedule:
    # Run every day at midnight
    - cron: '0 0 * * *'

jobs:
  nightly-build:
    runs-on: ubuntu-latest
    steps:
      # Build and test

3. Multi-Environment Deployment

jobs:
  deploy-staging:
    if: github.ref == 'refs/heads/develop'
    # Deploy to staging
    
  deploy-production:
    if: github.ref == 'refs/heads/main'
    # Deploy to production

📈 Performance Monitoring

After deployment, it's crucial to monitor your application's performance in production. Real users experience different conditions than your local development environment.

📊 Key Metrics to Monitor

🛠️ Monitoring Tools

1. Built-in Platform Analytics

// Vercel Analytics
import { Analytics } from '@vercel/analytics/react';

function App() {
  return (
    <>
      <YourApp />
      <Analytics />
    </>
  );
}

// Netlify Analytics
// Automatically enabled, no code needed
// View in Netlify dashboard → Analytics

2. Google Lighthouse

Test your site's performance:

1. Open Chrome DevTools (F12)
2. Go to "Lighthouse" tab
3. Select categories (Performance, Accessibility, Best Practices, SEO)
4. Click "Analyze page load"

3. Web Vitals Library

# Install web-vitals
npm install web-vitals

// src/lib/vitals.ts
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics(metric: any) {
  // Send to your analytics service
  console.log(metric);
  
  // Example: Send to Google Analytics
  if (window.gtag) {
    window.gtag('event', metric.name, {
      value: Math.round(metric.value),
      event_category: 'Web Vitals',
      event_label: metric.id,
      non_interaction: true,
    });
  }
}

// Measure all Web Vitals
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

// src/main.tsx
import { reportWebVitals } from './lib/vitals';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// Report web vitals
reportWebVitals();

4. Error Monitoring with Sentry

npm install @sentry/react

// src/main.tsx
import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  environment: import.meta.env.MODE,
  integrations: [
    new Sentry.BrowserTracing(),
    new Sentry.Replay(),
  ],
  
  // Performance Monitoring
  tracesSampleRate: 1.0,
  
  // Session Replay
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

📱 Real User Monitoring (RUM)

Track real user experiences:

// Custom RUM implementation
class RUM {
  private metrics: Map<string, number> = new Map();

  trackPageView(path: string) {
    // Track page views
    this.sendEvent('pageview', { path });
  }

  trackError(error: Error) {
    // Track JavaScript errors
    this.sendEvent('error', {
      message: error.message,
      stack: error.stack,
    });
  }

  trackPerformance() {
    // Track performance metrics
    const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
    
    this.metrics.set('dns', navigation.domainLookupEnd - navigation.domainLookupStart);
    this.metrics.set('tcp', navigation.connectEnd - navigation.connectStart);
    this.metrics.set('ttfb', navigation.responseStart - navigation.requestStart);
    this.metrics.set('download', navigation.responseEnd - navigation.responseStart);
    this.metrics.set('domInteractive', navigation.domInteractive - navigation.fetchStart);
    this.metrics.set('domComplete', navigation.domComplete - navigation.fetchStart);
    
    this.sendMetrics();
  }

  private sendEvent(name: string, data: any) {
    // Send to your analytics backend
    fetch('/api/analytics', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ event: name, data }),
    });
  }

  private sendMetrics() {
    // Send collected metrics
    fetch('/api/metrics', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(Object.fromEntries(this.metrics)),
    });
  }
}

export const rum = new RUM();

// Usage
rum.trackPageView(window.location.pathname);
rum.trackPerformance();

🎯 Monitoring Best Practices

📊 Setting Up Alerts

// Example: Monitor and alert on poor performance
function checkPerformance() {
  getLCP((metric) => {
    if (metric.value > 2500) {
      // Alert: Poor LCP
      sendAlert({
        metric: 'LCP',
        value: metric.value,
        threshold: 2500,
        severity: 'warning',
      });
    }
  });
  
  getCLS((metric) => {
    if (metric.value > 0.1) {
      // Alert: Poor CLS
      sendAlert({
        metric: 'CLS',
        value: metric.value,
        threshold: 0.1,
        severity: 'warning',
      });
    }
  });
}

🏋️ Hands-on Exercises

Let's practice deploying React applications! These exercises will help you gain real-world deployment experience.

# 1. Initialize git if not already done
git init

# 2. Add .gitignore
echo "node_modules
dist
.env.local
*.log" > .gitignore

# 3. Commit your code
git add .
git commit -m "Initial commit"

# 4. Create GitHub repo and push
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

# 5. Go to Vercel.com or Netlify.com
# 6. Import your repository
# 7. Deploy!

# .env.local (don't commit!)
VITE_APP_NAME=My Awesome App
VITE_API_URL=http://localhost:3001/api
VITE_ENABLE_DEBUG=true

# .env.example (commit this)
VITE_APP_NAME=Your App Name
VITE_API_URL=https://api.example.com
VITE_ENABLE_DEBUG=false

// src/config/env.ts
export const config = {
  appName: import.meta.env.VITE_APP_NAME,
  apiUrl: import.meta.env.VITE_API_URL,
  enableDebug: import.meta.env.VITE_ENABLE_DEBUG === 'true',
};

// Usage in component
function App() {
  return (
    <div>
      <h1>{config.appName}</h1>
      {config.enableDebug && <DebugPanel />}
    </div>
  );
}

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Type check
        run: npm run type-check
      
      - name: Lint
        run: npm run lint
      
      - name: Build
        run: npm run build

# Install web-vitals
npm install web-vitals

// src/reportWebVitals.ts
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

export function reportWebVitals() {
  getCLS(console.log);
  getFID(console.log);
  getFCP(console.log);
  getLCP(console.log);
  getTTFB(console.log);
}

// src/main.tsx
import { reportWebVitals } from './reportWebVitals';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

🔧 Troubleshooting Common Issues

Deployment doesn't always go smoothly. Here are solutions to common problems you might encounter.

❌ Problem: Build Fails

Error: Command "npm run build" exited with 1

❌ Problem: 404 on Refresh

// vercel.json
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

# netlify.toml
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

/*    /index.html   200

❌ Problem: Environment Variables Not Working

// Add this temporarily to check
console.log('Environment:', import.meta.env);
console.log('API URL:', import.meta.env.VITE_API_URL);

❌ Problem: Slow Build Times

// Speed up npm ci
{
  "scripts": {
    "build": "npm ci --prefer-offline && vite build"
  }
}

❌ Problem: Images Not Loading

// ✅ Import the image
import logo from './assets/logo.png';
<img src={logo} alt="Logo" />

// ✅ Use public folder
<img src="/images/logo.png" alt="Logo" />

// ❌ Don't use absolute paths
<img src="C:/Users/me/project/logo.png" alt="Logo" />

❌ Problem: API Requests Failing

// vite.config.ts - Development proxy
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

❌ Problem: Large Bundle Size

# Analyze bundle
npm install --save-dev rollup-plugin-visualizer
npm run build

// ❌ Bad - imports entire library
import _ from 'lodash';

// ✅ Good - imports specific function
import debounce from 'lodash/debounce';

// ✅ Even better - use native methods when possible
const debounce = (fn: Function, ms: number) => {
  let timeout: NodeJS.Timeout;
  return (...args: any[]) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), ms);
  };
};

🛠️ General Debugging Tips

📚 Summary

Congratulations! You've learned how to deploy React TypeScript applications to production. Let's recap the essential concepts:

🎯 Key Takeaways

🔄 The Deployment Workflow

📋 Pre-Deployment Checklist

🛠️ Essential Tools Reference

📖 Quick Command Reference

# Build for production
npm run build

# Preview production build locally
npm run preview

# Type check
npm run type-check

# Deploy with Vercel CLI
vercel --prod

# Deploy with Netlify CLI
netlify deploy --prod

# Initialize Vercel project
vercel

# Initialize Netlify project
netlify init

# Check bundle size
npm run build -- --stats

🚀 What's Next?

You've mastered deployment! Here's how to continue your journey:

📚 Continue Learning

• Next Lesson: Lesson 10.5 - Next Steps and Advanced Topics
• Practice: Deploy all your course projects to production
• Explore: Try different deployment platforms and compare them
• Learn: Dive deeper into DevOps, Docker, and Kubernetes

🎯 Immediate Next Steps

🌟 Advanced Topics to Explore

📱 Build Your Portfolio

Now that you know how to deploy, showcase your work:

1. Portfolio Website: Create a personal site with all your projects
2. GitHub Profile: Pin your best repositories
3. Blog: Write about what you learned (great for SEO and networking)
4. LinkedIn: Share your deployed projects
5. Dev.to / Medium: Publish technical articles

🎓 Course Completion

You're almost at the end of the React TypeScript course! After the final lesson, you'll have:

• ✅ Built multiple production-ready React applications
• ✅ Mastered TypeScript for type-safe development
• ✅ Learned modern React patterns and best practices
• ✅ Deployed applications to production
• ✅ Gained real-world development experience