Soy nuevo en react.js He implementado un componente en el que estoy obteniendo 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 la URL en el archivo de configuración, así que cuando implementé esto en el servidor de prueba o en la 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

¿Alguien puede guiarme cómo puedo lograr esto?

Con el paquete web puede poner la configuración específica de env en el externalscampo enwebpack.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, eso también es posible, puede requerir 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 nos ha funcionado bastante bien.

Si usó la aplicación Create React, puede establecer 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=abcdef

Puede acceder a él desde su componente con

process.env.REACT_APP_NOT_SECRET_CODE

Puede utilizar el paquete dotenv sin importar la configuración que utilice. Le permite crear un .env en la raíz de su proyecto y especificar sus claves así

REACT_APP_SERVER_PORT=8000

En su archivo de entrada de aplicaciones, simplemente llame a dotenv (); antes de acceder a las claves así

process.env.REACT_APP_SERVER_PORT

En caso de que tenga un archivo .properties o un archivo .ini

En realidad, en caso de que tenga algún archivo que tenga pares clave-valor como este:

someKey=someValue
someOtherKey=someOtherValue

Puede importar eso en el paquete web mediante un módulo npm llamado properties-reader

Encontré esto realmente útil ya que estoy integrando react con el marco de Java Spring donde ya hay un archivo application.properties. Esto me ayuda a mantener todas las configuraciones juntas en un solo lugar.

1. Importe eso de la sección de dependencias en package.json

"properties-reader": "0.0.16"

2. Importe este módulo en webpack.config.js en la parte superior

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

3. Leer el archivo de propiedades

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

4. Importar esta constante como configuración

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

5. Úselo de la misma manera que se menciona en la respuesta aceptada

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