.env फ़ाइलों को नहीं उठा प्रतिक्रिया एप्लिकेशन बनाएँ?

Question

मैं अपने ऐप को बूटस्ट्रैप करने के लिए क्रिएट रिएक्शन ऐप का उपयोग कर रहा हूं।

मैंने दो .envफाइलें .env.developmentऔर .env.productionरूट में जोड़ी हैं ।

मेरी .env.developmentशामिल हैं:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

जब मैं अपने ऐप को इस्तेमाल करके चलाता हूं react-scripts startऔर process.envइसे कंसोल करता हूं तो यह बाहर फैल जाता है

{ NODE_ENV: "development", PUBLIC_URL: "" }

मैंने अलग-अलग चीजों की कोशिश की है, लेकिन इसकी सिर्फ मेरी विकास फ़ाइल में वेरिएबल्स नहीं उठा रहा हूं, मैं क्या गलत कर रहा हूं ?!

प्रत्यक्ष संरचना है:

/.env.development
/src/index.js

Package.json स्क्रिप्ट है:

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

संपादित करें:

@jamcreencia सही ढंग से बताया बाहर मेरी चर उपसर्ग होना चाहिए के साथ REACT_APP।

संपादित करें २

यह ठीक काम करता है अगर मैं फ़ाइल का नाम देता हूं .envलेकिन अगर मैं उपयोग करता हूं .env.developmentया नहीं.end.production

Comments

क्या आप अपनी package.jsonफाइल पोस्ट कर सकते हैं ?

— स्टीव चामिलार्ड

process.envकुछ ऐसा है जो बैक-एंड (नोड या जो भी आप उपयोग कर रहे हैं) पढ़ सकते हैं। फ्रंट-एंड बंडल को पता नहीं है कि process.envब्राउज़र में क्या चलता है। आप बंडल करते समय इसे बंडल में पास करने के लिए वेबपैक कॉन्फ़िगर कर सकते हैं, या इससे भी आसान कि आप इसे इंडेक्स फ़ाइल में बैक-एंड से पास कर सकते हैं जिसे आप एक वैश्विक चर के रूप में प्रस्तुत कर रहे हैं।

— राउल रेने

शायद यह मामला नहीं है, लेकिन मैंने इसे कई बार चलाया है और जो समस्या मुझे मिली है वह यह है कि जब मेरा कंप्यूटर बहुत अधिक मेमोरी का उपयोग कर रहा है तो मुझे मेरा .env वेरिएबल लोड नहीं मिलता है। मैं ubuntu 16.4 का उपयोग करता हूं। react-scripts start API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callbackयदि आप अभी भी उन्हें नहीं देखते हैं तो टर्मिनल से वेरिबल को लोड करने का प्रयास करें, मैं अपने सिस्टम को मेमोरी उपयोग को कम करने के लिए फिर से शुरू करूँगा और फिर से कोशिश करूँगा क्योंकि यह मेरे लिए इसे हल करता है।

— फेमी ओनी

@RaulRene क्रिएशन-रिएक्शन-ऐप हैंडल। आप आगे के कॉन्फिगरेशन की जरूरत नहीं है, इसके लिए बॉक्स से बाहर जाएं

— Femi Oni

Answer 1

इसके साथ create-react-app, आपको REACT_APP_इसे उपयोग करने में सक्षम होने के लिए चर नाम से उपसर्ग करने की आवश्यकता है।

उदाहरण:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

अधिक जानकारी यहाँ देखें

Comments

यह महत्वपूर्ण है। मैं इसे याद किया, लेकिन हाँ यह उपसर्ग के साथ काम नहीं करेगा

— Femi Oni

यह काम करता है जब मैं का उपयोग करें .env, लेकिन के लिए नहीं .env.developmentया .env.production?

— शेंकू

@shenku क्या आपने यह पता लगाने का प्रबंधन किया कि यह केवल साथ काम क्यों करता है .envऔर इसके साथ नहीं.env.developmentenv.production

— कॉन्स्टेंटिन चिरिला

फ्रंट-एंड काम करने वाले देवताओं के लिए, क्योंकि आपके पास ब्राउज़र में NodeJs नहीं हैं, तो आपको वेबपैक की आवश्यकता होगी ... meh

— Stephane

धन्यवाद। मैं घंटों तक जवाब की तलाश में रहा।

— फहमीद

Answer 2

सुनिश्चित करें कि आपकी .env फ़ाइल रूट डायरेक्टरी में है, src फोल्डर के अंदर नहीं।

Comments

हालाँकि, दस्तावेज़ को पढ़ते हुए मैंने देखा कि इसे रूट डायरेक्टरी में होना चाहिए, फिर भी मैंने src फोल्डर में अपनी .env फाइल को जोड़ने में कामयाबी हासिल की ... (facepalm) आपके उत्तर के लिए धन्यवाद।

— कॉर्ने सेप

मैं एक ही समस्या थी, यह src फ़ोल्डर के अंदर काम नहीं किया था, लेकिन यह रूट फ़ोल्डर में 3.4.3 संस्करण में जाने के बाद काम किया

— विनोद कुमार

Answer 3

यही समस्या थी! समाधान मेरे नोड सर्वर से कनेक्शन बंद करना था (आप CTRL + C के साथ ऐसा कर सकते हैं)। फिर 'npm run start' के साथ अपने सर्वर को फिर से शुरू करें और .env को ठीक से काम करना चाहिए।

स्त्रोत: जीठूब

Answer 4

यदि आप कई पर्यावरण का उपयोग करना चाहते हैं .env.development .env.production

dotenv-cli पैकेज का उपयोग करें

जोड़ें .env.developmentऔर .env.productionपरियोजना रूट फ़ोल्डर में

और आपका पैकेज। json

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

फिर पर्यावरण के अनुसार निर्माण करें

npm run-script build-dev 

Comments

यह वह जगह है dotenvया dotenv-cli?

— द्राजेन बोल्लोवुक

अलग-अलग वातावरणों के लिए अलग-अलग .env फ़ाइलों का निर्माण अब बॉक्स के बाहर क्रिएट-रिएक्शन-ऐप: क्रिएट-रिएक्शन-ऐप डॉक्स द्वारा किया जाता है । स्पष्ट रूप से डॉटेनव का उपयोग करने की आवश्यकता नहीं है (पर्यावरण के चर को संभालने के लिए वास्तव में इसे पर्दे के पीछे उपयोग करता है)

— Marnix.hoh

@MariaJeysinghAnbu, वह वाक्य रचना है dotenv-cli, नहीं dotenv: npmjs.com/package/dotenv-cli

— AMS777

@ AMS777 मैं उपयोग कर रहा हूँ dotenv NPM नहीं dotenv-CLI

— मारिया Jeysingh अनबू

@MariaJeysinghAnbu, मैं उपयोग करना चाहता था dotenvलेकिन एक त्रुटि मिली। मैंने दस्तावेज़ीकरण की जाँच की, लेकिन -eकमांड लाइन के लिए वह विकल्प नहीं मिला । हालाँकि मैंने इसे dotenv-cliप्रलेखन पर पाया । इसलिए मैं कह रहा था। मैं अंत में उसी समय का उपयोग और स्थापित env-cmdनहीं कर रहा हूं , जिससे भ्रम पैदा हो सकता है। dotenvdotenv-cli

— AMS777

Answer 5

Env-cmd के बारे में । GitHub पर VMois की तरह की पोस्ट के अनुसार , env-cmd को अपडेट किया गया है (संस्करण 9.0.1 लेखन के रूप में), पर्यावरण चर आपके रिएक्ट प्रोजेक्ट पर निम्नानुसार काम करेंगे :

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

अपने package.json फ़ाइल में।

Comments

बहुत बहुत धन्यवाद, इस टिप्पणी ने मुझे बचाया। क्रिएट-रिएक्शन-ऐप डॉक्यूमेंट ने इसे अपडेट नहीं किया है, इसलिए मैं

— समझ

आपने मुझे यहां पूरी तरह से बचा लिया। मैं इस चीज पर कताई कर रहा था। धन्यवाद

— MDiesel

कोई इस आदमी को पदक देता है

— रितेश पीवी जूल

Answer 6

इस उद्देश्य के लिए env-cmd मॉड्यूल है। Npm के माध्यम से npm i env-cmdतब अपनी package.jsonफ़ाइल में scriptsअनुभाग में स्थापित करें :

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

अपने प्रोजेक्ट रूट में आपको एक ही env वेरिएबल्स के साथ दो फाइल बनाने होंगे लेकिन अलग-अलग मानों के साथ:

.env.development
.env.production

फिर उन्हें जनता से बाहर कर दें। इसके लिए अपनी .gitignoreफ़ाइल में दो लाइनें जोड़ें:

.env.development
.env.production

तो यह देव और ठेस के लिए विभिन्न env चरों का उपयोग करने का एक उचित तरीका है।

Comments

पूर्ण पथ का उपयोग करने का प्रयास करें, जैसे: ./ode_modules/.bin/env-cmd

— Nastro

लेकिन मैं अपने उत्तर में दृष्टिकोण की सिफारिश नहीं करता हूं। अब मुझे पता है कि रिएक्शन मैकेनिक में निर्माण करने के लिए काम करता है ।env

— Nastro

Answer 7

मैं एक ही समस्या थी, लेकिन यह था क्योंकि मैं JS के बजाय YAML प्रारूप में मेरी .env फ़ाइल थी।

ये था

REACT_APP_API_PATH: 'https://my.api.path'

लेकिन यह होना चाहिए

REACT_APP_API_PATH = 'https://my.api.path'

Comments

इस तरह के एक सरल अभी तक अच्छा स्थान है। मैंने वही किया था और पेड़ों के लिए लकड़ी नहीं देख सकता था। धन्यवाद

— एंडी एलीसन

इसके लिए धन्यवाद! मैं पूरे दिन खोज कर रहा था कि इस मामूली त्रुटि को नोटिस न करें :)

— chia yongkang

Answer 8

यदि .envफ़ाइल काम करती है .env.developmentया .env.productionनहीं, तो .envउन दोनों के साथ एक खाली फ़ाइल बनाएँ । मुझे पता नहीं क्यों लेकिन यह मेरे लिए काम करता है।

Answer 9

और याद रखें कि en-file में API कुंजी के बाद अर्ध-बृहदान्त्र नहीं है।

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

होना चाहिए

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

वह मेरी त्रुटि थी

Answer 10

नवीनतम प्रतिक्रिया-लिपियों (3.2.0) के रूप में यह कहना आसान है

PORT=4000
BROWSER=none

अपने .env या .env.development फ़ाइल (..etc) में जो रूट फ़ोल्डर में होना चाहिए।

यह तब REACT_APP उपसर्ग के साथ काम नहीं करेगा (डॉक्स पुराने हैं जो मुझे लगता है) और इसे किसी भी अतिरिक्त npm संकुल की आवश्यकता नहीं है (प्रतिक्रिया-स्क्रिप्ट में पहले से ही dotenv 6.2.0 शामिल हैं)

Comments

यह गलत है। github.com/facebook/create-react-app/blob/…

— Gudgip