Comment stocker le fichier de configuration et le lire à l'aide de React


101

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?


1
Utilisez-vous webpack ou un outil pour compiler le code js?
Petr Bela

Il serait courant d'envoyer cette valeur, définie et lue à partir d'une variable d'environnement vers la page Web en tant que valeur globale disponible dans votre JavaScript. Ensuite, utilisez-le pour récupérer des données.
WiredPrairie

1
@PetrBela: oui j'utilise webpack pour construire bundle.js mais je prends un fichier de configuration comme web.config dans .net
Dhaval Patel

Réponses:


124

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.


2
De rien. BTW, nous avons depuis appris qu'il est préférable d'utiliser JSON pour éviter les erreurs de syntaxe. J'ai mis à jour le code en conséquence.
Petr Bela

2
Hmm, je n'ai pas réalisé que nécessite l'analyse du fichier JSON. Comme externalsattend un code à évaluer, vous devez stringify le JSON.
Petr Bela

21
cela ne fonctionne pas pour moi, j'obtiens cette erreur: [Erreur: Impossible de trouver le module 'Config'] lors de l'utilisation de require ('Config')
amgohan

4
Que faire si je veux que Webpack ne regroupe pas le fichier de configuration séparé dans output.bundle.js? S'il s'agit d'un ensemble distinct du bundle, puis-je toujours avoir besoin de ('Config')? Merci
Barny

3
Comment l'un d'entre vous a-t-il réussi à faire fonctionner cela? Je le fais exactement comme suggéré et j'obtiens 'Impossible de trouver le module' Config '', comme @amgohan.
ceebreenk

67

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

24
rappelez-vous simplement que votre nom de variable doit commencer parREACT_APP_
Tomasz Madeyski

J'ai une application ASP.NET Core créée avec le modèle React, et tout ce que j'ai fait a été d'ajouter un fichier vide dans le dossier `` ClientApp '' et de le mettre REACT_APP_MYSETTING=value, puis de le désigner comme process.env.REACT_APP_MYSETTINGdans mon code JSX, et cela a fonctionné. Merci!
Neo

.env ne fonctionne pas du tout pour moi dans le projet
create

1
Vous devrez redémarrer votre projet sur npm une fois que vous aurez ajouté .env à votre répertoire racine
foyss le

2

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

1
bien que je pense que vous devez spécifier vos clés en commençant parREACT_APP_
HenryM

1

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"

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

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 configuration

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

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


3
Votre étape 2 à propos de webpack.config.js, si l'on utilise create-react-app, il n'y a pas de configuration webpack (ou elle est cachée). Comment procéder dans ce cas?
joedotnot
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.