Skip to main content
Vercel provides the easiest way to deploy Openfront with automatic builds, deployments, and managed PostgreSQL database.

​
One-Click Deployment

Click the button below to deploy Openfront to Vercel: Deploy with Vercel This will:
  • Clone the Openfront repository to your GitHub account
  • Create a new Vercel project
  • Provision a managed PostgreSQL database
  • Deploy your Openfront instance

​
Deployment Process

1

Click Deploy Button

Click the “Deploy with Vercel” button above to start the deployment process
2

Connect GitHub Account

Authorize Vercel to access your GitHub account and create the repository
3

Configure Project

Enter a name for your project and select your GitHub account
4

Add PostgreSQL Database

Vercel will prompt you to add a PostgreSQL database. Click “Add” to provision a managed database
5

Set Environment Variables

Configure the required SESSION_SECRET environment variable (see below)
6

Deploy

Click “Deploy” and wait for the build and deployment to complete (typically 3-5 minutes)

​
Environment Variables

​
Required Variables

Vercel will automatically configure DATABASE_URL when you add the PostgreSQL integration. You must manually set:

​
SESSION_SECRET

SESSION_SECRET="your-very-long-session-secret-key-minimum-32-characters"
The SESSION_SECRET must be at least 32 characters long. Generate a secure value using:
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
To add environment variables in Vercel:
  1. Go to your project settings
  2. Navigate to “Environment Variables”
  3. Add SESSION_SECRET with your generated value
  4. Save and redeploy

​
Optional Variables

Add these variables for additional functionality:

​
Payment Providers

Stripe: 
STRIPE_SECRET_KEY="sk_test_51..."
STRIPE_WEBHOOK_SECRET="whsec_..."
PayPal: 
PAYPAL_CLIENT_ID="your-paypal-client-id"
PAYPAL_CLIENT_SECRET="your-paypal-client-secret"

​
Shipping Provider

SHIPPO_API_KEY="shippo_test_..."

​
File Storage (S3)

S3_BUCKET_NAME="your-bucket-name"
S3_REGION="us-east-1"
S3_ACCESS_KEY_ID="your-access-key"
S3_SECRET_ACCESS_KEY="your-secret-key"
Without S3 configuration, Openfront will use local file storage. This works for development but is not recommended for production on Vercel as the filesystem is ephemeral.

​
Email Configuration

SMTP_HOST="smtp.gmail.com"
SMTP_PORT="587"
SMTP_USER="your-email@gmail.com"
SMTP_PASS="your-app-password"
FROM_EMAIL="noreply@yourstore.com"

​
Database Configuration

​
Managed PostgreSQL

Vercel’s PostgreSQL integration automatically:
  • Provisions a managed database
  • Sets the DATABASE_URL environment variable
  • Handles connection pooling
  • Provides automatic backups

​
External Database

You can also use an external PostgreSQL database:
  1. Remove the Vercel PostgreSQL integration
  2. Add DATABASE_URL environment variable with your database connection string:
DATABASE_URL="postgresql://username:password@host:5432/database"
Make sure your external database allows connections from Vercel’s IP ranges.

​
Database Migrations

Vercel runs database migrations automatically during the build process. The build command includes: 
keystone build --no-ui && npm run migrate && next build
If migrations fail, the build will fail. Check the build logs in Vercel dashboard for errors.

​
Build Configuration

​
Build Settings

Vercel automatically detects the build settings from package.json:
  • Build Command: npm run build
  • Output Directory: .next
  • Install Command: npm install
  • Development Command: npm run dev

​
Node.js Version

Openfront requires Node.js 20 or higher. Vercel will automatically use Node.js 20+ based on the engines field in package.json: 
"engines": {
  "node": ">=20.0.0"
}

​
Build Time

Expect build times of 3-5 minutes:
  • KeystoneJS schema generation: 30-60 seconds
  • Database migrations: 30-90 seconds
  • Next.js build: 2-3 minutes

​
Vercel-Specific Features

​
Automatic Deployments

Vercel automatically deploys:
  • Production: Pushes to main branch
  • Preview: Pull requests and other branches
Each deployment gets a unique URL for testing.

​
Environment-Specific Variables

Configure different variables for:
  • Production: Live store with real payment credentials
  • Preview: Test store with sandbox credentials
  • Development: Local development settings

​
Analytics and Monitoring

Vercel provides:
  • Real-time analytics
  • Performance monitoring
  • Error tracking
  • Custom domains and SSL

​
Custom Domain Setup

1

Add Domain in Vercel

Go to Project Settings > Domains and add your custom domain
2

Configure DNS

Add the DNS records provided by Vercel to your domain registrar
3

Wait for SSL

Vercel automatically provisions SSL certificates (may take 1-2 hours)
4

Update Environment Variables

Update any URLs in your environment variables to use the custom domain

​
Post-Deployment Setup

1

Access Your Deployment

Click the deployment URL in Vercel dashboard
2

Create Admin User

Navigate to /dashboard/init to create your first admin user
3

Run Onboarding

Complete the store onboarding to set up sample data
4

Configure Payment Providers

Add payment credentials in Settings > Payment Providers
5

Test Checkout

Create a test order to verify payment processing works

​
Webhook Configuration

​
Stripe Webhooks

  1. Go to Stripe Dashboard > Developers > Webhooks
  2. Add endpoint: https://your-domain.vercel.app/api/webhooks/stripe
  3. Select events to listen for:
    • payment_intent.succeeded
    • payment_intent.payment_failed
    • charge.refunded
  4. Copy the webhook signing secret
  5. Add to Vercel environment variables as STRIPE_WEBHOOK_SECRET

​
PayPal Webhooks

  1. Go to PayPal Developer Dashboard > Webhooks
  2. Add webhook: https://your-domain.vercel.app/api/webhooks/paypal
  3. Select event types:
    • PAYMENT.CAPTURE.COMPLETED
    • PAYMENT.CAPTURE.DENIED

​
Troubleshooting

​
Build Failures

Database connection errors:
  • Check DATABASE_URL is correctly set
  • Ensure database is accessible from Vercel
  • Check database credentials are correct
Migration errors:
  • Check database schema is compatible
  • Review migration logs in Vercel dashboard
  • Try running migrations manually

​
Runtime Issues

500 Internal Server Error:
  • Check Vercel function logs for errors
  • Verify all required environment variables are set
  • Check database connection
Session issues:
  • Verify SESSION_SECRET is at least 32 characters
  • Check database session storage is working
File upload issues:
  • Configure S3 storage for production
  • Verify S3 credentials are correct

​
Performance Issues

Slow response times:
  • Check database performance and connection pooling
  • Review Vercel function execution logs
  • Consider upgrading Vercel plan for better resources
Database connection limit:
  • Use connection pooling
  • Upgrade database plan if needed
  • Reduce concurrent connections

​
Scaling on Vercel

​
Horizontal Scaling

Vercel automatically scales your deployment:
  • Serverless functions scale automatically
  • No configuration needed
  • Pay only for what you use

​
Database Scaling

For high traffic:
  • Upgrade Vercel Postgres plan
  • Use external managed database (e.g., Railway, Supabase)
  • Enable read replicas

​
File Storage

Always use S3-compatible storage in production. Vercel’s filesystem is ephemeral and files will be lost between deployments.

​
Cost Considerations

​
Vercel Pricing

  • Hobby Plan: Free for personal projects
  • Pro Plan: $20/month for commercial use
  • Enterprise: Custom pricing

​
Database Pricing

Vercel Postgres pricing:
  • Additional cost based on storage and compute
  • Consider external database for cost optimization

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us