javascript - tesis - trabajo de investigacion sobre sindrome de down

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

Question

Soy nuevo en react.js. He implementado 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 la 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

¿Alguien puede guiarme cómo puedo lograr esto?

Answer 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 de valores clave 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 reaccionar con Java Spring Framework donde ya hay un archivo application.properties. Esto me ayuda a mantener toda la configuración en un solo lugar.

1. Importe eso desde 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. Lee el archivo de propiedades

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

4. Importar esta constante como config

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/...'')

Answer 2

Con webpack puede poner la configuración específica del webpack.config.js 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 requerir ese archivo y asignarlo a Config :

externals: {
  ''Config'': JSON.stringify(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/...'')

No estoy seguro de si cubre su caso de uso, pero nos ha estado funcionando bastante bien.

Answer 3

Puede usar el paquete dotenv sin importar qué configuración use. Le permite crear un .env en la raíz de su proyecto y especificar sus claves de esa manera

SERVER_PORT=8000

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

process.env.SERVER_PORT

Answer 4

Si utilizó la aplicación Create React, puede establecer una variable de entorno utilizando 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_SECRET_CODE=abcdef

Puede acceder desde su componente con

process.env.REACT_APP_SECRET_CODE