Comment stocker le fichier de Configuration et le lire en utilisant React

Je suis nouveau sur réagir.js j'ai implémenté un composant dans lequel je récupère les données du serveur et 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 quand je l'ai déployé sur le serveur de test ou en Production, je dois simplement changer l'url sur le 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 me guider comment puis-je y parvenir ?

44
demandé sur Petr Bela 2015-06-01 11:24:31

4 réponses

Avec webpack, vous pouvez placer la configuration spécifique à env dans le champ externals de webpack.config.js 

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

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

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

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

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

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

79
répondu Petr Bela 2018-05-22 20:24:22

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://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env

Fondamentalement faire quelque chose comme ça dans le .fichier env à la racine du projet.

REACT_APP_SECRET_CODE=abcdef

Vous pouvez y accéder depuis votre composant avec 

process.env.REACT_APP_SECRET_CODE
16
répondu aris 2017-11-09 23:48:12

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

SERVER_PORT=8000

Dans votre fichier d'entrée d'applications, appelez simplement dotenv (); avant d'accéder aux clés comme ceci 

process.env.SERVER_PORT
0
répondu Joshua Underwood 2017-11-09 23:52:21

Dans le cas où vous avez un .fichier de propriétés ou un .fichier ini

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

someKey=someValue
someOtherKey=someOtherValue

, Vous pouvez l'importer dans webpack par un mnp module appelé propriétés de lecteur d'

J'ai trouvé cela vraiment utile puisque j'intègre react avec Java Spring framework où il y a déjà une application.fichier de propriétés. Cela m'aide à garder toutes les config ensemble au même endroit.

  1. Importer depuis section dépendances dans le paquet.json

"properties-reader": "0.0.16"

  1. importez ce module dans webpack.config.js sur le dessus

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

  1. Lire le fichier de propriétés

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

  1. importez cette constante en tant que config

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

  1. utilisez-le de la même manière que mentionné dans la réponse acceptée

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

0
répondu Fangming 2018-10-02 01:45:49