কীভাবে কনফিগারেশন ফাইল সংরক্ষণ করবেন এবং প্রতিক্রিয়া ব্যবহার করে এটি পড়ুন


110

আমি প্রতিক্রিয়াতে নতুন am

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'
        //});
    });
},

আমি ইউআরএলটি কনফিগারেশন ফাইলে সংরক্ষণ করতে চাই তাই যখন আমি এটি টেস্টিং সার্ভারে বা প্রোডাকশনটিতে স্থাপন করি তখন আমাকে কেবল জেএস ফাইলে কনফিগারেশন ফাইলের ইউআরএল পরিবর্তন করতে হবে তবে কীভাবে কনফিগারেশন ফাইলটি ব্যবহার করতে হবে তা আমি জানি না react.js এ।

কেউ দয়া করে আমাকে গাইড করতে পারেন আমি কীভাবে এটি অর্জন করতে পারি?


4
আপনি কি জেএস কোডটি সংকলন করতে ওয়েবপ্যাক বা কোনও সরঞ্জাম ব্যবহার করেন?
পেট্র বেলা

আপনার জাভাস্ক্রিপ্টের মধ্যে উপলব্ধ একটি বৈশ্বিক মান হিসাবে সেই মানটি, পরিবেশের পরিবর্তনশীল থেকে ওয়েব পৃষ্ঠায় পাঠানো এবং সেটটি পড়া সাধারণ বিষয়। তারপরে, ডেটা আনতে এটি ব্যবহার করুন।
ওয়্যার্ডপ্রাইরি

4
@ পেটারবেলা: হ্যাঁ আমি বান্ডেল.জেএস তৈরি করতে ওয়েবপ্যাক ব্যবহার করছি তবে আমি নেট থেকে ওয়েবকনফিগের মতো কনফিগারেশন ফাইলটি নিয়ে যাচ্ছি
ধাওয়াল প্যাটেল

উত্তর:


130

ওয়েবপ্যাকের সাহায্যে আপনি ক্ষেত্রটিতে env- নির্দিষ্ট কনফিগারেশন externalsরাখতে পারেনwebpack.config.js

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

আপনি যদি পৃথক জেএসওএন ফাইলে কনফিগারগুলি সঞ্চয় করতে চান তবে এটিও সম্ভব, আপনার সেই ফাইলটি প্রয়োজন এবং এগুলি বরাদ্দ করতে পারেন 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(...);

এটি আপনার ব্যবহারের কেসটি কভার করে কিনা নিশ্চিত না তবে এটি আমাদের জন্য বেশ ভালভাবে কাজ করছে।


4
আপনাকে স্বাগতম. বিটিডব্লিউ আমরা তখন থেকেই শিখেছি যে সিনট্যাক্স ত্রুটিগুলি এড়াতে JSON ব্যবহার করা ভাল। আমি সেই অনুযায়ী কোড আপডেট করেছি।
পেট্রা বেলা

4
হুম আমি বুঝতে পারিনি যে JSON ফাইলটি পার্স করা দরকার। যেহেতু externalsকোনও কোড মূল্যায়িত হওয়ার প্রত্যাশা করে, আপনার জেএসএনকে আরও শক্তিশালী করতে হবে।
পেট্রা বেলা

21
এটি আমার পক্ষে কাজ করে না, আমি এই ত্রুটিটি পেয়েছি: [ত্রুটি: প্রয়োজনের ('কনফিগারেশন') ব্যবহার করার সময় '
কনফিগার

4
যদি আমি চাই যে ওয়েবপ্যাকটি পৃথক কনফিগারেশন ফাইলকে আউটপুট.বান্ডেল.জেজে বান্ডিল না করে? এটি যদি বান্ডিল থেকে পৃথক হয়ে থাকে তবে আমার কি এখনও ('কনফিগারেশন') প্রয়োজন? ধন্যবাদ
বার্নি

4
আপনারা কেউ কীভাবে এটি কাজ করতে পেলেন? আমি ঠিক এটির মতো পরামর্শ দিয়েছি এবং @ এমগোহানের মতো 'মডিউল' কনফিগার 'খুঁজে পাচ্ছি না।
ceebreenk

77

আপনি যদি প্রতিক্রিয়া তৈরি করুন অ্যাপ ব্যবহার করেন তবে আপনি .env ফাইলটি ব্যবহার করে পরিবেশের পরিবর্তনশীল সেট করতে পারেন। ডকুমেন্টেশন এখানে:

https://facebook.github.io/create-react-app/docs/adding-custom-enomotive- পরিবর্তনশীল

মূলত প্রকল্প রুটে .env ফাইলে এটির মতো কিছু করুন।

REACT_APP_NOT_SECRET_CODE=abcdef

আপনি এটির সাথে আপনার উপাদান থেকে এটি অ্যাক্সেস করতে পারেন

process.env.REACT_APP_NOT_SECRET_CODE

26
শুধু মনে রাখবেন আপনার পরিবর্তনশীল নামটি অবশ্যই শুরু করতে হবেREACT_APP_
টমাসজ ম্যাডেস্কি

আমার প্রতিক্রিয়ার টেম্পলেট দিয়ে একটি এএসপি.নেট কোর অ্যাপ তৈরি হয়েছে এবং আমি যা করেছি তা হ'ল 'ক্লায়েন্ট অ্যাপ' ফোল্ডারে একটি খালি ফাইল যুক্ত করে এতে রেখে দেওয়া REACT_APP_MYSETTING=valueহয়েছিল, তারপরে এটিকে process.env.REACT_APP_MYSETTINGআমার জেএসএক্স কোড হিসাবে উল্লেখ করুন এবং এটি কার্যকর হয়েছিল। ধন্যবাদ!
নিও

.env আমার সাথে তৈরি-প্রতিক্রিয়া অ্যাপ্লিকেশন প্রকল্পে মোটেও কাজ করে না
ব্যবহারকারীর 8620575

4
আপনি একবার আপনার মূল ডিরেক্টরিতে .env যোগ করার পরে এনপিএম আপনার প্রকল্পটি পুনরায় চালু করতে হবে
foyss

এটি একটি অ্যান্টি-প্যাটার্নের মতো বলে মনে হচ্ছে। এপিআই এন্ডপয়েন্টস হ'ল সিক্রেটস নয় যা পরিবেশ পরিবর্তনশীলে সংজ্ঞায়িত করা উচিত। তারা অ্যাপটির সংজ্ঞাটির অংশ।
রব

2

আপনি ডটেনভ প্যাকেজটি কোনও সেটআপ ব্যবহার না করেই ব্যবহার করতে পারেন। এটি আপনাকে আপনার প্রকল্পের মূলটিতে একটি .env তৈরি করতে এবং আপনার কীগুলি নির্দিষ্ট করার জন্য অনুমতি দেয়

REACT_APP_SERVER_PORT=8000

আপনার অ্যাপ্লিকেশন এন্ট্রি ফাইলটিতে আপনার ডাস্টেনভ () কল করুন; এমন কীগুলি অ্যাক্সেস করার আগে

process.env.REACT_APP_SERVER_PORT

4
যদিও আমি মনে করি আপনাকে আপনার কীগুলি দিয়ে শুরু করতে হবেREACT_APP_
হেনরিএম

1

আপনার কাছে .properties ফাইল বা .ini ফাইল রয়েছে

প্রকৃতপক্ষে যদি আপনার কাছে এমন কোনও ফাইল থাকে যাতে এর মতো মূল মান জোড়া থাকে:

someKey=someValue
someOtherKey=someOtherValue

আপনি এনপিএম মডিউল দ্বারা প্রোপার্টি-রিডার নামে ওয়েবপ্যাকটিতে এটি আমদানি করতে পারেন

আমি জাভা স্প্রিং ফ্রেমওয়ার্কের সাথে প্রতিক্রিয়া সংহত করার জন্য এটি ইতিমধ্যে সহায়ক বলে মনে করেছি যেখানে ইতিমধ্যে একটি অ্যাপ্লিকেশন রয়েছে rop এটি আমাকে সমস্ত কনফিগারেশনকে এক জায়গায় রাখতে সহায়তা করে।

  1. প্যাকেজ.জসনে নির্ভরতা বিভাগ থেকে এটি আমদানি করুন

"properties-reader": "0.0.16"

  1. উপরে এই মডিউলটি ওয়েবপ্যাক.কনফিগ.জেজে আমদানি করুন

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

  1. বৈশিষ্ট্য ফাইল পড়ুন

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

  1. কনফিগার হিসাবে এই ধ্রুবকটি আমদানি করুন

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

  1. এটি গ্রহণযোগ্য উত্তরে উল্লিখিতভাবে একইভাবে ব্যবহার করুন

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


4
ওয়েবপ্যাককনফিগ.জেএস সম্পর্কে আপনার পদক্ষেপ 2, যদি কেউ তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করে থাকে তবে কোনও ওয়েবপ্যাক কনফিগার নেই (বা এটি লুকিয়ে আছে)। এই ক্ষেত্রে কীভাবে এগিয়ে যাব?
joedotnot
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.