So speichern Sie die Konfigurationsdatei und lesen sie mit React

100

Ich bin neu bei react.js. Ich habe eine Komponente implementiert, in der ich die Daten vom Server abrufe und wie folgt verwende:

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

Ich möchte die URL in der Konfigurationsdatei speichern. Wenn ich diese auf dem Testserver oder in der Produktion bereitstelle, muss ich nur die URL der Konfigurationsdatei ändern, nicht in der js-Datei, aber ich weiß nicht, wie die Konfigurationsdatei in react.js verwendet wird

Kann mich bitte jemand anleiten, wie ich das erreichen kann?

Dhaval Patel
quelle
1
Verwenden Sie ein Webpack oder ein Tool, um den js-Code zu kompilieren?
Petr Bela
Es ist üblich, diesen Wert als globalen Wert, der in Ihrem JavaScript verfügbar ist, zu senden, zu setzen und von einer Umgebungsvariablen an die Webseite zu lesen. Verwenden Sie es dann, um Daten abzurufen.
WiredPrairie
1
@PetrBela: Ja, ich benutze Webpack, um bundle.js zu erstellen, aber ich nehme über Konfigurationsdatei wie web.config in .net
Dhaval Patel

Antworten:

123

Mit Webpack können Sie env-spezifische Konfiguration in das externalsFeld in setzenwebpack.config.js

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

Wenn Sie die Konfigurationen in einer separaten JSON-Datei speichern möchten, können Sie diese Datei auch anfordern und zuweisen Config:

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

Dann können Sie in Ihren Modulen die Konfiguration verwenden:

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

Für die Reaktion:

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

Ich bin mir nicht sicher, ob es Ihren Anwendungsfall abdeckt, aber es hat bei uns ziemlich gut funktioniert.

Petr Bela
quelle
2
Bitte. Übrigens haben wir seitdem gelernt, dass es besser ist, JSON zu verwenden, um Syntaxfehler zu vermeiden. Ich habe den Code entsprechend aktualisiert.
Petr Bela
2
Hmm, ich habe nicht bemerkt, dass die JSON-Datei analysiert werden muss. weilexternals erwartet wird, dass ein Code ausgewertet wird, müssen Sie den JSON stringifizieren.
Petr Bela
21
Dies funktioniert bei mir nicht. Ich erhalte die folgende Fehlermeldung: [Fehler: Modul 'Config' kann nicht gefunden werden] bei Verwendung von require ('Config')
amgohan
4
Was ist, wenn das Webpack keine separate Konfigurationsdatei in output.bundle.js bündeln soll? Wenn es sich um ein vom Bundle getrenntes Paket handelt, kann ich es trotzdem benötigen ('Config')? Vielen Dank
Barny
3
Wie hat jemand von euch das zum Laufen gebracht? Ich mache es genau wie vorgeschlagen und erhalte das Modul 'Config' nicht gefunden, genau wie @amgohan.
Ceebreenk
67

Wenn Sie Create React App verwendet haben, können Sie eine Umgebungsvariable mithilfe einer ENV-Datei festlegen. Die Dokumentation finden Sie hier:

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

Grundsätzlich machen Sie so etwas in der .env-Datei im Projektstamm.

REACT_APP_NOT_SECRET_CODE=abcdef

Sie können von Ihrer Komponente aus mit darauf zugreifen

process.env.REACT_APP_NOT_SECRET_CODE
aris
quelle
24
Denken Sie daran, Ihr Variablenname muss beginnen mitREACT_APP_
Tomasz Madeyski
Ich habe eine ASP.NET Core-App, die mit der React-Vorlage erstellt wurde, und alles, was ich getan habe, war, eine leere Datei unter dem Ordner 'ClientApp' hinzuzufügen und darin abzulegen REACT_APP_MYSETTING=value, dann wie process.env.REACT_APP_MYSETTINGin meinem JSX-Code darauf zu verweisen , und es hat funktioniert. Vielen Dank!
Neo
.env funktioniert bei mir überhaupt nicht im Projekt create-react-app
user8620575
1
Sie müssen Ihr Projekt auf npm neu starten, sobald Sie .env zu Ihrem Stammverzeichnis hinzugefügt haben
foyss
2

Sie können das dotenv-Paket verwenden, unabhängig davon, welches Setup Sie verwenden. Sie können eine .env-Datei in Ihrem Projektstamm erstellen und Ihre Schlüssel wie folgt angeben

REACT_APP_SERVER_PORT=8000

Rufen Sie in Ihrer Anwendungseintragsdatei einfach dotenv () auf. bevor Sie wie folgt auf die Schlüssel zugreifen

process.env.REACT_APP_SERVER_PORT
Joshua Underwood
quelle
1
obwohl ich denke, Sie müssen Ihre Schlüssel angeben, beginnend mitREACT_APP_
HenryM
1

Falls Sie eine .properties-Datei oder eine .ini-Datei haben

Eigentlich für den Fall, dass Sie eine Datei mit Schlüsselwertpaaren wie diesen haben:

someKey=someValue
someOtherKey=someOtherValue

Sie können dies über ein npm-Modul namens in webpack importieren Properties-Reader

Ich fand das sehr hilfreich, da ich React in Java Spring Framework integriere, wo es bereits eine application.properties-Datei gibt. Dies hilft mir, alle Konfigurationen an einem Ort zusammenzuhalten.

  1. Importieren Sie das aus dem Abschnitt "Abhängigkeiten" in package.json

"properties-reader": "0.0.16"

  1. Importieren Sie dieses Modul oben in webpack.config.js

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

  1. Lesen Sie die Eigenschaftendatei

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

  1. Importieren Sie diese Konstante als Konfiguration

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

  1. Verwenden Sie es genauso wie in der akzeptierten Antwort angegeben

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

Fangming
quelle
3
Ihr Schritt 2 über webpack.config.js: Wenn Sie die App create-react-app verwenden, gibt es keine Webpack-Konfiguration (oder sie ist ausgeblendet). Wie gehe ich in diesem Fall vor?
Joedotnot