web-dev-qa-db-fra.com

Comment stocker le fichier de configuration et le lire avec React

Je suis nouveau sur react.js J'ai implémenté un composant dans lequel je récupère les données du serveur et les 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 souhaite stocker l'URL dans le fichier de configuration. Ainsi, lorsque je l'ai déployé sur un serveur de test ou en production, je dois simplement modifier 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 me guider s'il vous plaît comment puis-je atteindre cet objectif?

javascriptreactjsconfigurationwebpackflux
51
Dhaval Patel

Avec webpack, vous pouvez placer une configuration spécifique à env dans le champ externals dans webpack.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é, vous pouvez également demander ce fichier et l'attribuer à 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.

90
Petr Bela

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

Fondamentalement, faites quelque chose comme ceci 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
23
aris

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

SERVER_PORT=8000

Dans votre fichier d’entrée d’application, appelez simplement dotenv (); avant d'accéder aux touches comme ça 

process.env.SERVER_PORT
1
Joshua Underwood

J'ai trouvé cela assez difficile à résoudre et la solution très simple. Je suis nouveau dans ReactJS et je viens d’apprendre en construisant une interface ReactJS sur un serveur Django. Je souhaite utiliser le serveur Django local pour le développement ( http: // localhost: 8000 ) et le site Web, une fois déployé.

Je pense que j’ai probablement une version récente de React, ce qui explique peut-être pourquoi j’ai besoin de faire si peu, car j’ai dû créer un fichier .env dans le répertoire racine du projet avec REACT_APP_serverURL = "https://example.com" et un fichier .env.development avec REACT_APP_serverURL = "http://localhost:8000"

Je peux alors obtenir la valeur utilisée de process.env.REACT_APP_serverURL

Lorsque je veux exécuter localement, je lance npm run start : env.development et si je veux utiliser le backend réellement actif, je peux utiliser npm run start.

0
HenryM