Soy nuevo en react.js. Implementé un componente en el que obtengo los datos del servidor y los uso como,
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' //}); }); },Quiero almacenar Url en el archivo de configuración, así que cuando implementé esto en el servidor de prueba o en producción, solo tengo que cambiar la URL en el archivo de configuración, no en el archivo js, pero no sé cómo usar el archivo de configuración en react.js
¿Puede alguien por favor guiarme cómo puedo lograr esto?
Con webpack, puede colocar la configuración específica de env en el campo externals en webpack.config.js
externals: { 'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? { serverUrl: "https://myserver.com" } : { serverUrl: "http://localhost:8090" }) } Si desea almacenar las configuraciones en un archivo JSON separado, también es posible, puede solicitar ese archivo y asignarlo a Config :
externals: { 'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json')) }Luego, en sus módulos, puede usar la configuración:
var Config = require('Config') fetchData(Config.serverUrl + '/Enterprises/...')Para reaccionar:
import Config from 'Config'; axios.get(this.app_url, { 'headers': Config.headers }).then(...);No estoy seguro de si cubre su caso de uso, pero ha estado funcionando bastante bien para nosotros.
Si usó Create React App, puede configurar una variable de entorno usando un archivo .env. La documentación está aquí:
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
Básicamente, haga algo como esto en el archivo .env en la raíz del proyecto.
REACT_APP_NOT_SECRET_CODE=abcdefTenga en cuenta que el nombre de la variable debe comenzar con REACT_APP_
Puede acceder a él desde su componente con
process.env.REACT_APP_NOT_SECRET_CODEPuede usar el paquete dotenv sin importar la configuración que use. Le permite crear un .env en la raíz de su proyecto y especificar sus claves así
REACT_APP_SERVER_PORT=8000En el archivo de entrada de su aplicación, simplemente llame a dotenv(); antes de acceder a las teclas así
process.env.REACT_APP_SERVER_PORT