Vercel Deployment Guide

Deploy IssueCapture on Vercel

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

Quick Summary

Time: 5-10 minutes (7 steps)

Prerequisites: Vercel account, Git repo

Process: Env vars → Domains → Deploy

Works with: Next.js, React, Vue, Angular

Prerequisites

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

Step-by-Step Installation

Follow these steps to get up and running in minutes.

Get Your API Key

Go to 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

Add your Vercel domains to the allowlist in IssueCapture dashboard to allow submissions

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
Your configured production branch deploys to production (often main)

# 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 & Allowed Domains

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

Common integration issues and how to solve them.

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_

Domain allowlist errors on production but works locally (often shown as CORS)

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 *.vercel.app wildcard to IssueCapture dashboard
This covers all preview URLs automatically
Alternative: Add each preview URL individually (not recommended)

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

Ready to deploy?

Get Started Free View All Docs