2015-06-01 3 views
30

Я новичок на react.js я реализовал один компонент, в котором я извлечения данных с сервера и использовать его как,Как сохранить файл конфигурации и читать его с помощью React

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

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

+0

Вы используете webpack или какой-либо инструмент для компиляции кода js? –

+0

Было бы распространено отправить это значение, установить и прочитать из переменной среды на веб-страницу в качестве глобального значения, доступного в вашем JavaScript. Затем используйте его для извлечения данных. – WiredPrairie

+0

@PetrBela: да, я использую webpack для сборки bundle.js, но я беру файл конфигурации, например web.config .net –

ответ

62

С WebPack вы можете поместить ENV специфические конфигурации в externals поле в webpack.config.js

externals: { 
    'Config': JSON.stringify(process.env.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/...') 

Не уверен, что он охватывает ваш прецедент, но он работает очень хорошо для нас.

+1

Добро пожаловать. Кстати, с тех пор мы узнали, что лучше использовать JSON, чтобы избежать синтаксических ошибок. Я обновил код соответствующим образом. –

+0

OMG, я рад, что вы «слушали». Сначала я пошел прямо на импорт JSON, и это не сработало. К счастью, ваше обновление позволило мне осознать важность выполнения JSON.stringify против моего импортированного JSON. – ctrlplusb

+0

@PetrBela Какой должен быть формат config.json. Как он дифференцирует производство и местные – Aniket

1

Если вы использовали приложение Create React, вы можете установить переменную окружения, используя файл .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 
+0

просто помните, что ваше имя переменной ** должно начинаться с 'REACT_APP_' –

0

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

SERVER_PORT=8000 

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

process.env.SERVER_PORT 
Смежные вопросы