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?
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.
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
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
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.
"properties-reader": "0.0.16"
const PropertiesReader = require('properties-reader');
const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;
externals: { 'Config': JSON.stringify(appProperties) }
var Config = require('Config') fetchData(Config.serverUrl + '/Enterprises/...')
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.