← Back to React Course | Chapter 14: Performance & Production Deployment | Lesson 11 of 13

Deploying to Vercel

Deploying to Vercel is like using a different delivery service than Netlify to get your finished dish to customers — same goal, slightly different process and specialties.

In this page:

  1. Zero-Config Deployment
  2. Handling Client-Side Routing
  3. Production vs. Preview Environment Variables
Syntax
markup 
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Zero-Config Deployment

Vercel automatically detects common frameworks (including Vite, Create React App, and especially Next.js) and configures the correct build command and output directory without you needing to specify anything manually, in most standard project setups.

Note: For a standard Vite React app, connecting the repo and clicking deploy is often literally all that's needed — check Vercel's build logs to confirm the auto-detected settings look correct.
Warning: This is a real hosting service requiring an actual account and deployment — it can't be demonstrated running inside this code preview.

Example: Deploying to Vercel from the CLI

bash 
$ npm install -g vercel
$ vercel login
$ vercel
# Vercel detects the Vite/CRA config automatically and deploys a preview

$ vercel --prod

⚠️ Run this in your own terminal or Node.js environment.

Handling Client-Side Routing

Just like Netlify, a React Router single-page app needs Vercel configured to serve index.html for every route, letting React Router handle the actual routing client-side, rather than Vercel trying (and failing) to find a real file for each path.

Note: Vercel's framework auto-detection often configures this correctly automatically for known frameworks — check first before adding manual rewrites.
Warning: Without this rewrite configured (when needed), refreshing or directly visiting a non-home route returns a 404 instead of your app.

Example: The vercel.json Rewrite

bash 
$ cat vercel.json
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

⚠️ Run this in your own terminal or Node.js environment.

Production vs. Preview Environment Variables

Vercel automatically deploys every pull request as its own Preview deployment, separate from the Production deployment tied to your main branch. Environment variables can be configured differently for each, letting preview deployments point at a staging API while production points at the real one.

Note: Use this distinction deliberately — a preview deployment pointing at a staging backend keeps experimental branches from affecting real production data.
Warning: Forgetting to configure variables for BOTH environments (only setting Production ones) can leave Preview deployments broken or pointed at the wrong backend.

Example: Setting Vercel Environment Variables per Environment

bash 
$ vercel env add VITE_API_URL production
$ vercel env add VITE_API_URL preview

⚠️ Run this in your own terminal or Node.js environment.

Related Topics

Deploying to Netlify · Basic CI/CD for React Apps · Environment Variables in React · SEO Basics for React SPAs

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Not realizing Vercel's zero-config detection usually handles a standard Vite/React app automatically, so manually overriding build settings can sometimes cause more problems than it solves.
  2. Forgetting Vercel also needs a rewrite rule for client-side routing, similar to Netlify's redirect.
  3. Confusing Preview deployments (per pull request) with Production deployments (the main branch) when checking which environment variables apply.
Chapter Summary
  • Vercel is another popular hosting platform, with particularly strong support for Next.js (its own creator) as well as plain React apps.
  • It often auto-detects build settings for common frameworks with zero manual configuration needed.
  • Client-side routing on Vercel needs a rewrite rule (vercel.json), the equivalent of Netlify's redirect.
  • Vercel distinguishes Production deployments (main branch) from Preview deployments (other branches/PRs), each with potentially different environment variables.
Browser Support

No React-version restriction — a hosting/deployment workflow, not a code feature.

🔒

Chapter Quiz — Complete all 13 topics to unlock

0/13 topics done

Complete these topics first:

← Previous Lesson Deploying to Netlify Next Lesson → Basic CI/CD for React Apps

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.