2015-06-01 6 views
30

Sono nuovo sul react.js ho implementato un componente in cui sto il recupero dei dati dal server e utilizzarlo come,Come conservare file di configurazione e leggerlo con Reagire

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 memorizzare Url nel file di configurazione quindi quando ho distribuito questo sul server di prova o sulla produzione devo solo cambiare l'URL sul file di configurazione non nel file js ma non so come usare il file di configurazione in react.js

Può chiunque per favore guidami come posso ottenere questo?

+0

Usi il webpack o qualche strumento per compilare il codice js? –

+0

È normale inviare tale valore, impostare e leggere da una variabile di ambiente alla pagina Web come valore globale disponibile all'interno del codice JavaScript. Quindi, utilizzalo per recuperare i dati. – WiredPrairie

+0

@PetrBela: sì sto usando webpack per costruire bundle.js ma sto prendendo sul file di configurazione come web.config in .net –

risposta

62

Con webpack si può mettere config-specific ENV nel campo externals in webpack.config.js

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

Se si desidera memorizzare il file di configurazione in un file JSON separato, che è possibile anche, è possibile richiedere che il file e assegnare a Config:

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

Poi nei moduli, è possibile utilizzare la configurazione:

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

Non sono sicuro che copra il tuo caso d'uso ma funziona abbastanza bene per noi.

+1

Prego. A proposito, abbiamo imparato che è meglio usare JSON per evitare errori di sintassi. Ho aggiornato il codice di conseguenza. –

+0

OMG, sono felice che tu stia "ascoltando". Sono andato direttamente a un'importazione JSON inizialmente e non ha funzionato. Fortunatamente il tuo aggiornamento mi ha dato l'importanza di eseguire JSON.stringify sul mio JSON importato. – ctrlplusb

+0

@PetrBela Quale dovrebbe essere il formato di config.json. Come si distingue tra produzione e locale – Aniket

1

Se è stata utilizzata l'applicazione Create React, è possibile impostare una variabile di ambiente utilizzando 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 fare qualcosa di simile nel file .env alla radice del progetto.

REACT_APP_SECRET_CODE=abcdef 

È possibile accedere dal proprio componente con

process.env.REACT_APP_SECRET_CODE 
+0

solo ricorda che il nome della variabile ** deve ** iniziare con 'REACT_APP_' –

0

È possibile utilizzare il pacchetto dotenv non importa quale configurazione che si utilizza. Esso consente di creare un .env nella root del progetto e specificare le chiavi in ​​questo modo

SERVER_PORT=8000 

Nella tua voce di applicazioni depositare la basta chiamare dotenv(); prima di accedere ai tasti in questo modo

process.env.SERVER_PORT