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

Vercel पर Deploy करना

Vercel पर deploy करना Netlify से अलग एक delivery service उपयोग करने जैसा है अपनी finished dish customers तक पहुंचाने के लिए — goal वही है, process और specialties थोड़ी अलग हैं।

In this page:

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

Zero-Config Deployment

Vercel common frameworks को अपने आप detect करता है (Vite, Create React App, और खासकर Next.js शामिल) और सही build command और output directory configure कर देता है बिना आपको manually कुछ specify किए, ज़्यादातर standard project setups में।

Note: एक standard Vite React app के लिए, repo connect करना और deploy क्लिक करना अक्सर literally इतना ही काफी है — auto-detected settings सही दिख रही हैं यह confirm करने के लिए Vercel के build logs check करें।
Warning: यह एक असली hosting service है जिसे एक असली account और deployment चाहिए — इसे इस code preview के अंदर चलता हुआ demonstrate नहीं किया जा सकता।

उदाहरण: 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.

Client-Side Routing Handle करना

Netlify की तरह ही, एक React Router single-page app को Vercel को हर route के लिए index.html serve करने के लिए configured चाहिए, React Router को असल routing client-side पर handle करने देते हुए, बजाय Vercel के हर path के लिए एक असली file ढूंढने की कोशिश करने (और fail होने) के।

Note: Vercel की framework auto-detection अक्सर known frameworks के लिए यह सही तरीके से अपने आप configure कर देती है — manual rewrites जोड़ने से पहले पहले check करें।
Warning: यह rewrite (जब ज़रूरी हो) configured न होने पर, किसी non-home route को refresh या directly visit करना आपके app के बजाय एक 404 return करता है।

उदाहरण: 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 हर pull request को अपने आप इसका अपना Preview deployment के रूप में deploy करता है, आपकी main branch से जुड़ी Production deployment से अलग। Environment variables दोनों के लिए अलग तरीके से configure किए जा सकते हैं, preview deployments को एक staging API पर point करने देते हुए जबकि production असली वाली पर point करती है।

Note: इस distinction को deliberately उपयोग करें — एक staging backend पर point करती preview deployment experimental branches को असली production data पर असर डालने से रोकती है।
Warning: दोनों environments के लिए variables configure करना भूल जाना (सिर्फ Production वाले set करना) Preview deployments को broken या गलत backend पर point किया छोड़ सकता है।

उदाहरण: 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

Netlify पर Deploy करना · React Apps के लिए Basic CI/CD · React में Environment Variables · React SPAs के लिए SEO Basics

{# 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. #}
आम गलतियां
  1. यह न realize करना कि Vercel की zero-config detection usually एक standard Vite/React app अपने आप handle कर लेती है, इसलिए manually build settings override करना कभी-कभी इसे solve करने से ज़्यादा problems का कारण बन सकता है।
  2. यह भूल जाना कि Vercel को भी client-side routing के लिए एक rewrite rule चाहिए, Netlify के redirect जैसा।
  3. Preview deployments (per pull request) को Production deployments (main branch) से confuse करना यह check करते समय कि कौन से environment variables apply होते हैं।
चैप्टर सारांश
  • Vercel एक और popular hosting platform है, जिसका Next.js (इसका अपना creator) के साथ-साथ plain React apps के लिए भी particularly strong support है।
  • यह common frameworks के लिए अक्सर build settings को बिना किसी manual configuration के auto-detect करता है।
  • Vercel पर client-side routing को एक rewrite rule (vercel.json) चाहिए, Netlify के redirect के equivalent।
  • Vercel Production deployments (main branch) को Preview deployments (दूसरी branches/PRs) से अलग करता है, हर एक potentially अलग environment variables के साथ।
ब्राउज़र सपोर्ट

कोई React-version restriction नहीं — एक hosting/deployment workflow है, कोई 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.