Гибридные проекты Rails и React в наши дни - довольно обычное дело. Настолько, что Yarn и Webpack были лучше интегрированы в Rails 5.1.

Если вы развертываете подобные приложения в Heroku, возможно, вам потребовался доступ к вашим переменным конфигурации Heroku из вашего связанного Javascript. Я знаю, что у меня есть!

С Heroku доступ к конфигурационным переменным на стороне сервера приложения Rails довольно прост. Все, что вам нужно сделать, это использовать ENV[variable] как обычно. Но для гибридных приложений, использующих Webpack, доступ к этим переменным на стороне клиента требует небольшой дополнительной настройки.

Вот как вы можете предоставить своему коду React такой же доступ к этим переменным конфигурации Heroku, что и для Rails:

Во-первых, вам нужно убедиться, что Heroku распознает, что вы используете Node так же, как Ruby. Если вы разместили свой проект в приложении Heroku, скорее всего, Heroku автоматически распознал ваше приложение как приложение Rails, но не как приложение Node. Вам, вероятно, придется добавить пакет сборки Node.js в дополнение к пакету сборки Ruby, который, возможно, уже существует. (Для получения дополнительной информации о том, как настроить пакеты сборки Heroku, перейдите сюда.) По моему опыту, лучше всего, если обратная сборка узла будет указана перед пакетом сборки Ruby для более согласованных сборок.

Затем вам нужно настроить Webpack для работы в разных средах. Мне было приятно иметь отдельные файлы конфигурации Webpack для каждой среды, которые используются в соответствии со сценариями, указанными в вашем файле package.json:

/* script commands have been paired down for clarity. 
Use any flags you need. */
"scripts": {
  "dev": "webpack --config webpack.config-dev.js",
  "test": "webpack --config webpack.config-test.js",
  "webpack:deploy": "webpack --config webpack.config-prod.js"
}

В соответствующих файлах конфигурации Webpack вы определите глобальные переменные для каждой среды с помощью подключаемого модуля Webpack’s Define. Например, в моем файле конфигурации разработки я установил несколько статических переменных:

/* in webpack.config-dev.js */
...,
plugins: [    
  new webpack.DefinePlugin({           
    NODE_ENV: JSON.stringify('development'),      
    API_HOST: JSON.stringify('http://localhost:3000')
  })
],
...

Обратите внимание, что согласно документации Webpack любые предоставленные значения должны включать кавычки, даже сами строки. Вы можете сделать это, заключив значение в альтернативные кавычки, например разработка, или используя JSON.stringify('development'). Я предпочитаю использовать последнее, потому что считаю, что он выглядит более преднамеренным.

Это сделает эти переменные доступными глобально для любого javascript, который вы связываете с Webpack. Теперь я могу свободно использовать свою константу API_URL без необходимости добавлять какие-либо беспорядочные условные выражения:

fetch(API_HOST + '/users', {    
  method: 'GET',    
  headers: headers  
})

Итак, для производства ... если вы используете пакет сборки Heroku Node.js, Heroku предоставит все переменные конфигурации, которые вы задали в объекте process.env. Например, если для переменной конфигурации Heroku NODE_ENV установлено значение true, я могу получить это значение через process.env.NODE_ENV.

Ваши файлы конфигурации Webpack будут иметь доступ к объекту process.env, но остальная часть вашего пакета не будет, если вы не укажете их через плагин Define, например:

/* in webpack.config-prod.js */
...,
plugins: [    
  new webpack.DefinePlugin({           
    NODE_ENV: JSON.stringify(process.env.NODE_ENV),      
    API_HOST: JSON.stringify(process.env.API_HOST)
  })
],
...

Не забудьте также преобразовать эти переменные в строки!

Вот и все. По общему признанию, я слишком долго откладывал создание динамических констант javascript, просто сбрасывая переменные по мере необходимости. Но когда пришло время иметь несколько сред Heroku для постановки, производства и т. Д., Это стало слишком сложной задачей, и это повысило вероятность некоторых действительно серьезных ошибок. Не будь таким, как я! С самого начала настройте свои пакеты javascript для работы с несколькими средами и динамическими конфигурациями.