wake-up-neo.com

So speichern Sie die Konfigurationsdatei und lesen sie mit React

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

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 Url in der Konfigurationsdatei speichern, also muss ich bei der Bereitstellung auf Testing Server oder in Production die URL in der Konfigurationsdatei nicht in der Datei js ändern, aber ich weiß nicht, wie die Konfigurationsdatei in react.js verwendet wird 

Kann mir bitte jemand helfen, wie ich das erreichen kann?

javascriptreactjsconfigurationwebpackflux
51
Dhaval Patel

Mit dem Webpack können Sie die env-spezifische Konfiguration in das Feld externals in webpack.config.js eingeben.

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

Wenn Sie die Konfigurationsdateien in einer separaten JSON-Datei speichern möchten, ist dies ebenfalls möglich. Sie können diese Datei anfordern und Config zuweisen:

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

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

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

Nicht sicher, ob es Ihren Anwendungsfall abdeckt, aber es hat für uns ziemlich gut funktioniert.

90
Petr Bela

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

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

Im Prinzip tun Sie dies in der .env-Datei im Projektstamm.

REACT_APP_SECRET_CODE=abcdef

Sie können von Ihrer Komponente aus mit darauf zugreifen 

process.env.REACT_APP_SECRET_CODE
23
aris

Sie können das dotenv-Paket unabhängig vom verwendeten Setup verwenden. Sie können in Ihrem Projektstamm eine .env erstellen und Ihre Schlüssel so angeben

SERVER_PORT=8000

In Ihrer Anwendungseintragsdatei rufen Sie einfach dotenv () auf. vor dem Zugriff auf die Schlüssel wie 

process.env.SERVER_PORT
1
Joshua Underwood

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

Eigentlich für den Fall, dass Sie eine Datei haben, die Schlüsselwertpaare wie diese hat:

someKey=someValue
someOtherKey=someOtherValue

Sie können das mit einem npm-Modul namens properties-reader in das Webpack importieren

Ich fand das sehr hilfreich, da ich die Integration mit Java Spring Framework, wo es bereits eine application.properties-Datei gibt. Dies hilft mir, die gesamte Konfiguration an einem Ort zusammenzuhalten.

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

"properties-reader": "0.0.16"

  1. Importieren Sie dieses Modul oben in die Datei 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 config

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

  1. Verwenden Sie es wie in der akzeptierten Antwort beschrieben

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

1
Fangming

Ich habe festgestellt, dass dies ziemlich schwierig ist, und die Lösung ist sehr einfach. Ich bin neu bei ReactJS und lerne gerade, indem ich ein ReactJS-Frontend auf ein Django-Backend baue. Ich möchte den lokalen Django-Server für die Entwicklung ( http: // localhost: 8000 ) und die Website beim Bereitstellen verwenden.

Ich glaube, ich habe wahrscheinlich eine aktuelle Version von React. Vielleicht muss ich deshalb so wenig tun, weil ich am Ende nur eine .env-Datei im Projektstammverzeichnis mit REACT_APP_serverURL = "https://example.com" und eine .env.development-Datei mit REACT_APP_serverURL = "http://localhost:8000" erstellen muss.

Ich kann den verwendeten Wert dann von process.env.REACT_APP_serverURL erhalten.

Wenn ich lokal laufen möchte, starte ich npm run start : env.development und wenn ich das eigentlich Live-Backend ausführen möchte, kann ich npm run start verwenden.

0
HenryM