कॉन्फ़िगरेशन फ़ाइल को कैसे संग्रहीत करें और प्रतिक्रिया का उपयोग करके इसे पढ़ें

Question

मैं प्रतिक्रिया पर नया हूं। क्या मैंने एक घटक को लागू किया है जिसमें मैं सर्वर से डेटा प्राप्त कर रहा हूं और इसका उपयोग करता हूं, जैसे:

CallEnterprise:function(TenantId){


    fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) 
    {
        EnterprisePerspectiveActions.getEnterprise(enterprises);
    }).catch(function()
    {
        alert("There was some issue in API Call please contact Admin");
        //ComponentAppDispatcher.handleViewAction({
        //    actionType: MetaItemConstants.RECEIVE_ERROR,
        //    error: 'There was a problem getting the enterprises'
        //});
    });
},

मैं कॉन्फ़िगरेशन फ़ाइल में Url स्टोर करना चाहता हूं, इसलिए जब मैंने इसे टेस्टिंग सर्वर पर या प्रोडक्शन पर तैनात किया, तो मुझे बस config फाइल में url को js फाइल में नहीं बदलना होगा, लेकिन मुझे नहीं पता कि कैसे कॉन्फ़िगरेशन फाइल को प्रतिक्रिया में उपयोग किया जाए। js

क्या कोई मुझे मार्गदर्शन दे सकता है कि मैं इसे कैसे प्राप्त कर सकता हूं?

Comments

क्या आप js कोड को संकलित करने के लिए webpack या कुछ टूल का उपयोग करते हैं?

— पेट्र बेला

यह आपके जावास्क्रिप्ट के भीतर उपलब्ध वैश्विक मूल्य के रूप में एक पर्यावरण चर से वेब पेज पर उस मूल्य को भेजने, सेट करने और पढ़ने के लिए आम होगा। फिर, इसे डेटा लाने के लिए उपयोग करें।

— वायर्डप्रैरी

@PetrBela: हाँ, मैं बंडल बनाने के लिए वेबपैक का उपयोग कर रहा हूँ। लेकिन मैं विन्यास फाइल जैसे web.config in .net

— धवल पटेल

Answer 1

वेबपैक के साथ आप env-specific config को externalsक्षेत्र में डाल सकते हैंwebpack.config.js

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

यदि आप कॉन्फिगर्स को एक अलग JSON फाइल में स्टोर करना चाहते हैं, तो यह भी संभव है, आपको उस फाइल की आवश्यकता हो सकती है Config:

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

फिर अपने मॉड्यूल में, आप कॉन्फ़िगरेशन का उपयोग कर सकते हैं:

var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')

प्रतिक्रिया के लिए:

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

यकीन नहीं होता कि यह आपके उपयोग के मामले को कवर करता है लेकिन यह हमारे लिए बहुत अच्छा काम कर रहा है।

Comments

आपका स्वागत है। BTW के बाद से हमने सीखा है कि सिंटैक्स त्रुटियों से बचने के लिए JSON का उपयोग करना बेहतर है। मैंने तदनुसार कोड अपडेट किया है।

— पेट्र बेला

हम्म मुझे एहसास नहीं है कि JSON फ़ाइल को पार्स करने की आवश्यकता है। क्योंकि externalsएक कोड का मूल्यांकन किए जाने की उम्मीद है, आपको JSON को कड़ा करने की आवश्यकता है।

— पेट्रा बेला

यह मेरे लिए काम नहीं करता है, मुझे यह त्रुटि मिलती है: [आवश्यकता: मॉड्यूल का पता लगाएं 'विन्यास'] आवश्यकता का उपयोग करते समय ('विन्यास')

— amgohan

क्या होगा अगर मैं चाहता हूँ कि webpack न जाकर सेपरेट कॉन्फिग फाइल को output.bundle.js में बंडल करे? यदि यह बंडल से अलग होगा, तो क्या मुझे अभी भी ('कॉन्फ़िगर') की आवश्यकता हो सकती है? धन्यवाद

— Barny

आप में से किसी को यह काम करने के लिए कैसे मिला? मैं इसे ठीक उसी तरह से सुझाता हूं और मुझे @ 'आमगोहन' के समान 'कॉन्फिगरेशन मॉड्यूल' नहीं मिल रहा है।

— ceebreenk

Answer 2

यदि आपने Create React App का उपयोग किया है, तो आप .env फ़ाइल का उपयोग करके एक पर्यावरण चर सेट कर सकते हैं। प्रलेखन यहाँ है:

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

मूल रूप से प्रोजेक्ट रूट पर .env फ़ाइल में ऐसा कुछ होता है।

REACT_APP_NOT_SECRET_CODE=abcdef

आप इसे अपने घटक से एक्सेस कर सकते हैं

process.env.REACT_APP_NOT_SECRET_CODE

Comments

बस याद रखें कि आपके चर नाम के साथ शुरू होना चाहिएREACT_APP_

— टॉमस मैडेस्की

मेरे पास एक ASP.NET कोर ऐप है जो रिएक्ट टेम्पलेट के साथ बनाया गया है, और मैंने जो भी किया है उसे 'ClientApp' फ़ोल्डर के तहत एक खाली फ़ाइल जोड़कर उसमें डाल दिया REACT_APP_MYSETTING=valueगया था, फिर इसे process.env.REACT_APP_MYSETTINGमेरे JSX कोड के रूप में संदर्भित करें , और इसने काम किया। धन्यवाद!

— नियो

.env मुझे क्रिएट-रिएक्शन-ऐप प्रोजेक्ट में बिल्कुल भी काम नहीं करता है

— user8620575

एक बार आप अपने रूट निर्देशिका में .env जोड़ दिया है आप NPM पर अपनी परियोजना पुनः आरंभ करना होगा

— foyss

Answer 3

आप चाहे जो भी सेटअप का उपयोग करें, आप डॉटनव पैकेज का उपयोग कर सकते हैं। यह आपको अपने प्रोजेक्ट रूट में .env बनाने और अपनी कुंजियाँ निर्दिष्ट करने की अनुमति देता है

REACT_APP_SERVER_PORT=8000

आपके एप्लिकेशन एंट्री फ़ाइल में आपका जस्ट कॉल डॉटेनव (); इस तरह से चाबियों का उपयोग करने से पहले

process.env.REACT_APP_SERVER_PORT

Comments

हालाँकि मुझे लगता है कि आपको अपनी कुंजीREACT_APP_

— हेनरीएम

Answer 4

यदि आपके पास एक .properties फ़ाइल या एक .ini फ़ाइल है

वास्तव में यदि आपके पास कोई फ़ाइल है जिसमें इस तरह के महत्वपूर्ण मूल्य जोड़े हैं:

someKey=someValue
someOtherKey=someOtherValue

आप npm मॉड्यूल द्वारा गुण-रीडर नामक वेबपैक में आयात कर सकते हैं

मुझे यह वास्तव में उपयोगी लगा क्योंकि मैं जावा स्प्रिंग फ्रेमवर्क के साथ प्रतिक्रिया को एकीकृत कर रहा हूं जहां पहले से ही एक एप्लिकेशन है। यह मुझे सभी कॉन्फ़िगरेशन को एक साथ एक स्थान पर रखने में मदद करता है।

1. पैकेज में निर्भरता अनुभाग से आयात करें ।json

"properties-reader": "0.0.16"

2. इस मॉड्यूल को शीर्ष पर webpack.config.js में आयात करें

const PropertiesReader = require('properties-reader');

3. गुण फ़ाइल पढ़ें

const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;

4. इस स्थिरांक को विन्यास के रूप में आयात करें

externals: { 'Config': JSON.stringify(appProperties) }

5. स्वीकृत उत्तर में बताए अनुसार इसका उपयोग करें

var Config = require('Config') fetchData(Config.serverUrl + '/Enterprises/...')

Comments

Webpack.config.js के बारे में आपका चरण 2, यदि कोई create-reaction-app का उपयोग कर रहा है, तो कोई webpack config नहीं है (या यह छिपा हुआ है)। उस मामले में आगे कैसे बढ़ें?

— जोडोटन