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

Netlify पर Deploy करना

Netlify पर deploy करना अपनी finished, packed dish एक delivery service को देने जैसा है जो इसे दुनिया में कहीं भी customers के सामने पहुंचा देती है।

In this page:

  1. Basic Netlify Deployment Setup
  2. Redirects से Client-Side Routing Fix करना
  3. Netlify पर Environment Variables Set करना
Syntax
markup 
# public/_redirects
/*    /index.html    200

Basic Netlify Deployment Setup

एक Git repository को Netlify से connect करना और एक build command (जैसे npm run build) plus एक publish directory (जैसे dist) specify करना — usually इतना ही काफी है। Netlify हर push पर अपने आप आपका app build और deploy करता है, बिना manual server setup के।

Note: Netlify का free tier काफी generous है और personal projects, prototypes, और यहां तक कि कई production sites के लिए commonly उपयोग होता है।
Warning: यह एक असली hosting service है जिसे एक असली account और deployment चाहिए — इसे इस code preview के अंदर चलता हुआ demonstrate नहीं किया जा सकता।

उदाहरण: Deploying to Netlify from the CLI

bash 
$ npm install -g netlify-cli
$ netlify login
$ netlify init
? Build command: npm run build
? Directory to deploy: dist

$ netlify deploy --prod

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

Redirects से Client-Side Routing Fix करना

एक React Router app के पास सिर्फ ONE असली HTML file होती है (index.html) — बाकी सारे pages client-side पर JavaScript से render होते हैं।

Netlify को यह बताए बिना, /about जैसा एक page सीधे load करना या refresh करना एक असली 404 return करता है, क्योंकि server पर कोई असली /about file मौजूद नहीं। एक redirect rule इसे हमेशा index.html serve करके और React Router को control लेने देकर fix करता है।

Note: यह वही 'catch-all redirect to index.html' pattern लगभग हर static host पर एक client-side-routed single-page app के लिए चाहिए।
Warning: इस redirect rule के बिना, आपका app Links से navigate करने पर ठीक काम करता है, लेकिन किसी भी non-home page पर hard refresh या directly-typed/shared URL पर टूट जाता है (404s)।

उदाहरण: The _redirects File

bash 
$ cat public/_redirects
/*    /index.html   200

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

Netlify पर Environment Variables Set करना

Local .env files कभी Netlify पर upload नहीं होती (वे typically gitignored होती हैं) — production environment variables को Netlify की अपनी site settings dashboard में अलग से configure करना होता है, ताकि production build में सही values build process के दौरान बेक हो जाएं।

Note: इन्हें Netlify के dashboard में Site settings > Environment variables के अंदर एक बार set करें — वे अपने आप future deployments में persist रहती हैं।
Warning: Netlify के dashboard में required environment variables set करना भूल जाने से deployed build उन values को undefined रखकर चलती है, जो potentially API calls या दूसरे config-dependent features तोड़ सकती है।

उदाहरण: Setting a Netlify Environment Variable

bash 
$ netlify env:set VITE_API_URL https://api.example.com
Set environment variable VITE_API_URL with value https://api.example.com

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

Related Topics

Vercel पर Deploy करना · React में Environment Variables · Production Build बनाना · React Apps के लिए Basic CI/CD

{# 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. गलत build command या publish directory set करना, जिससे Netlify एक empty या broken site serve करता है।
  2. Client-side routing (React Router) के लिए एक redirect rule configure करना भूल जाना, जो homepage के अलावा किसी भी direct page load पर 404 का कारण बनता है।
  3. Netlify के dashboard में production environment variables set न करना, deployed app को ज़रूरी config के बिना छोड़ना।
चैप्टर सारांश
  • Netlify एक popular static-hosting platform है, जो एक React app का production build deploy करने के लिए well-suited है।
  • Deployment को typically सिर्फ एक build command (npm run build) और output folder (dist या build) चाहिए।
  • Direct page loads/refreshes पर client-side routing काम करने के लिए एक redirect rule (netlify.toml या एक _redirects file से) चाहिए।
  • Environment variables को Netlify के अपने dashboard में configure करना होता है, आपकी local .env files से अलग।
ब्राउज़र सपोर्ट

कोई 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 Environment Variables in React Next Lesson → Deploying to Vercel

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.