Skip to main content

​
Overview

Vercel is the recommended platform for deploying Trazea. It provides:
  • Automatic deployments on every git push
  • Built-in CI/CD pipeline
  • Global CDN for fast content delivery
  • Zero-configuration SPA routing
  • Environment variable management

​
Prerequisites

​
Quick Deploy

​
1. Connect Repository

  1. Go to Vercel Dashboard
  2. Click Add New > Project
  3. Import your Trazea repository
  4. Vercel will auto-detect the Vite framework

​
2. Configure Build Settings

Vercel automatically detects Vite projects. Verify these settings:
​
Framework Preset
string
default:"Vite"
Should be automatically detected as Vite
​
Build Command
string
default:"pnpm build"
pnpm build
​
Output Directory
string
default:"dist"
dist
​
Install Command
string
default:"pnpm install"
pnpm install

​
3. Add Environment Variables

In the Vercel project settings, add all required environment variables:
1

Navigate to Environment Variables

Go to Project Settings > Environment Variables
2

Add Supabase Variables

Add the following variables:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
3

Add Sentry DSN (Optional)

For production error tracking:
VITE_SENTRY_DSN=https://[email protected]/project-id
4

Add ElevenLabs Key (Optional)

If using voice agent features:
VITE_PUBLIC_ELEVENLABS_API_KEY=your-api-key
5

Set Environment Scope

Select Production, Preview, and Development as needed

​
4. Deploy

Click Deploy and Vercel will:
  1. Install dependencies with pnpm install
  2. Build the project with pnpm build
  3. Deploy to global CDN
  4. Provide a production URL (e.g., trazea.vercel.app)

​
Vercel Configuration

Trazea includes a vercel.json configuration file for proper SPA routing:
vercel.json
{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

​
What This Does

This configuration ensures that all routes (e.g., /inventario, /spares, /orders) are rewritten to /index.html, allowing React Router to handle client-side routing.
Without this configuration, direct navigation to routes like /inventario would result in a 404 error.

​
Custom Domain

To use a custom domain:
1

Add Domain

Go to Project Settings > Domains
2

Enter Your Domain

Add your domain (e.g., trazea.example.com)
3

Configure DNS

Add the provided DNS records to your domain registrar:
# A Record
A    @    76.76.21.21

# CNAME Record (for subdomains)
CNAME    www    cname.vercel-dns.com
4

Wait for SSL

Vercel automatically provisions SSL certificates via Let’s Encrypt

​
Automatic Deployments

​
Branch Deployments

Vercel creates preview deployments for every branch:
  • Production: main or master branch → production domain
  • Preview: All other branches → unique preview URL
  • PR Comments: Vercel bot comments on pull requests with preview URLs

​
Deployment Flow

​
Environment-Specific Variables

Configure different values per environment: 
# Production Supabase project
VITE_SUPABASE_URL=https://prod-project.supabase.co
VITE_SUPABASE_ANON_KEY=prod-anon-key
VITE_SENTRY_DSN=https://[email protected]/123

​
Build Optimization

Trazea’s Vite configuration includes production optimizations:
vite.config.ts
build: {
  chunkSizeWarningLimit: 1000,
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          if (id.includes('react') || id.includes('react-dom')) {
            return 'react-vendor';     // React core bundle
          }
          if (id.includes('@supabase')) {
            return 'supabase-vendor';  // Supabase client bundle
          }
          if (id.includes('@radix-ui') || id.includes('lucide-react')) {
            return 'ui-vendor';        // UI library bundle
          }
          return 'vendor';             // Other dependencies
        }
      },
    },
  },
}
This creates optimized code-split bundles:
  • react-vendor.js: React and React Router (~150 KB)
  • supabase-vendor.js: Supabase client (~180 KB)
  • ui-vendor.js: Radix UI and Lucide icons (~120 KB)
  • vendor.js: Other dependencies (~200 KB)

​
Monitoring

​
Vercel Analytics

Enable Web Analytics in project settings for:
  • Real-time visitor metrics
  • Page performance insights
  • Top pages and referrers

​
Sentry Integration

With VITE_SENTRY_DSN configured, errors are automatically tracked:
  • Unhandled exceptions
  • Network failures
  • Component errors (via React Error Boundary)

​
Troubleshooting

Ensure vercel.json is present in your repository root with the rewrite configuration.
{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}
  1. Verify variables are prefixed with VITE_
  2. Redeploy after adding/changing environment variables
  3. Check variable scope (Production/Preview/Development)
Check Vercel build logs for:
  • TypeScript errors: Run pnpm build locally first
  • Missing dependencies: Ensure pnpm-lock.yaml is committed
  • Node version: Vercel uses Node 22 by default (matches Dockerfile)
Enable Vercel’s Speed Insights to identify bottlenecks:
  • Check bundle sizes in build output
  • Lazy load routes and components
  • Use Vite’s dynamic imports for large features

​
Production Checklist

Before launching to production:
1

Environment Variables

✓ All production environment variables configured✓ Sentry DSN added for error tracking
2

Supabase Configuration

✓ Row Level Security enabled on all tables✓ Production Supabase URL configured✓ CORS allowed origins include Vercel domain
3

Custom Domain

✓ Custom domain configured (optional)✓ SSL certificate active✓ DNS records propagated
4

Testing

✓ Test login flow (email/password + Google OAuth)✓ Test key user flows (inventory, solicitudes, guarantees)✓ Verify permissions and RLS policies work correctly

​
Next Steps

Supabase Configuration

Configure authentication, RLS policies, and CORS

Docker Deployment

Alternative deployment using Docker containers

Build docs developers (and LLMs) love

Get started for freeTalk to us