Come memorizzare il file di configurazione e leggerlo usando React

Sono nuovo su react.js Ho implementato un componente in cui sto recuperando i dati dal server e li uso come,

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

Voglio archiviare Url nel file di configurazione, quindi quando lo ho distribuito su Testing Server o Production devo semplicemente cambiare l’url sul file di configurazione non nel file js ma non so come usare il file di configurazione in react.js

Qualcuno può guidarmi come posso ottenere questo?

Con webpack puoi inserire la configurazione specifica di env nel campo degli externals in webpack.config.js

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

Se vuoi memorizzare le configurazioni in un file JSON separato, anche questo è ansible, puoi richiedere quel file e assegnarlo a Config :

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

Quindi, nei tuoi moduli, puoi usare la configurazione:

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

Non sono sicuro che copra il tuo caso d’uso ma ha funzionato abbastanza bene per noi.

Se hai utilizzato Create React App, puoi impostare una variabile di ambiente usando un file .env. La documentazione è qui:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env

Fondamentalmente fai qualcosa di simile nel file .env nella root del progetto.

 REACT_APP_SECRET_CODE=abcdef 

Puoi accedervi dal tuo componente con

 process.env.REACT_APP_SECRET_CODE 

Puoi usare il pacchetto dotenv indipendentemente dalla configurazione che usi. Ti permette di creare un .env nella root del tuo progetto e specificare le tue chiavi in ​​questo modo

 SERVER_PORT=8000 

Nel file di immissione delle applicazioni basta chiamare dotenv (); prima di accedere alle chiavi in ​​questo modo

 process.env.SERVER_PORT