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

3. Environment Variables

Add these in Vercel Dashboard → Settings → Environment Variables:

4. Domain Configuration

  1. Go to Settings → Domains
  2. Add app.risklegion.com
  3. Configure DNS:

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

vercel.json Configuration

Build Optimization

Vite Configuration

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:

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:

Rollback

Via Dashboard

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

Via CLI

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