Cómo almacenar el archivo de configuración y leerlo usando React

101

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?

Dhaval Patel
fuente
1
¿Usas webpack o alguna herramienta para compilar el código js?
Petr Bela
Sería común enviar ese valor, establecer y leer desde una variable de entorno a la página web como un valor global disponible dentro de su JavaScript. Luego, utilícelo para recuperar datos.
WiredPrairie
1
@PetrBela: sí, estoy usando webpack para compilar bundle.js pero estoy tomando un archivo de configuración como web.config en .net
Dhaval Patel

Respuestas:

123

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.

Petr Bela
fuente
2
De nada. Por cierto, desde entonces hemos aprendido que es mejor usar JSON para evitar errores de sintaxis. Actualicé el código en consecuencia.
Petr Bela
2
Hmm, no me he dado cuenta de que requiere analizar el archivo JSON. Debido a que externalsespera que se evalúe un código, debe especificar el JSON.
Petr Bela
21
esto no funciona para mí, aparece este error: [Error: No se puede encontrar el módulo 'Config'] cuando uso require ('Config')
amgohan
4
¿Qué pasa si quiero que el paquete web no agrupe un archivo de configuración separado en output.bundle.js? Si fuera un paquete separado, ¿todavía puedo requerir ('Config')? Gracias
Barny
3
¿Cómo consiguieron que esto funcionara? Lo hago exactamente como se sugiere y obtengo 'No se puede encontrar el módulo' Config '', igual que @amgohan.
ceebreenk
67

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
aris
fuente
24
solo recuerde que su nombre de variable debe comenzar conREACT_APP_
Tomasz Madeyski
Tengo una aplicación ASP.NET Core creada con la plantilla React, y todo lo que hice fue agregar un archivo vacío en la carpeta 'ClientApp' y colocarlo REACT_APP_MYSETTING=value, luego consultarlo como process.env.REACT_APP_MYSETTINGen mi código JSX, y funcionó. ¡Gracias!
Neo
.env no me funciona en absoluto en el proyecto create-react-app
user8620575
1
Tendrá que reiniciar su proyecto en npm una vez que haya agregado .env a su directorio raíz
foyss
2

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
Joshua Underwood
fuente
1
aunque creo que debe especificar sus claves comenzando conREACT_APP_
HenryM
1

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"

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

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

  1. Leer el archivo de propiedades

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

  1. Importar esta constante como configuración

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

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

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

Colmillos
fuente
3
Su paso 2 sobre webpack.config.js, si uno está usando create-react-app, entonces no hay configuración de paquete web (o está oculto). ¿Cómo proceder en ese caso?
joedotnot