How to Deploy a React App to Vercel in 5 Minutes (2026 Guide)

Vercel makes deploying React apps ridiculously easy. No servers to manage, no complex configuration, and automatic deployments every time you push to Git. In this guide, I'll show you how to deploy your React app to Vercel in under 5 minutes.

This works for Create React App, Vite, Next.js, and any other React framework.

Prerequisites

• A React app (created with CRA, Vite, Next.js, etc.)
• A GitHub, GitLab, or Bitbucket account
• Your code pushed to a Git repository

# Using Vite (recommended)
npm create vite@latest my-app -- --template react
cd my-app
npm install

# Or using Create React App
npx create-react-app my-app
cd my-app

Step-by-Step Deployment

# Initialize git (if not already done)
git init
git add .
git commit -m "Initial commit"

# Create a new repository on GitHub, then:
git remote add origin https://github.com/yourusername/your-repo.git
git branch -M main
git push -u origin main

Setting Up a Custom Domain

Want to use your own domain instead of .vercel.app?

1. Go to your project settings in Vercel
2. Click "Domains"
3. Enter your domain (e.g., myapp.com)
4. Vercel will show you DNS records to add
5. Add these records to your domain registrar
6. Wait for DNS propagation (usually 5-30 minutes)

Common DNS Configurations

For apex domain (example.com):

Type: A
Name: @
Value: 76.76.21.21

For www subdomain (www.example.com):

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

Automatic Deployments

One of Vercel's best features: every time you push to your Git repository, Vercel automatically deploys your changes.

# Make changes to your code
git add .
git commit -m "Update homepage"
git push

# Vercel automatically deploys! 🚀

Preview Deployments

When you create a pull request, Vercel creates a preview deployment with a unique URL. This lets you test changes before merging to production.

Preview URLs look like: https://your-app-git-feature-branch.vercel.app

Configuring Build and Output Directories

If Vercel doesn't auto-detect your build settings, you can configure them manually:

In the Vercel Dashboard:

1. Go to Project Settings → General
2. Update "Build Command" and "Output Directory"
3. Click "Save"
4. Redeploy your project

Using vercel.json:

Create a vercel.json file in your project root:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Environment Variables

Managing environment variables in Vercel:

Adding Variables:

1. Go to Project Settings → Environment Variables
2. Add variables for Production, Preview, and Development
3. Use the same variable names as in your local .env file

Accessing Variables in Code:

Create React App:

// .env file
REACT_APP_API_URL=https://api.example.com

// In your code
const apiUrl = process.env.REACT_APP_API_URL;

Vite:

// .env file
VITE_API_URL=https://api.example.com

// In your code
const apiUrl = import.meta.env.VITE_API_URL;

Troubleshooting Common Issues

Build Fails with "Module not found"

This usually means a dependency is missing. Check:

1. All dependencies are in package.json
2. You're not importing from node_modules directly
3. Try deleting node_modules and package-lock.json, then reinstall

rm -rf node_modules package-lock.json
npm install
git add .
git commit -m "Reinstall dependencies"
git push

404 Errors on Page Refresh (SPA)

If you're using React Router and get 404 errors when refreshing or directly accessing routes:

Create vercel.json in your project root:

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

Environment Variables Not Working

Check:

1. Variables are prefixed correctly (REACT_APP_ or VITE_)
2. Variables are added to the correct environment (Production/Preview/Development)
3. You've redeployed after adding variables
4. You're accessing them correctly in code

Build Takes Too Long

If your build is slow:

• Enable Vercel's build cache (enabled by default)
• Optimize your build process (e.g., use Vite instead of CRA)
• Consider upgrading to Vercel Pro for faster builds

Advanced Configuration

Custom Build Scripts

If you need custom build logic, update your package.json:

{
  "scripts": {
    "build": "npm run lint && npm run test && vite build",
    "preview": "vite preview"
  }
}

Monorepo Support

If your React app is in a subdirectory of a monorepo:

1. In Vercel, set "Root Directory" to your app's folder
2. Example: If your app is in apps/web, set Root Directory to apps/web

Serverless Functions

Vercel supports serverless functions for backend logic:

Create api/hello.js:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Vercel!' });
}

Access it at https://your-app.vercel.app/api/hello

Monitoring and Analytics

Vercel provides built-in analytics:

• Speed Insights: Real user performance metrics
• Analytics: Page views, visitors, and more
• Logs: Real-time function and build logs

Enable analytics in Project Settings → Analytics.

Rolling Back Deployments

If a deployment breaks your app:

1. Go to your project's "Deployments" page
2. Find the last working deployment
3. Click the three dots → "Promote to Production"
4. Your app is instantly rolled back

Summary

You've successfully deployed your React app to Vercel! Here's what you accomplished:

• ✅ Deployed your app with zero configuration
• ✅ Set up automatic deployments from Git
• ✅ Configured environment variables
• ✅ (Optional) Added a custom domain
• ✅ (Optional) Fixed SPA routing issues

Your app is now live on Vercel's global CDN, with automatic HTTPS and instant rollbacks. Every time you push to Git, your changes will be live in under a minute.

Next Steps

• Set up a custom domain for your app
• Enable Vercel Analytics to track performance
• Add serverless functions for backend logic
• Configure preview deployments for pull requests
• Explore Vercel's Edge Functions for low-latency responses