React में Environment Variables
In this page:
# .env file
VITE_VARIABLE_NAME=value
// In component code
const value = import.meta.env.VITE_VARIABLE_NAME;Environment Variables Define और Read करना
आपके project root में एक .env file key-value pairs define करती है जिन्हें आपका build tool पढ़ता है और आपके code को available कराता है। Vite में, client-exposed variables को VITE_ से prefix होना चाहिए, और इन्हें आपके code में import.meta.env.VITE_SOMETHING के through access किया जाता है।
.env में variables जोड़ने या बदलने के बाद dev server restart करें — ज़्यादातर build tools file को सिर्फ startup पर पढ़ते हैं, live नहीं।VITE_) नहीं है वह silently client code को expose नहीं होता, भले ही वह .env file में defined हो।उदाहरण: Defining and Reading Environment Variables
// Run in your local React project (npm install required)
// .env
VITE_API_URL=https://api.example.com
// In your code:
const apiUrl = import.meta.env.VITE_API_URL;
fetch(apiUrl + '/users');Client-Side Variables कभी असल में Secret क्यों नहीं होते
कुछ भी जो आपके client-side JavaScript में bundle हो जाता है, इसमें इस तरह exposed environment variables भी शामिल हैं, आखिर में downloadable और readable बन जाता है किसी के लिए भी जो browser devtools खोलकर bundle inspect करे।
असली secrets (write access वाली API keys, database credentials) को हमेशा server-side रहना चाहिए, कभी client-exposed env variable में नहीं।
VITE_/REACT_APP_-prefixed variable में नहीं होनी चाहिए।VITE_-prefixed variable में डालना effectively उस key को उस किसी के लिए publish कर देता है जो आपकी site visit करके devtools खोले।हर Environment के लिए अलग Values
अलग .env files (जैसे .env.development और .env.production) वही codebase को अपने आप अलग values उपयोग करने देती हैं — जैसे development के दौरान एक local API URL और deploy होने पर असली production API URL — बिना किसी असली code को बदले।
.env file चुन लेते हैं, बिना extra configuration के।.env.production file public repository में commit करना उन्हें expose कर देता है — sensitive values रखने वाली किसी भी file के लिए .gitignore उपयोग करें।उदाहरण: Different Values per Environment
// Run in your local React project (npm install required)
// .env.development
VITE_API_URL=http://localhost:4000
// .env.production
VITE_API_URL=https://api.myrealapp.com
// Same code works correctly against both, automatically:
fetch(import.meta.env.VITE_API_URL + '/users');- असल में secret values (API secret keys) को एक client-side environment variable में डालना — client JS में bundle हुआ कुछ भी किसी के लिए भी visible है जो devtools खोले।
- वह required prefix (जैसे
VITE_याREACT_APP_) भूल जाना जो build tool को असल में एक variable client code को expose करने के लिए चाहिए। .envfile बदलने के बाद dev server restart न करना, update miss करना क्योंकि env vars typically build/start time पर पढ़े जाते हैं।
- Environment variables वही code को development vs. production में अलग तरीके से behave करने देते हैं (जैसे अलग API URLs पर point करना)।
- Client-exposed variables को browser bundle तक असल में पहुंचने के लिए एक specific prefix (Vite के लिए
VITE_, Create React App के लिएREACT_APP_) चाहिए। - Client-side code को exposed कोई भी variable publicly visible है — वहां कभी असली secrets न रखें।
- Variables typically
.envfiles में defined होते हैं, अलग environments के लिए अलग files के साथ (.env.production,.env.development)।
Build-tool feature (Vite का `import.meta.env` या Create React App का `process.env`); कोई specific React version requirement नहीं।
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