Bagaimana cara menyimpan file Konfigurasi dan membacanya menggunakan React

104

Saya baru di react.js Saya telah menerapkan satu komponen di mana saya mengambil data dari server dan menggunakannya seperti,

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

Saya ingin menyimpan Url dalam file konfigurasi jadi ketika saya menerapkan ini di server Pengujian atau Produksi saya hanya perlu mengubah url pada file konfigurasi bukan di file js tetapi saya tidak tahu cara menggunakan file konfigurasi di react.js

Adakah yang bisa membimbing saya bagaimana saya bisa mencapai ini?

Dhaval Patel
sumber
1
Apakah Anda menggunakan webpack atau beberapa alat untuk mengkompilasi kode js?
Petr Bela
Akan menjadi hal yang umum untuk mengirim nilai itu, mengatur dan membaca dari variabel lingkungan ke halaman web sebagai nilai global yang tersedia dalam JavaScript Anda. Kemudian, gunakan untuk mengambil data.
WiredPrairie
1
@PetrBela: ya saya menggunakan webpack untuk membangun bundle.js tetapi saya menggunakan file konfigurasi seperti web.config di .net
Dhaval Patel

Jawaban:

126

Dengan webpack, Anda dapat memasukkan konfigurasi khusus env ke dalam externalsbidangwebpack.config.js

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

Jika Anda ingin menyimpan konfigurasi dalam file JSON terpisah, itu juga memungkinkan, Anda dapat meminta file itu dan menetapkan ke Config:

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

Kemudian di modul Anda, Anda dapat menggunakan konfigurasi:

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

Untuk React:

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

Tidak yakin apakah ini mencakup kasus penggunaan Anda, tetapi berfungsi dengan baik untuk kami.

Petr Bela
sumber
2
Sama-sama. BTW, kami telah belajar bahwa lebih baik menggunakan JSON untuk menghindari kesalahan sintaks. Saya telah memperbarui kode yang sesuai.
Petr Bela
2
Hmm saya belum menyadari membutuhkan parsing file JSON. Karena externalsmengharapkan kode dievaluasi, Anda perlu merangkai JSON.
Petr Bela
21
ini tidak berfungsi untuk saya, saya mendapatkan kesalahan ini: [Kesalahan: Tidak dapat menemukan modul 'Config'] saat menggunakan require ('Config')
amgohan
4
Bagaimana jika saya ingin webpack tidak memaketkan file konfigurasi terpisah ke output.bundle.js? Jika ini akan menjadi terpisah dari bundel, apakah saya masih memerlukan ('Config')? Terima kasih
Barny
3
Bagaimana salah satu dari Anda membuat ini bekerja? Saya melakukannya persis seperti yang disarankan dan saya mendapatkan 'Tidak dapat menemukan modul' Config '', sama dengan @amgohan.
ceebreenk
70

Jika Anda menggunakan Create React App, Anda dapat mengatur variabel lingkungan menggunakan file .env. Dokumentasinya ada di sini:

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

Pada dasarnya lakukan sesuatu seperti ini di file .env di root proyek.

REACT_APP_NOT_SECRET_CODE=abcdef

Anda dapat mengaksesnya dari komponen Anda dengan

process.env.REACT_APP_NOT_SECRET_CODE
aris
sumber
24
ingat saja nama variabel Anda harus dimulai denganREACT_APP_
Tomasz Madeyski
Saya memiliki aplikasi ASP.NET Core yang dibuat dengan template React, dan yang saya lakukan hanyalah menambahkan file kosong di bawah folder 'ClientApp' dan memasukkannya REACT_APP_MYSETTING=valueke dalamnya, kemudian merujuknya ke process.env.REACT_APP_MYSETTINGkode JSX saya, dan berhasil. Terima kasih!
Neo
.env sama sekali tidak berfungsi untuk saya dalam proyek create-react-app
user8620575
3
Anda harus memulai kembali proyek Anda pada npm setelah Anda menambahkan .env ke direktori root Anda
foyss
Ini sepertinya anti pola. Titik akhir API bukanlah rahasia yang harus ditentukan dalam variabel lingkungan. Itu adalah bagian dari definisi aplikasi.
Rob
2

Anda dapat menggunakan paket dotenv apa pun penyiapan yang Anda gunakan. Ini memungkinkan Anda untuk membuat .env di root proyek Anda dan menentukan kunci Anda seperti itu

REACT_APP_SERVER_PORT=8000

Dalam file entri aplikasi Anda panggil saja dotenv (); sebelum mengakses kunci seperti itu

process.env.REACT_APP_SERVER_PORT
Joshua Underwood
sumber
1
meskipun saya pikir Anda perlu menentukan kunci Anda dimulai denganREACT_APP_
HenryM
1

Jika Anda memiliki file .properties atau file .ini

Sebenarnya jika Anda memiliki file yang memiliki pasangan nilai kunci seperti ini:

someKey=someValue
someOtherKey=someOtherValue

Anda dapat mengimpornya ke webpack dengan modul npm bernama properties-reader

Saya menemukan ini sangat membantu karena saya mengintegrasikan react dengan framework Java Spring di mana sudah ada file application.properties. Ini membantu saya menyatukan semua konfigurasi di satu tempat.

  1. Impor itu dari bagian dependensi di package.json

"properties-reader": "0.0.16"

  1. Impor modul ini ke webpack.config.js di atas

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

  1. Baca file properti

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

  1. Impor konstanta ini sebagai config

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

  1. Gunakan dengan cara yang sama seperti yang disebutkan dalam jawaban yang diterima

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

Fangming
sumber
3
Langkah 2 Anda tentang webpack.config.js, jika seseorang menggunakan create-react-app maka tidak ada konfigurasi webpack (atau tersembunyi). Bagaimana cara melanjutkan dalam kasus itu?
joedotnot