Accessing NODE_ENV environment variable in React on Rails

Question

I've got a React on Rails application that hits an API. I want to configure the API endpoint to localhost for development and to my deployed app's URL for production.

client/package.json

 "scripts": {
    "build:production": "NODE_ENV=production webpack --config webpack.config.js",
 },

client/webpack.config.js

const devBuild = process.env.NODE_ENV !== 'production';

const config = {
  entry: [
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './app/bundles/Main/startup/registration',
  ],
  output: {
    filename: 'webpack-bundle.js',
    path: __dirname + '/../app/assets/webpack',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
  ]
}

I see that process.env.NODE_ENV is available in config/webpack.config.js (used here to add source map devtools to the module exports), but I'd like a way to see what the environment is in my React code somewhere in client/. What are my options if any?

I'm not sure about React on Rails, but in my React environment I can access the same variable - process.env.NODE_ENV. Have you tried that? — Josh F, Apr 17 '17 at 18:27
Yeah, `process` isn't defined in `/client` unfortunately. It is in *webpack.config* but some way to access it or pass it to the client directory would be ideal — Matthew Hinea, Apr 18 '17 at 04:46

score 3 · Answer 1 · answered Jun 09 '17 at 16:09

I just used process.env.NODE_ENV in a Redux action file successfully. I'm exporting NODE_ENV in webpack with plugin definition shown below in webpack.config.js:

plugins: [
    ...
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('ENV_VALUE')
        }
    })
]

Accessing NODE_ENV environment variable in React on Rails

1 Answers1