Vercel Deployment

Overview

CEDIS Pedidos is optimized for deployment on Vercel, taking advantage of automatic builds, serverless deployment, and built-in CDN. This guide covers deploying your application from a Git repository to a production environment.

Prerequisites

A Vercel account (free tier available)
Your code pushed to a Git repository (GitHub, GitLab, or Bitbucket)
A configured Supabase project
Your Supabase credentials ready (VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY)

Deployment Process

Import your project to Vercel

Log in to your Vercel dashboard
Click Add New… → Project
Select your Git provider and authorize Vercel to access your repositories
Find and import the App_Pedidos_CEDIS repository

Vercel will automatically detect that this is a Vite project and configure the build settings accordingly.

Configure environment variables

Before deploying, add your environment variables:

In the Configure Project screen, expand Environment Variables
Add the following variables:

Name	Value
`VITE_SUPABASE_URL`	Your Supabase project URL
`VITE_SUPABASE_ANON_KEY`	Your Supabase anonymous key

Important: Add these variables to all environments (Production, Preview, and Development) to ensure consistent behavior across deployments.

VITE_SUPABASE_URL=https://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Configure build settings

Vercel should auto-detect these settings, but verify they match:

Setting	Value
Framework Preset	Vite
Build Command	`npm run build`
Output Directory	`dist`
Install Command	`npm install`
Node Version	18.x or higher

The build command runs tsc -b && vite build, which compiles TypeScript and builds the production bundle.

Deploy

Click Deploy to start your first deployment.Vercel will:

Clone your repository
Install dependencies with npm install
Run the build command
Deploy the built assets to their global CDN
Provide you with a production URL

The initial deployment typically takes 2-3 minutes.

Vercel Configuration

CEDIS Pedidos includes a vercel.json configuration file for optimal SPA routing:

vercel.json

{
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/index.html"
        }
    ]
}

Why This Configuration Matters

This rewrite rule is critical for single-page applications (SPAs) using client-side routing:

Client-side routing: React Router handles navigation without full page reloads
Direct URL access: Users can access any route directly (e.g., /admin/dashboard)
Refresh handling: Page refreshes on any route return the correct content
404 prevention: All routes serve the main index.html, letting React Router handle routing

Without this configuration, navigating to any route except / (root) and refreshing the page would result in a 404 error, because Vercel would try to find a file at that path instead of serving the React application.

Build Configuration

The application’s build process is defined in package.json:

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  }
}

Build Process

TypeScript compilation

tsc -b compiles all TypeScript files and checks for type errors.If there are TypeScript errors, the build will fail. This ensures type safety in production.

Vite production build

vite build creates an optimized production bundle:

Minifies JavaScript and CSS
Tree-shakes unused code
Optimizes assets (images, fonts)
Generates source maps
Outputs to the dist/ directory

The Vite configuration (vite.config.ts) handles:

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

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Asset optimization

Vite automatically:

Generates content-hashed filenames for long-term caching
Splits code into optimized chunks
Inlines small assets as base64
Optimizes images and other static assets

Automatic Deployments

Once your project is connected to Vercel, automatic deployments are configured:

Production Deployments

Trigger: Push to your main/master branch
Environment: Production environment variables
Domain: Your production domain (e.g., cedis-pedidos.vercel.app)
Behavior: Automatically promoted to production

Preview Deployments

Trigger: Push to any other branch or open a pull request
Environment: Preview environment variables (if different from production)
Domain: Unique preview URL (e.g., cedis-pedidos-git-feature.vercel.app)
Behavior: Isolated environment for testing changes

Every push generates a unique deployment URL, making it easy to preview changes before merging to production.

Custom Domain Setup

Add a custom domain

Go to your project in Vercel
Navigate to Settings → Domains
Click Add and enter your domain name
Choose whether to redirect from www or vice versa

Configure DNS

Vercel will provide DNS records to add to your domain registrar:

Type: A
Name: @
Value: 76.76.21.21
TTL: 3600

Wait for DNS propagation

DNS changes can take up to 48 hours to propagate globally, but typically complete within a few hours.Vercel will automatically provision an SSL certificate once DNS is configured.

Environment Management

Managing Environment Variables

Update environment variables in Vercel:

Navigate to Settings → Environment Variables
Edit existing variables or add new ones
Select which environments to apply changes to
Redeploy your application for changes to take effect

Important: Environment variables are embedded into the build at build time. You must redeploy after changing environment variables for the changes to take effect.

Environment Types

# Used for production deployments (main branch)
VITE_SUPABASE_URL=https://prod.supabase.co
VITE_SUPABASE_ANON_KEY=prod_key_here

Performance Optimization

Vercel provides several performance features out of the box:

Global CDN

Assets served from edge locations worldwide
Automatic caching with optimal cache headers
Reduced latency for users across different regions

Automatic Compression

Brotli compression for modern browsers
Gzip fallback for older browsers
Reduces bandwidth usage and improves load times

Image Optimization

While CEDIS Pedidos doesn’t heavily use images, if you add product images or logos:

import Image from 'next/image' // If using Next.js

// For Vite, optimize images at build time
import logo from './logo.png?w=200&h=200'

Monitoring and Analytics

Vercel Analytics

Enable Vercel Analytics for insights:

Go to Analytics in your project
Click Enable Analytics
View real-time and historical data:
- Page views and unique visitors
- Top pages and referrers
- Performance metrics (Web Vitals)
- Device and browser breakdown

Build Logs

Access build logs to troubleshoot deployment issues:

Navigate to Deployments
Click on any deployment
View the Build Logs tab
Check for errors or warnings during the build process

Rollback and Version Control

Instant Rollback

If a deployment causes issues:

Identify the last working deployment

Go to Deployments and find a previous successful deployment

Promote to production

Click the three dots menu (…) next to the deployment Select Promote to Production

Verify rollback

The previous version is now live The problematic deployment remains in history for investigation

Rollbacks are instant and don’t require rebuilding. Vercel keeps all previous deployments available for instant promotion.

Troubleshooting

Build Failures

Error: Type error: ... Solution: TypeScript compilation failed. Check the build logs for specific errors and fix them in your code.

# Test the build locally
npm run build

Error: Module not found Solution: A dependency is missing or import path is incorrect.

# Ensure all dependencies are in package.json
npm install

# Check import paths use the correct aliases
import { supabase } from '@/lib/supabase'

Runtime Errors

Error: White screen after deployment Solution: Check the browser console for errors. Common causes:

Missing environment variables
Incorrect Supabase credentials
CORS issues

Error: 404 on direct route access Solution: Verify vercel.json exists and contains the rewrite rule:

vercel.json

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Supabase Connection Issues

Error: Failed to fetch or Network error Solution:

Verify environment variables

Check that VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are set in Vercel

Check Supabase project status

Ensure your Supabase project is active (not paused)

Test connection locally

Use the same environment variables locally to reproduce the issue

Redeploy after changes

If you updated environment variables, trigger a new deployment

Security Best Practices

Production Security Checklist

✅ Environment variables set in Vercel (not committed to Git)
✅ Supabase RLS policies enabled on all tables
✅ Only anon key exposed to frontend (never service_role)
✅ HTTPS enforced (automatic with Vercel)
✅ Regular dependency updates for security patches
✅ Supabase auth configured with strong password requirements
✅ Admin role assigned only to authorized personnel

Security Headers

Enhance security by adding headers to vercel.json:

vercel.json

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

Cost Optimization

Vercel Free Tier

The free tier includes:

Unlimited personal projects
100 GB bandwidth per month
Automatic SSL certificates
Global CDN
Preview deployments

CEDIS Pedidos is well within free tier limits for small to medium-sized operations. Monitor usage in the Vercel dashboard.

Supabase Free Tier

Supabase free tier includes:

500 MB database space
1 GB file storage
2 GB bandwidth per month
50,000 monthly active users
7-day data retention for backups

Projects on the free tier pause after 7 days of inactivity. Upgrade to Pro ($25/month) for always-on projects and increased limits.

Next Steps

Your CEDIS Pedidos application is now deployed! Here’s what to do next:

Create user accounts in Supabase for your admin and branch users
Test the complete workflow from order creation to approval and printing
Set up monitoring with Vercel Analytics to track usage
Configure custom domain for a professional appearance
Schedule regular backups of your Supabase database
Document your deployment process for your team

Architecture

Database

Deployment

Overview

Prerequisites

Deployment Process

Vercel Configuration

Why This Configuration Matters

Build Configuration

Build Process

Automatic Deployments

Production Deployments

Preview Deployments

Custom Domain Setup

Environment Management

Managing Environment Variables

Environment Types

Performance Optimization

Global CDN

Automatic Compression

Image Optimization

Monitoring and Analytics

Vercel Analytics

Build Logs

Rollback and Version Control

Instant Rollback

Troubleshooting

Build Failures

Runtime Errors

Supabase Connection Issues

Security Best Practices

Security Headers

Cost Optimization

Vercel Free Tier

Supabase Free Tier

Next Steps

Additional Resources

Build docs developers (and LLMs) love

Architecture

Database

Deployment

​Overview

​Prerequisites

​Deployment Process

​Vercel Configuration

​Why This Configuration Matters

​Build Configuration

​Build Process

​Automatic Deployments

​Production Deployments

​Preview Deployments

​Custom Domain Setup

​Environment Management

​Managing Environment Variables

​Environment Types

​Performance Optimization

​Global CDN

​Automatic Compression

​Image Optimization

​Monitoring and Analytics

​Vercel Analytics

​Build Logs

​Rollback and Version Control

​Instant Rollback

​Troubleshooting

​Build Failures

​Runtime Errors

​Supabase Connection Issues

​Security Best Practices

​Security Headers

​Cost Optimization

​Vercel Free Tier

​Supabase Free Tier

​Next Steps

​Additional Resources

Build docs developers (and LLMs) love

Overview

Prerequisites

Deployment Process

Vercel Configuration

Why This Configuration Matters

Build Configuration

Build Process

Automatic Deployments

Production Deployments

Preview Deployments

Custom Domain Setup

Environment Management

Managing Environment Variables

Environment Types

Performance Optimization

Global CDN

Automatic Compression

Image Optimization

Monitoring and Analytics

Vercel Analytics

Build Logs

Rollback and Version Control

Instant Rollback

Troubleshooting

Build Failures

Runtime Errors

Supabase Connection Issues

Security Best Practices

Security Headers

Cost Optimization

Vercel Free Tier

Supabase Free Tier

Next Steps

Additional Resources