Как сохранить файл конфигурации и прочитать его с помощью React

Я новичок в response.js. Я реализовал один компонент, в котором я извлекаю данные с сервера и использую его,

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 в файле конфигурации, поэтому, когда я развернул это на сервере Testing или на Production, мне нужно просто изменить url в файле конфигурации, а не в js файле, но я не знаю, как использовать файл конфигурации в реакции. js

Может ли кто-нибудь указать мне, как я могу это достичь?

Ответ 1

С помощью webpack вы можете поместить специфичный для env webpack.config.js в поле externals в webpack.config.js

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

Не уверен, подходит ли он для вашего варианта использования, но он работал довольно хорошо для нас.

Ответ 2

Если вы использовали Create React App, вы можете установить переменную среды, используя файл .env. Документация здесь:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env

Сделайте что-то вроде этого в файле .env в корне проекта.

REACT_APP_SECRET_CODE=abcdef

Вы можете получить к нему доступ со своего компонента с помощью

process.env.REACT_APP_SECRET_CODE

Ответ 3

Вы можете использовать пакет dotenv независимо от того, какую настройку вы используете. Он позволяет вам создать .env в корне вашего проекта и указать ваши ключи таким образом

SERVER_PORT=8000

В своем файле ввода приложений вы просто вызываете dotenv(); перед доступом к таким клавишам

process.env.SERVER_PORT

Ответ 4

Если у вас есть файл .properties или .ini

На самом деле в случае, если у вас есть файл, который имеет пары ключ-значение, как это:

someKey=someValue
someOtherKey=someOtherValue

Вы можете импортировать это в веб-пакет с помощью модуля npm, называемого properties-reader

Я нашел это действительно полезным, так как я интегрирую реакцию с фреймворком Java Spring, где уже есть файл application.properties. Это помогает мне хранить все конфиги вместе в одном месте.

Импортируйте это из раздела зависимостей в package.json

"properties-reader": "0.0.16"

Импортируйте этот модуль в webpack.config.js сверху

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

Ответ 5

Я нашел это довольно трудным для проработки, и решение очень простое. Я новичок в ReactJS и просто учусь строить интерфейс ReactJS на бэкэнд Django. Я хочу использовать локальный сервер Django для разработки (http://localhost: 8000) и веб-сайт при развертывании.

Я думаю, что у меня, вероятно, есть недавняя версия 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.