Skip to main content

​
Overview

The Risk Legion frontend is deployed to Vercel for optimal performance with global CDN distribution, automatic HTTPS, and preview deployments.

​
Vercel Setup

​
1. Connect Repository

  1. Go to vercel.com
  2. Click “Add New Project”
  3. Import your GitHub repository
  4. Select the risk-legion-frontend directory as root

​
2. Configure Build Settings

SettingValue
Framework PresetVite
Build Commandnpm run build
Output Directorydist
Install Commandnpm install

​
3. Environment Variables

Add these in Vercel Dashboard → Settings → Environment Variables:
VariableProduction ValuePreview Value
VITE_SUPABASE_URLhttps://your-project.supabase.coSame
VITE_SUPABASE_ANON_KEYProduction anon keySame
VITE_API_URLhttps://api.risklegion.comhttps://api-test.risklegion.com

​
4. Domain Configuration

  1. Go to Settings → Domains
  2. Add app.risklegion.com
  3. Configure DNS: 
    CNAME app cname.vercel-dns.com

​
Deployment Process

​
Automatic Deployments

Vercel automatically deploys on:
  • Push to main branch → Production
  • Push to other branches → Preview deployment
  • Pull requests → Preview deployment

​
Manual Deployment

# Install Vercel CLI
npm install -g vercel

# Deploy to preview
vercel

# Deploy to production
vercel --prod

​
vercel.json Configuration

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    }
  ]
}

​
Build Optimization

​
Vite Configuration

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

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
          charts: ['recharts'],
          grid: ['ag-grid-react', 'ag-grid-community']
        }
      }
    }
  }
});

​
Performance Optimizations

  • Code Splitting: Automatic route-based splitting
  • Tree Shaking: Removes unused code
  • Minification: Terser for production builds
  • Asset Optimization: Vite optimizes assets

​
Preview Deployments

Every pull request gets a unique preview URL: 
https://risk-legion-frontend-<hash>-<team>.vercel.app

​
Preview Comments

Enable preview comments on PRs:
  1. Go to Settings → Git
  2. Enable “Vercel for GitHub”

​
Monitoring

​
Vercel Analytics

Enable in Dashboard → Analytics:
  • Page views
  • Web vitals (LCP, FID, CLS)
  • Geographic distribution

​
Error Tracking

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

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  environment: import.meta.env.VITE_ENVIRONMENT
});

​
Rollback

​
Via Dashboard

  1. Go to Deployments
  2. Find the deployment to restore
  3. Click ”…” → “Promote to Production”

​
Via CLI

vercel rollback

​
Troubleshooting

  • Check build logs in Vercel Dashboard
  • Verify all environment variables are set
  • Ensure dependencies are in package.json
  • Test build locally: npm run build
  • Ensure vercel.json has SPA rewrites
  • Check for hardcoded paths
  • Verify React Router configuration
  • Variables must start with VITE_
  • Redeploy after adding variables
  • Check for typos in variable names
  • Enable code splitting
  • Optimize images
  • Use lazy loading for routes
  • Check bundle size with npm run analyze