Deploying to Vercel
In this page:
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
$ npm install -g vercel
$ vercel login
$ vercel
# Vercel detects the Vite/CRA config automatically and deploys a preview
$ vercel --prod⚠️ Run this command in your terminal.
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
$ cat vercel.json
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}⚠️ Run this command in your terminal.
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
$ vercel env add VITE_API_URL production
$ vercel env add VITE_API_URL preview⚠️ Run this command in your terminal.
- 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.
- Forgetting Vercel also needs a rewrite rule for client-side routing, similar to Netlify's redirect.
- Confusing Preview deployments (per pull request) with Production deployments (the main branch) when checking which environment variables apply.
- 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.
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:
- Why Performance Matters
- Optimizing with React.memo
- Avoiding Unnecessary Re-renders
- Using the React Profiler
- Analyzing Bundle Size
- Image Optimization Techniques
- React as a PWA
- Creating a Production Build
- Environment Variables in React
- Deploying to Netlify
- Deploying to Vercel
- Basic CI/CD for React Apps
- SEO Basics for React SPAs