How to Deploy a React App to Vercel in 10 Minutes

How to Deploy a React App to Vercel in 10 Minutes

The first time I deployed to Vercel, I kept waiting for something to go wrong. I'd just pushed to GitHub, and within two minutes my app was live with HTTPS. No server configuration, no nginx setup, no DNS headaches.

That simplicity is why Vercel has become the default deployment target for React developers. It's optimized for exactly the kind of projects we build.

This guide walks you from a fresh React app to a live URL with a custom domain, environment variables, and preview deployments.

Step 1: Create Your React App

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev  # Make sure it works locally first

Make a quick change to src/App.tsx to have something visible:

function App() {
  return (
    <div style={{ textAlign: 'center', padding: '2rem' }}>
      <h1>My React App</h1>
      <p>Successfully deployed to Vercel!</p>
    </div>
  );
}

export default App;

Step 2: Push to GitHub

git init
git add .
git commit -m "Initial commit"

Create a new repository on GitHub (no README, no .gitignore — keep it empty), then:

git remote add origin https://github.com/YOUR_USERNAME/my-app.git
git branch -M main
git push -u origin main

Step 3: Deploy to Vercel

Option A: Vercel CLI (fastest)

npm install -g vercel
vercel login  # Opens browser to authenticate
vercel        # In your project directory

Answer the prompts:

• Set up and deploy: Yes
• Which scope: Your account
• Link to existing project: No
• Project name: my-app (or anything)
• Directory: .

Vercel detects Vite automatically and configures the build settings. Your app is live in about 60 seconds.

Option B: Vercel Dashboard (recommended for GitHub integration)

1. Go to vercel.com and sign in with GitHub
2. Click "Add New Project"
3. Import your GitHub repository
4. Vercel auto-detects Vite and sets:
   • Framework: Vite
   • Build command: npm run build
   • Output directory: dist
5. Click "Deploy"

The dashboard option automatically sets up preview deployments for every branch and PR.

Step 4: Fix React Router (If You're Using It)

Single-page apps with React Router need a rewrite rule — all URL paths should serve index.html, letting the client-side router handle navigation.

Create vercel.json in the project root:

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

Without this, navigating to https://your-app.vercel.app/about returns a 404.

Commit and push:

git add vercel.json
git commit -m "Add Vercel rewrite rules for SPA routing"
git push

Vercel automatically redeploys.

Step 5: Environment Variables

Local development — create .env.local (add to .gitignore):

# .env.local (never commit this file)
VITE_API_URL=http://localhost:3000
VITE_ANALYTICS_KEY=dev-key

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

Production on Vercel:

1. Go to your project in the Vercel dashboard
2. Settings → Environment Variables
3. Add each variable:
   • Name: VITE_API_URL
   • Value: https://api.yourdomain.com
   • Environment: Production (and Preview if needed)

Important: Variables must be prefixed with VITE_ to be accessible in browser code. Unprefixed variables are server-side only (useful for Next.js API routes but not for Vite React apps).

Redeploy after adding variables for them to take effect.

Step 6: Custom Domain

1. In your project dashboard → Settings → Domains
2. Click "Add Domain"
3. Enter your domain: myapp.com or app.myapp.com
4. Add the DNS records Vercel shows you:
   • For apex domain (myapp.com): Add an A record pointing to Vercel's IP
   • For subdomain (app.myapp.com): Add a CNAME record pointing to cname.vercel-dns.com
5. Wait for DNS propagation (usually minutes, sometimes up to 24 hours)

Vercel automatically provisions an SSL certificate via Let's Encrypt — HTTPS is free and automatic.

Preview Deployments: Automatic Branch Previews

With GitHub integration, every push to any branch creates a preview URL:

git checkout -b feature/dark-mode
# Make changes
git push origin feature/dark-mode

Vercel comments on the PR with a unique preview URL. Share it with teammates or clients before merging.

This workflow is genuinely great for teams — design reviews, client feedback, and QA can all happen before code merges to main.

Vercel.json Configuration Options

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-cache" }
      ]
    },
    {
      "source": "/static/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ],
  "redirects": [
    { "source": "/old-page", "destination": "/new-page", "permanent": true }
  ]
}

Checking Your Deployment

After deploying, verify:

# Check the build output
vercel logs your-deployment-url

# List all deployments
vercel list

# Roll back to a previous deployment
vercel rollback

What You Get For Free

For the React app you're deploying, our React tutorial for beginners builds one from scratch. If you're deploying a Next.js app instead of a plain React app, our Next.js 14 App Router guide covers Vercel deployment in that context. And for building the project setup that starts with Vite, see our Vite vs Webpack guide.

Frequently Asked Questions

Is Vercel free for React apps?

Yes. The Hobby plan is free: unlimited personal projects, 100GB bandwidth, SSL, preview deployments. Sufficient for personal projects and small apps.

How does Vercel handle React Router?

Add a vercel.json with a rewrite rule sending all paths to index.html. Without it, direct URL navigation returns 404.

How do I add environment variables?

Dashboard → Settings → Environment Variables. Use VITE_ prefix for browser-accessible variables in Vite projects. Redeploy after adding.

What is a preview deployment?

An automatic live URL created for every branch push or PR. Shareable for review before merging to main.