रिएक्ट प्रोजेक्ट के लिए .env फ़ाइल जोड़ना

Question

जब मैं जीथब के लिए प्रतिबद्ध हूं, तो मैं अपनी एपीआई कुंजी को छिपाने की कोशिश कर रहा हूं, और मैंने मार्गदर्शन के लिए मंच के माध्यम से देखा है, विशेष रूप से निम्नलिखित पोस्ट:

मैं बनाने के लिए एपीआई कुंजी कैसे बनाऊँ?

मैंने बदलाव किए और यार्न को फिर से शुरू किया। मुझे यकीन नहीं है कि मैं क्या गलत कर रहा हूं — मैंने .envअपनी परियोजना के रूट में एक फ़ाइल जोड़ी (मैंने इसे नाम दिया process.env) और उस फ़ाइल में जिसे मैंने अभी डाला था REACT_APP_API_KEY = 'my-secret-api-key'।

मुझे लगता है कि यह तरीका हो सकता है जिस तरह से मैं fetchApp.js में अपनी कुंजी जोड़ रहा हूं , और मैंने टेम्पलेट शाब्दिक का उपयोग किए बिना कई स्वरूपों की कोशिश की है, लेकिन मेरी परियोजना अभी भी संकलित नहीं होगी।

किसी भी प्रकार की मदद की बेहद सराहना की जाती है।

performSearch = (query = 'germany') => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

Comments

process.envनाम के बजाय इसे .env.local or .env.process रखें और इसे src निर्देशिका के बाहर रखें

— RIYAJ KHAN

हाय @RIYAJKHAN मैंने फ़ाइल को .env.local में बदल दिया है और यह निश्चित रूप से src डायरेक्टरी के बाहर है, लेकिन मुझे अभी भी REACT_APP_API_KEY परिभाषित नहीं हो रहा है: /

— Bianca M

मेरे लिए यह तय था कि मैं अपने स्थानीय देव सर्वर को चलाने वाले टर्मिनल को बंद कर रहा था और फिर से चल रहा था npm run start।

— n00bAppDev

आप प्रतिक्रिया ऐप में रहस्य छिपा नहीं सकते। Stackoverflow.com/a/46839021/4722345 देखें

— JBallin

रहस्यों को संग्रहीत करने के लिए इसका उपयोग न करें। से डॉक्स ...WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

— निशांत मेहता

Answer 1

4 कदम

1. npm install dotenv --save

2. इसके बाद अपने ऐप में निम्न लाइन जोड़ें।

   require('dotenv').config()

3. फिर .envअपने एप्लिकेशन के रूट डायरेक्टरी में एक फाइल बनाएं और इसमें वैरिएबल जोड़ें।

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

4. अंत में, .envअपनी .gitignoreफ़ाइल में जोड़ें ताकि Git इसे अनदेखा कर दे और यह GitHub पर कभी समाप्त न हो।

यदि आप create-react-app का उपयोग कर रहे हैं, तो आपको केवल चरण 3 और 4 की आवश्यकता है, लेकिन ध्यान रखें REACT_APP_कि इसके लिए कार्य करने के लिए चर की आवश्यकता है ।

संदर्भ: https://create-react-app.dev/docs/adding-custom-environment-variables/

नोट - .env फ़ाइल में चर जोड़ने के बाद आवेदन को पुनः आरंभ करने की आवश्यकता।

संदर्भ - https://medium.com/@thejasonfile/use-dotenv-package-to-create-environment-variables-33da4ac4ea8f

Comments

यदि आप "create-react-app" का उपयोग करके प्रतिक्रिया एप्लिकेशन बनाते हैं, तो चर नाम से पहले .env फ़ाइल .use "REACT_APP_" को जोड़ने के बाद एप्लिकेशन को पुनरारंभ करने की आवश्यकता है।

— विकाश

@tarzen chugh क्या होगा अगर मैं उदाहरण के लिए AWS में अपने ऐप को तैनात कर रहा हूं। चूंकि .env gitignore का हिस्सा है, इसलिए इसे अनदेखा नहीं किया जाएगा? मैं कैसे इसे उत्पादन सहित के बारे में जा सकते हैं?

— user2763557 13

मैं कहाँ जोड़ूँ require('dotenv').config()? कौन सी फाइल?

— aqteifan

@aqteifan u को उस स्निपेट को जोड़ने की आवश्यकता नहीं है, लेकिन फिर .ENV फ़ाइलों के नामकरण में एक महत्वपूर्ण भूमिका निभाई जाती है

— परीक्षण

@ user2763557 मैं जिस पैटर्न का उपयोग करता हूं, वह एक .env.exampleफाइल है जिसमें एनवी कीज़ की परिभाषा दी गई है। उसके बाद, आप कॉपी कर सकते हैं .env.exampleऔर एक .envफाइल बना सकते हैं (विकास और उत्पादन में) जिसमें आपके पास वैध मान हैं जैसे कि चाबियाँ, आधार यूआरएल आदि। आपको .envफ़ाइल को इसमें जोड़ना होगा .gitignore।

— आदिस अजहर

Answer 2

इसलिए मैं खुद रिएक्ट करने के लिए नया हूं और मुझे ऐसा करने का एक तरीका मिला।

इस समाधान के लिए किसी अतिरिक्त पैकेज की आवश्यकता नहीं है ।

चरण 1 ReactDocs

उपरोक्त डॉक्स में वे शेल और अन्य विकल्पों में निर्यात का उल्लेख करते हैं, मैं जिसको समझाने का प्रयास करूंगा वह .env फाइल का उपयोग कर रहा है

1.1 रूट / .env बनाएँ

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

महत्वपूर्ण नोट यह REACT_APP_ से शुरू होना चाहिए

1.2 प्रवेश ENV चर

#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3 बिल्ड एनव इश्यू

इसलिए जब मैंने चरण १.१ | २ के बाद यह काम नहीं किया था, तब मुझे उपरोक्त समस्या / समाधान मिला। जब आप बनाया जाता है, तब रीड / क्रिएट करता है जब आपको एनपीएम रन की जरूरत होती है, तो हर बार जब आप .env फाइल को संशोधित करते हैं तो वेरिएबल्स अपडेट हो जाते हैं।

Comments

मेरी राय में, यह सही उत्तर है! कोई अतिरिक्त पैकेज आवश्यक नहीं है, और पर्यावरण चर आयात करने के लिए उचित प्रतिक्रिया तरीका है। अन्य तरीके काम करेंगे, लेकिन जब यह आपके लिए पहले से ही हो तो पैकेज और कोड कॉन्फ़िगरेशन क्यों जोड़ें? बहुत बढ़िया जवाब!

— शाम

मुझे यह REACT_APP_धन्यवाद याद आ रहा था । किसी अन्य व्यक्ति ने इसका उल्लेख नहीं किया।

— रोटिमी-बेस्ट

यह मेरे लिए किसी कारण से काम नहीं आया। मुझे मिलता हैundefined

— 14

@ Si8 आप त्रुटि / प्रक्रिया पर विस्तार कर सकता है। आपको कौन सा कदम मिला undefined, क्या आपने एक नया चर जोड़ने के बाद ऐप को फिर से शुरू किया है। 1.3 देखें

— T04435

मैंने सब कुछ आजमाया है। process.env.REACT_APP_API_KEYकहता है undefined।

— मिशेल रेजीन

Answer 3

आज ऐसा करने का एक सरल तरीका है।

बस अपनी मूल निर्देशिका में .env.local फ़ाइल बनाएं और वहां चर सेट करें। आपके मामले में:

REACT_APP_API_KEY = 'my-secret-api-key'

तब आप इसे अपने js फ़ाइल को इस तरह कहते हैं:

process.env.REACT_APP_API_KEY

प्रतिक्रिया के बाद से पर्यावरण चर का समर्थन करता है। यह केवल ऐसा करने के लिए बाहरी पैकेज की आवश्यकता नहीं है।

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

* नोट: मैं .env.local के बजाय .env का प्रस्ताव करता हूं क्योंकि प्रोजेक्ट बनाते समय प्रतिक्रिया-एप्लिकेशन इस फाइल को gitignore में जोड़ते हैं।

फ़ाइलें प्राथमिकता:

npm start: .env.development.local, .env.development, .env.local.env।

npm रन बिल्ड: .env.production.local, .env.production, .env .local, .env

npm परीक्षण: .env.test.local, .env.test, .env (नोट .env.live डिज़ाइन किया गया)

अधिक जानकारी: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Comments

उचित नामकरण ने मेरे लिए काम किया। मैंने .env.dev का उपयोग किया था और रिएक्ट वापस आ गया था। इसे देख रहा था ।env.development

— Omnibyte

Answer 4

वेबपैक उपयोगकर्ता

यदि आप वेबपैक का उपयोग कर रहे हैं, तो आप dotenv-webpackनीचे दिए गए चरणों का पालन करने के लिए, प्लगइन स्थापित और उपयोग कर सकते हैं:

पैकेज स्थापित करें

yarn add dotenv-webpack

एक .envफ़ाइल बनाएँ

// .env
API_KEY='my secret api key'

इसे webpack.config.jsफाइल में जोड़ें

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

इसे अपने कोड में उपयोग करें

process.env.API_KEY

अधिक जानकारी और कॉन्फ़िगरेशन जानकारी के लिए, यहां जाएं

Comments

यदि आप webpack-devserver का उपयोग कर रहे हैं, तो जब तक आप इसे पुनः आरंभ नहीं करते तब तक आपको परिवर्तन दिखाई नहीं देंगे।

— इसहाक पाक

यह मेरे लिए सबसे अच्छा समाधान था। धन्यवाद। एक नोट: मैं सर्वर साइड रेंडरिंग का उपयोग कर रहा हूं, इसलिए मुझे दोनों वेबपैक फाइल (क्लाइंट भी) को अपडेट करना था।

— जॉर्ज मौरिसियो

@Aminu कानो कृपया आप मुझे समझा सकते हैं कि अगर मैं बंडल-जज फ़ाइल ऑनलाइन स्रोतों में देखता हूं, तो एपी-कुंजी अभी भी दिखाई दे रही है, तो इस दृष्टिकोण का उपयोग करने का क्या मतलब है?

— लिनास एम।

@LinasM। हाँ, यकीन है, लेकिन "ऑनलाइन" से आपका क्या मतलब है?

— अमीनु कानो

@AminuKano, हाँ, इस बिंदु को बहुत स्पष्ट रूप से समझाया। धन्यवाद

— एम।

Answer 5

1. अपने रूट फोल्डर पर .env फाइल बनाएं

कुछ स्रोतों का उपयोग करने के लिए .env.developmentआवश्यक है .env.productionलेकिन यह अनिवार्य नहीं है।

2. आपके VARIABLE का नाम -must - REACT_APP_YOURVARIABLENAME से शुरू

ऐसा लगता है कि यदि आपका पर्यावरण चर उस तरह से शुरू नहीं होता है जिससे आपको समस्या होगी

3. अपने चर को शामिल करें

अपने पर्यावरण चर को शामिल करने के लिए बस अपने कोड पर रखें process.env.REACT_APP_VARIABLE

आपको कोई बाहरी निर्भरता स्थापित करने की आवश्यकता नहीं है

Comments

मैं एक ही काम करता हूं, लेकिन यह कंसोल में अपरिभाषित दिखाता है

— PRADIP GORULE

यदि आप मानों को अपरिभाषित के रूप में प्राप्त कर रहे हैं, तो फिर से पुन: व्यवस्थित करें।

— बेनामी

recompile के बाद अभी भी अपरिभाषित हो रहा है। console.log('process', process.env.REACT_APP_BASE_URL);

— सनत गुप्ता

Answer 6

आपको npm install env-cmd इंस्टॉल करना होगा

रूट डायरेक्टरी में .env करें और इस तरह अपडेट करें और REACT_APP_ वैरिएबल नाम के लिए अनिवार्य उपसर्ग है।

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

अद्यतन पैकेज

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Answer 7

1. dotenvनिर्भरता के रूप में स्थापित करें :

npm i --save-dev dotenv

2. .envरूट निर्देशिका में एक फ़ाइल बनाएँ :

my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md

3. .envनीचे दी गई फ़ाइल को अपडेट करें और REACT_APP_ चर नाम के लिए अनिवार्य उपसर्ग है।

REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY

4. [ वैकल्पिक लेकिन अच्छा अभ्यास ] अब आप चर को संग्रहीत करने और चर को निर्यात करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बना सकते हैं ताकि इसे अन्य फ़ाइल से उपयोग कर सकें।

उदाहरण के लिए, मैंने एक फ़ाइल बनाई है जिसका नाम है base.jsऔर इसे नीचे की तरह अपडेट करें:

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;

5. या आप बस निम्नलिखित तरीके से अपनी JS फ़ाइल में पर्यावरण चर को कॉल कर सकते हैं:

process.env.REACT_APP_BASE_URL

Comments

केवल एक .envफ़ाइल का उपयोग करते समय आप देव और ठेस वातावरण के बीच अंतर कैसे करते हैं ? मुझे पता है कि हमें बनाने .env.developmentऔर .env.prodफ़ाइलों की आवश्यकता है , लेकिन हम आपके तरीके का उपयोग करके उनके बीच अंतर कैसे करते हैं?

— अमयाराजे

@ameyaraje मूल रूप से, हम अपनी .envफ़ाइल को अनदेखा करते हैं .gitignore। इसलिए, परिनियोजन के समय, हम .envफ़ाइल को केवल हमारे सर्वर पर कॉपी करते हैं और BASE_URL और अन्य आवश्यक मानों को बदलते हैं। इस तरह, जब इसे नवीनतम कोड को तैनात करने की आवश्यकता होती है, हम सिर्फ गिट मास्टर से खींचते हैं और इसे तैनात करते हैं। हम इसके बारे में नहीं सोचते हैं .envक्योंकि हम इसे अनदेखा कर रहे हैं और शुरुआत में ही इसे अपने सर्वर में सेट कर लेते हैं। धन्यवाद!

— फतेमा टी। ज़ुहोरा

process.env.REACT_APP_API_KEY अपरिभाषित दिखाते हुए मान नहीं दे रहा है। मैंने सर्वर बंद कर दिया और

— npm

@vikramvi क्या आप REACT_APP_BASE_URL.env फ़ाइल में समान नाम वाले चर में रखते हैं?

— फात्मा टी। ज़ुहोरा

@ फ़ातेमा.ज़ुहोरा यह मेरा बुरा था, मैंने इसे अंडर डायरेक्टरी के तहत डालने की बजाय गलती से बाल निर्देशिका में डाल दिया था।

— विक्रमवी

Answer 8

यदि मामले में आपको मान मिल रहा है undefined, तो आपको नोड सर्वर को फिर से शुरू करने और फिर से पुन: स्थापित करने पर विचार करना चाहिए।