Deploy to Vercel

Vercel is the recommended platform for deploying Hiro CRM. This guide walks you through the complete deployment process.

Prerequisites

GitHub account with your Hiro CRM repository
Vercel account (free tier works)
Supabase project set up (see Database Setup)
Environment variables ready (see Environment Variables)

Deployment Steps

Import project to Vercel

Go to Vercel Dashboard
Click Add New → Project
Import your Git repository
Select the repository containing Hiro CRM

If this is your first time, you’ll need to authorize Vercel to access your GitHub repositories.

Configure project settings

In the import wizard, configure the following:Framework Preset: Next.js (auto-detected)Root Directory: frontend

The root directory is critical! Hiro CRM’s Next.js app is in the frontend/ folder, not the repository root.

Build Command: npm run build (default)Output Directory: .next (default)Install Command: npm install (default)

Add environment variables

Before deploying, add all required environment variables:

In the Vercel import wizard, expand Environment Variables
Add each variable from your .env.local file

Required Variables

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...
NEXT_PUBLIC_APP_URL=https://your-domain.vercel.app

Optional Variables

Add any optional integrations you need:

OPENAI_API_KEY - AI Assistant
BREVO_API_KEY, BREVO_SENDER_EMAIL, etc. - Email campaigns
SENTRY_DSN - Error tracking
COVERMANAGER_API_KEY or REVO_ACCESS_TOKEN - POS integration

See Environment Variables for the complete list.

You can also add environment variables after deployment in Project Settings → Environment Variables.

Deploy

Click Deploy and wait for the build to complete.Vercel will:

Clone your repository
Install dependencies (npm install)
Run the build (npm run build)
Deploy to a production URL

First deployment typically takes 2-3 minutes.

Verify deployment

Once deployed, Vercel provides:

Production URL: https://your-project.vercel.app
Deployment logs: Click on the deployment to view build logs

Test your deployment:

Visit the production URL
Try logging in with a test account
Check that integrations are working (if configured)

Custom Domain Setup

Add your own domain to your Vercel deployment.

Add domain in Vercel

Go to Project Settings → Domains
Click Add
Enter your domain (e.g., crm.your-restaurant.com)
Click Add

Configure DNS

Vercel will provide DNS configuration instructions:Option A: CNAME (recommended for subdomains)

Type: CNAME
Name: crm
Value: cname.vercel-dns.com

Option B: A Record (for apex domains)

Type: A
Name: @
Value: 76.76.21.21

Add these records in your domain registrar’s DNS settings.

Update NEXT_PUBLIC_APP_URL

After domain is configured, update the environment variable:

Go to Project Settings → Environment Variables
Edit NEXT_PUBLIC_APP_URL
Change to your custom domain: https://crm.your-restaurant.com
Redeploy for changes to take effect

Wait for SSL provisioning

Vercel automatically provisions SSL certificates via Let’s Encrypt.This typically takes 1-5 minutes. Your domain will show a certificate status in the Domains settings.

Vercel automatically redirects HTTP to HTTPS and handles SSL renewal.

Vercel Configuration Files

Hiro CRM includes two Vercel configuration files:

Root vercel.json

Configures cron jobs for automated tasks:

vercel.json

{
  "crons": [
    {
      "path": "/api/cron/sync",
      "schedule": "0 8 * * *"
    },
    {
      "path": "/api/cron/calendar-notifications",
      "schedule": "0 9 * * *"
    },
    {
      "path": "/api/cron/calendar-reminders",
      "schedule": "0 8 * * *"
    },
    {
      "path": "/api/cron/ticket-notifications",
      "schedule": "0 10 * * *"
    },
    {
      "path": "/api/cron/ticket-reminders",
      "schedule": "0 8 * * *"
    },
    {
      "path": "/api/cron/automations",
      "schedule": "*/30 * * * *",
      "comment": "Runs active automations every 30 minutes"
    }
  ]
}

Cron Job Schedule:

sync - Daily at 8:00 AM (UTC) - Syncs POS data
calendar-notifications - Daily at 9:00 AM - Sends calendar notifications
calendar-reminders - Daily at 8:00 AM - Sends calendar reminders
ticket-notifications - Daily at 10:00 AM - Sends ticket notifications
ticket-reminders - Daily at 8:00 AM - Sends ticket reminders
automations - Every 30 minutes - Runs marketing automations

Cron jobs require a Pro plan or higher on Vercel. On the free tier, these will not run.

Frontend vercel.json

Configures the master cron job:

frontend/vercel.json

{
  "crons": [
    {
      "path": "/api/cron/master",
      "schedule": "0 8 * * *"
    }
  ]
}

The master cron job runs daily at 8:00 AM UTC and can trigger multiple background tasks.

Next.js Configuration

Key configurations in next.config.ts:

Standalone Output

output: 'standalone'

Optimizes the build for serverless deployment on Vercel.

Security Headers

Production-grade security headers are automatically configured:

X-Frame-Options: DENY - Prevents clickjacking
X-Content-Type-Options: nosniff - Prevents MIME sniffing
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: Restricts camera, microphone, geolocation
Content-Security-Policy: Comprehensive CSP for XSS protection
HSTS: Strict-Transport-Security (production only)

Image Optimization

Configured domains for Next.js Image optimization:

*.supabase.co - Supabase Storage
images.unsplash.com - Demo images

Performance Optimizations

Tree-shaking: Optimized imports for lucide-react, framer-motion, recharts, date-fns
Compression: Gzip enabled
Server External Packages: @supabase/supabase-js for better performance

CI/CD Workflow

Vercel automatically deploys on Git push.

Automatic Deployments

Production
Preview

Trigger: Push to main branchURL: Your production domain (e.g., crm.your-restaurant.com)Environment: Production environment variablesCron Jobs: Enabled (Pro plan only)

Trigger: Push to any other branch or Pull RequestURL: Unique preview URL (e.g., your-project-git-feature-branch.vercel.app)Environment: Preview environment variables (defaults to production if not set)Cron Jobs: Disabled

Perfect for testing features before merging to main!

Deployment Protection

Enable deployment protection for production:

Go to Project Settings → Deployment Protection
Enable Vercel Authentication to require login to access deployments
Add specific email addresses or enable SSO (Team plans)

Monitoring & Debugging

View Logs

Go to your project in Vercel Dashboard
Click on a deployment
View Build Logs and Function Logs

Real-time Logs

Stream function logs in real-time:

vercel logs your-project.vercel.app --follow

Analytics

Vercel provides built-in analytics:

Web Analytics: Page views, visitors, top pages
Speed Insights: Real User Monitoring (RUM) performance data

Hiro CRM already includes Vercel Analytics and Speed Insights in the code. No additional setup needed.

Troubleshooting

Build fails with 'Module not found'

Cause: Incorrect root directory setting.Solution:

Go to Project Settings → General
Set Root Directory to frontend
Redeploy

Environment variables not working

Cause: Variables not properly set or not redeployed after changes.Solution:

Verify variables in Project Settings → Environment Variables
Make sure NEXT_PUBLIC_ prefix is used for client-side variables
Redeploy after adding/changing variables

Cron jobs not running

Cause: Cron jobs require a Pro plan or higher.Solution:

Upgrade to Vercel Pro, or
Use an external cron service (e.g., cron-job.org) to call your API endpoints

Images not loading

Cause: Domain not configured in next.config.ts.Solution: Add the image domain to remotePatterns in next.config.ts:

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'your-domain.com',
    },
  ],
}

502 Bad Gateway on API routes

Cause: Function timeout (10s on Hobby, 60s on Pro).Solution:

Optimize slow database queries
Consider background jobs for long-running tasks
Upgrade to Pro for 60s timeout

Performance Optimization

Enable Edge Config (Pro/Enterprise)

Store configuration that needs to be globally available with ultra-low latency:

vercel env add EDGE_CONFIG

Enable Edge Middleware

Hiro CRM’s middleware.ts runs on Vercel Edge Network for:

Authentication checks
Redirects
International routing

Already configured and optimized!

Optimize Bundle Size

Monitor your bundle size:

ANALYZE=true npm run build

This generates a bundle analyzer report.

Security Checklist

Review environment variables

Ensure no secrets are exposed in client-side variables (without NEXT_PUBLIC_ prefix).

Enable deployment protection

Require authentication to access preview deployments.

Configure CORS

Restrict API access to your domain only.

Enable Vercel Firewall (Enterprise)

Add DDoS protection and rate limiting.

Monitor Sentry

Set up Sentry error tracking to catch issues in production.

Next Steps

Database Setup

Configure your Supabase database

Seeding Data

Add demo data to your database

Environment Variables

Complete environment variable reference

Vercel Docs

Official Vercel documentation

Get Started

Core Features

Integrations

Deployment

Guides

Prerequisites

Deployment Steps

Custom Domain Setup

Vercel Configuration Files

Root vercel.json

Frontend vercel.json

Next.js Configuration

Standalone Output

Security Headers

Image Optimization

Performance Optimizations

CI/CD Workflow

Automatic Deployments

Deployment Protection

Monitoring & Debugging

View Logs

Real-time Logs

Analytics

Troubleshooting

Performance Optimization

Enable Edge Config (Pro/Enterprise)

Enable Edge Middleware

Optimize Bundle Size

Security Checklist

Next Steps

Database Setup

Seeding Data

Environment Variables

Vercel Docs

Build docs developers (and LLMs) love

Get Started

Core Features

Integrations

Deployment

Guides

​Prerequisites

​Deployment Steps

​Custom Domain Setup

​Vercel Configuration Files

​Root vercel.json

​Frontend vercel.json

​Next.js Configuration

​Standalone Output

​Security Headers

​Image Optimization

​Performance Optimizations

​CI/CD Workflow

​Automatic Deployments

​Deployment Protection

​Monitoring & Debugging

​View Logs

​Real-time Logs

​Analytics

​Troubleshooting

​Performance Optimization

​Enable Edge Config (Pro/Enterprise)

​Enable Edge Middleware

​Optimize Bundle Size

​Security Checklist

​Next Steps

Database Setup

Seeding Data

Environment Variables

Vercel Docs

Build docs developers (and LLMs) love

Prerequisites

Deployment Steps

Custom Domain Setup

Vercel Configuration Files

Root vercel.json

Frontend vercel.json

Next.js Configuration

Standalone Output

Security Headers

Image Optimization

Performance Optimizations

CI/CD Workflow

Automatic Deployments

Deployment Protection

Monitoring & Debugging

View Logs

Real-time Logs

Analytics

Troubleshooting

Performance Optimization

Enable Edge Config (Pro/Enterprise)

Enable Edge Middleware

Optimize Bundle Size

Security Checklist

Next Steps