Vercel Deployment Guide

Deploy IssueCapture on Vercel

Complete guide for deploying applications with IssueCapture to Vercel. Configure environment variables, domains, and CORS in 10 minutes.

Quick Summary

Time: 5-10 minutes (7 simple steps)
Prerequisites: Vercel account, existing app with IssueCapture, Git repo
Process: Add env vars → Configure domains → Deploy → Test
Works with: Next.js, React, Vue, Angular, and all Vercel-supported frameworks
Features: Auto SSL, preview deployments, custom domains, wildcard CORS

Prerequisites

Vercel account (sign up free)
Application with IssueCapture already installed (see React, Vue, or Angular guides)
Git repository (GitHub, GitLab, or Bitbucket)
IssueCapture account (sign up free)

Step-by-Step Deployment

Get Your API Key

Go to https://issuecapture.com/signup and create a free account
Connect your Jira instance via OAuth
Navigate to the Widgets page and create a new widget
Copy your API key (starts with "ic_")

Add Environment Variables in Vercel

Configure your IssueCapture API key in Vercel dashboard

Go to your Vercel project → Settings → Environment Variables
Add new variable with your framework's prefix (NEXT_PUBLIC_, VITE_, REACT_APP_)
Select all environments (Production, Preview, Development)
Click "Save" - deployments will use this key automatically

# Environment Variable Configuration in Vercel

# Variable Name:
NEXT_PUBLIC_ISSUECAPTURE_API_KEY
# OR for other frameworks:
VITE_ISSUECAPTURE_API_KEY
REACT_APP_ISSUECAPTURE_API_KEY

# Value:
ic_your_api_key_here

# Environments (recommended):
☑️ Production
☑️ Preview
☑️ Development

Configure Allowed Domains

Whitelist your Vercel domains in IssueCapture dashboard for CORS

Go to IssueCapture dashboard → Widgets → Click your widget
Scroll to "Allowed Domains" section
Add your production domain (e.g., your-app.vercel.app)
Add *.vercel.app for preview deployments
Add localhost ports for local development

# Add these domains to IssueCapture Dashboard → Widgets → Domains

# Production domain:
your-app.vercel.app
# OR custom domain:
yourdomain.com

# Preview deployments (wildcard):
*.vercel.app

# Development (optional):
localhost:3000
localhost:5173
localhost:4200

Deploy to Vercel

Push your code and deploy to Vercel

Vercel automatically detects your framework (Next.js, Vite, etc.)
Environment variables are injected during build
Each push creates a preview deployment
Main/master branch deploys to production

# Option 1: Deploy via Git (Recommended)
# 1. Push code to GitHub, GitLab, or Bitbucket
git add .
git commit -m "Add IssueCapture integration"
git push origin main

# 2. Import project in Vercel dashboard
# → https://vercel.com/new
# → Select your repository
# → Click "Deploy"

# Option 2: Deploy via Vercel CLI
npm i -g vercel
vercel login
vercel          # Deploy to preview
vercel --prod   # Deploy to production

Test Production Deployment

Verify IssueCapture works on your deployed site

Visit your production URL (e.g., https://your-app.vercel.app)
You should see the IssueCapture bug report button
Click the button and submit a test issue
Check your Jira project for the created issue
Open browser console and type: window.IssueCapture.isOpen()

Configure Custom Domain (Optional)

Add a custom domain to your Vercel project

Go to Vercel project → Settings → Domains
Click "Add" and enter your domain
Follow Vercel's DNS configuration instructions
Add your custom domain to IssueCapture allowed domains
SSL certificate is automatically provisioned

# Add custom domain in Vercel:
# 1. Go to Project Settings → Domains
# 2. Add your domain (e.g., yourdomain.com)
# 3. Configure DNS records (Vercel provides instructions)

# DNS Configuration Example:
# Type: A
# Name: @
# Value: 76.76.21.21

# Type: CNAME
# Name: www
# Value: cname.vercel-dns.com

# After DNS propagates (5-60 minutes):
# ✓ SSL certificate auto-issued
# ✓ HTTPS automatically enabled

Preview Deployments & CORS

Configure IssueCapture for Vercel preview deployments

Preview deployments get unique URLs per branch/commit
Use *.vercel.app wildcard in IssueCapture dashboard
Test preview deployments before merging to production
Preview deployments use same environment variables

# Preview deployments have unique URLs like:
# your-app-git-feature-branch-team.vercel.app
# your-app-abc123.vercel.app

# Solution 1: Wildcard domain (Recommended)
# Add to IssueCapture allowed domains:
*.vercel.app

# Solution 2: Specific preview URLs
# Add each preview URL individually:
your-app-git-feature-branch-team.vercel.app
your-app-abc123.vercel.app

# Note: Wildcard (*.vercel.app) is easiest and covers all previews

Troubleshooting

Environment variables not available in production

Verify variable is added in Vercel dashboard → Settings → Environment Variables
Check "Production" environment is selected
Redeploy after adding environment variables
Use correct prefix: NEXT_PUBLIC_, VITE_, or REACT_APP_

CORS errors on production but works locally

Add your Vercel domain to IssueCapture allowed domains
Include both www and non-www versions (e.g., yourdomain.com and www.yourdomain.com)
For preview deployments, add *.vercel.app wildcard
Wait 1-2 minutes after updating domains for changes to propagate

Preview deployments can't submit issues

Preview deployments have unique URLs that change with each commit:

# Add wildcard domain to IssueCapture dashboard:
*.vercel.app

# This covers all preview URLs like:
# - your-app-git-feature-branch.vercel.app
# - your-app-abc123def456.vercel.app

Custom domain SSL certificate issues

Wait 5-60 minutes for DNS to propagate after adding domain
Verify DNS records match Vercel's instructions exactly
SSL certificate is auto-issued by Vercel (Let's Encrypt)
Check Vercel dashboard for domain verification status

Advanced Configuration

Environment-Specific Configuration

Use different API keys for production, preview, and development:

# In Vercel dashboard, add separate keys:

# Production API Key
# Environment: Production only
NEXT_PUBLIC_ISSUECAPTURE_API_KEY=ic_prod_abc123

# Preview API Key
# Environment: Preview only
NEXT_PUBLIC_ISSUECAPTURE_API_KEY=ic_preview_def456

# Development API Key
# Environment: Development only
NEXT_PUBLIC_ISSUECAPTURE_API_KEY=ic_dev_ghi789

Branch-Specific Deployments

Configure different behavior for different branches:

Main/master branch → Production deployment (auto)
Feature branches → Preview deployments (auto)
Configure in Vercel → Settings → Git
Preview deployments automatically use Preview environment variables

Production Best Practices

Use separate IssueCapture widgets for prod and preview
Enable Vercel Analytics for performance monitoring
Use custom domain for production (better branding + SEO)
Test preview deployments before merging to main
Configure deployment protection for production branch

Ready to deploy?

Start Free Trial View All Docs