Je suis nouveau sur react.js J'ai implémenté un composant dans lequel je récupère les données du serveur et je l'utilise comme,

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'
        //});
    });
},

Je veux stocker l'URL dans le fichier de configuration, donc lorsque j'ai déployé ceci sur le serveur de test ou sur la production, je dois simplement changer l'URL du fichier de configuration pas dans le fichier js mais je ne sais pas comment utiliser le fichier de configuration dans react.js

Quelqu'un peut-il s'il vous plaît me guider comment puis-je y parvenir?

Avec webpack, vous pouvez mettre une configuration spécifique à l'environnement dans le externalschampwebpack.config.js

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

Si vous souhaitez stocker les configurations dans un fichier JSON séparé, c'est également possible, vous pouvez exiger ce fichier et l'assigner à Config:

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

Ensuite, dans vos modules, vous pouvez utiliser la config:

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

Pour React:

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

Je ne sais pas si cela couvre votre cas d'utilisation, mais cela fonctionne plutôt bien pour nous.

Si vous avez utilisé Create React App, vous pouvez définir une variable d'environnement à l'aide d'un fichier .env. La documentation est ici:

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

En gros, faites quelque chose comme ça dans le fichier .env à la racine du projet.

REACT_APP_NOT_SECRET_CODE=abcdef

Vous pouvez y accéder depuis votre composant avec

process.env.REACT_APP_NOT_SECRET_CODE

Vous pouvez utiliser le package dotenv quelle que soit la configuration que vous utilisez. Il vous permet de créer un .env dans la racine de votre projet et de spécifier vos clés comme ceci

REACT_APP_SERVER_PORT=8000

Dans le fichier d'entrée de votre application, il vous suffit d'appeler dotenv (); avant d'accéder aux touches comme ça

process.env.REACT_APP_SERVER_PORT

Si vous avez un fichier .properties ou un fichier .ini

En fait, si vous avez un fichier qui a des paires clé-valeur comme celle-ci:

someKey=someValue
someOtherKey=someOtherValue

Vous pouvez l'importer dans webpack par un module npm appelé properties-reader

J'ai trouvé cela très utile car j'intègre React avec le framework Java Spring où il existe déjà un fichier application.properties. Cela m'aide à garder toutes les configurations ensemble au même endroit.

1. Importez cela à partir de la section des dépendances dans package.json

"properties-reader": "0.0.16"

2. Importez ce module dans webpack.config.js en haut

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

3. Lire le fichier de propriétés

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

4. Importez cette constante en tant que configuration

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

5. Utilisez-le de la même manière que celle mentionnée dans la réponse acceptée

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