Deployment Guide.md

Deployment Guide

This guide covers deploying your React app to various platforms.

Build for Production

Before deploying, create a production build:

npm run build

This creates a dist folder with optimized files.

---

Option 1: Vercel (Recommended)

Method A: CLI Deployment

1. Install Vercel CLI

   npm install -g vercel

2. Login to Vercel

   vercel login

3. Deploy

   vercel

4. Deploy to Production

   vercel --prod

Method B: Git Integration

1. Push to GitHub

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/yourusername/your-repo.git
   git push -u origin main

2. Connect to Vercel

   • Go to vercel.com
   • Click "Add New Project"
   • Import your GitHub repository

3. Configure Settings

   • Framework Preset: Vite
   • Build Command: npm run build
   • Output Directory: dist

4. Add Environment Variables

   • Go to Settings → Environment Variables
   • Add: VITE_API_BASE_URL = your production API URL

5. Deploy

   • Click "Deploy"

---

Option 2: Netlify

Method A: CLI Deployment

1. Install Netlify CLI

   npm install -g netlify-cli

2. Login

   netlify login

3. Deploy

   netlify deploy --prod --dir=dist

Method B: Git Integration

1. Connect to Netlify

   • Go to netlify.com
   • Click "Add new site" → "Import an existing project"
   • Connect your GitHub repository

2. Configure

   • Build command: npm run build
   • Publish directory: dist

3. Environment Variables

   • Site settings → Environment Variables
   • Add: VITE_API_BASE_URL

---

Option 3: VPS (Ubuntu with Nginx + PM2)

Step 1: Build Locally

npm run build

Step 2: Upload to Server

# Using scp (replace with your server details)
scp -r dist/* user@your-server:/var/www/your-app/

Step 3: Install Node.js on Server

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

Step 4: Set Up PM2 for JSON Server

# Install PM2
sudo npm install -g pm2

# Create ecosystem config
nano /home/user/your-project/ecosystem.config.js

module.exports = {
  apps: [{
    name: 'api-server',
    script: 'npx',
    args: 'json-server --watch db.json --port 3001',
    cwd: '/home/user/your-project',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '1G',
    env: {
      NODE_ENV: 'production'
    }
  }]
};

pm2 start ecosystem.config.js
pm2 save
pm2 startup  # Follow the output instructions

Step 5: Configure Nginx

sudo nano /etc/nginx/sites-available/your-app

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/your-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

sudo ln -s /etc/nginx/sites-available/your-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

---

Environment Variables in Production

Vercel/Netlify

Add these in your dashboard:

Variable	Value
VITE_API_BASE_URL	Your production API URL
VITE_APP_NAME	Your app name

VPS

Create .env file in your project:

VITE_API_BASE_URL=http://localhost:3001
VITE_APP_NAME=My Bootcamp App

---

Post-Deployment Checklist

• Build succeeds without errors
• App loads at production URL
• Login/logout works
• API calls work
• Environment variables set correctly
• Error handling works
• Loading states display correctly

Troubleshooting

Blank Page After Deploy

1. Check browser console for errors
2. Verify VITE_API_BASE_URL is correct
3. Ensure base in vite.config.js matches your deployment path

404 on Refresh

For SPA, ensure your server routes all requests to index.html.

API Not Working

Verify the API URL is accessible:

curl https://your-api-url.com/users