CODEWITHSUNDEEP
ruby-on-railswebpackwebpack-dev-server
user3162553
user3162553

Reputation: 2869

Rails 5.1 - how to pass environment vars through webpack to frontend

I would like to change the domain of my api on the frontend that makes api calls. On development I would like a localhost:xxxx domain and a separate one for staging and production. Now, the default Rails webpack dev server exposes an empty .env key on the process object.

I've tried passing this configuration both manually in bin/webpack-dev-server like this:

Dir.chdir(APP_PATH) do
  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
    "--config #{DEV_SERVER_CONFIG} NODE_ENV=development #{ARGV.join(" ")}"
end

I've also tried to add on to the .env object directly in config/shared.js like this:

new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(Object.assign(env, { 'NODE_ENV': process.ev)))),

Both of those approaches don't modify the .env object.

Ideas?

Solution

Ditch using webpack as a way to pass environmental variables. Assign an environment variable on the window object using good old Rails environment.

Upvotes: 0

Views: 2198

Answers (1)

veronatii
veronatii

Reputation: 51

I was able to get this working by using a webpack environment plugin:

// config/webpack/development.js

const webpack = require('webpack')
const environment = require('./environment')
const config = environment.toWebpackConfig()

config.plugins = (config.plugins || []).concat([
  new webpack.EnvironmentPlugin([ 'SECRET_KEY' ])
])

module.exports = config

In your app, you should be able to access SECRET_KEY inside process.env:

console.log(process.env.SECRET_KEY)

Hope that helps!

Upvotes: 1

Related Questions