web-dev-qa-db-ja.com

構成ファイルを保存し、Reactを使用して読み取る方法

私はreact.jsを初めて使いました。サーバーからデータを取得して使用するコンポーネントを1つ実装しました。

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

Urlを構成ファイルに保存したいので、これをテストサーバーまたは実稼働環境に展開したときに、jsファイルではなく構成ファイルのURLを変更するだけですが、react.jsで構成ファイルを使用する方法がわかりません

誰も私にこれを達成する方法を教えてもらえますか？

javascriptreactjsconfigurationwebpackflux
71
Dhaval Patel

Webpackを使用すると、webpack.config.jsのexternalsフィールドに環境固有の設定を配置できます

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

構成を別のJSONファイルに保存する場合も可能ですが、そのファイルを要求してConfigに割り当てることができます。

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

次に、モジュールで構成を使用できます。

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

それがあなたのユースケースをカバーするかどうかはわかりませんが、私たちにとってはかなりうまく機能しています。

102
Petr Bela

Create React Appを使用した場合、.envファイルを使用して環境変数を設定できます。ドキュメントは次のとおりです。

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

基本的に、プロジェクトルートの.envファイルでこのようなことを行います。

REACT_APP_SECRET_CODE=abcdef

あなたのコンポーネントからそれにアクセスすることができます

process.env.REACT_APP_SECRET_CODE
39
aris

使用するセットアップに関係なく、dotenvパッケージを使用できます。プロジェクトルートに.envを作成し、次のようにキーを指定できます。

SERVER_PORT=8000

アプリケーションエントリファイルで、dotenv（）を呼び出すだけです。そのようにキーにアクセスする前に

process.env.SERVER_PORT
1
Joshua Underwood

.propertiesファイルまたは.iniファイルがある場合

実際に、次のようなキーと値のペアを持つファイルがある場合：

someKey=someValue
someOtherKey=someOtherValue

properties-reader と呼ばれるnpmモジュールによってwebpackにインポートできます

既にapplication.propertiesファイルが存在するJava Springフレームワークとリアクションを統合しているので、これは本当に役立つことがわかりました。これにより、すべての構成を1か所にまとめることができます。

  1. Package.jsonの依存関係セクションからインポートします

"properties-reader": "0.0.16"

  1. このモジュールを上部のwebpack.config.jsにインポートします

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

  1. プロパティファイルを読む

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

  1. この定数を設定としてインポートします

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

  1. 受け入れられた答えで言及されているのと同じ方法でそれを使用してください

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

1
Fangming

これを解決するのは非常に難しく、解決策は非常に簡単であることがわかりました。私はReactJSを初めて使用し、ReactJSフロントエンドをDjangoバックエンド上に構築することで学習しています。ローカルDjangoサーバーを開発用に使用したい（ http：// localhost：80 ）およびデプロイ時にWebサイトを使用したい。

私はおそらくReactの最近のバージョンを持っていると思うので、プロジェクトルートに.envファイルを作成するだけでよいので、ほとんど何もする必要がないかもしれません。 REACT_APP_serverURL = "https://example.com"を含むディレクトリと.env.developmentを含むREACT_APP_serverURL = "http://localhost:8000"ファイル

process.env.REACT_APP_serverURLから使用されている値を取得できます

ローカルで実行する場合は、npm run start : env.developmentを実行します。実際にライブバックエンドから実行する場合は、npm run startを使用できます。

0
HenryM