Pass or use process.env variable from node to reactjs

Question

How do I pass or use process.env variables from node to reactjs? For example I have this

const nodeEnv = process.env.NODE_ENV || 'development'

in my development and it works (I think because it's development and I DO have a fallback 'development'.

But when we push it to our staging server and set NODE_ENV variable, it only works the first time it loads but subsequently it doesn't. I think I do get this because at first it's served by node and it has access to server variables but afterwards it would be reactjs serving the pages (right?) and it wouldn't have access to server stuff. So how do I get to have variables to reactjs without hardcoding it (because we would eventually have a different set for production)?

EDIT. We also use webpack if that has a difference.

Answer 1

I found this: http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/

module.exports = {
 //...
 plugins:[
 new webpack.DefinePlugin({
 'process.env':{
 'NODE_ENV': JSON.stringify('production')
 }
 }),
 // [...]
 ]
 //...
}

In my opinion this is exactly what you are searching for.

• index: Yeah. I've seen that as well but was wondering because what it does is I think replace the string directly right in the build? Does that mean I'd have to do the build in the server instead of pushing it? Is that the only way?
• CapCa: Yes, you have to do this definitely on server side (with web pack). If you want to do this on client side you have to add the node_env variable manually in your source code. Maybe there is another way, but why are you searching for another way? Maybe it helps if you explain why you are searching for another solution.
• index: I mean, I need to run webpack -w on our staging server instead of my development computer. I just want to do everything on my development as possible, I am not master in server. But if it needs that, would have to do that then. Does this mean I have separate webpack config for each server I deploy this to?
• CapCa: Am I right that you are only using react on client side? Then you can simply do this by creating a webpack config for production mode and development. I would suggest you to take a deeper look in the react starter kits (with webpack) like github.com/webpack/react-starter. There are good examples how to handle this really nice.
• index: I'll check this out hope this works. Thanks so much!

Answer 2

Webpack also has defined EnvironmentPlugin for this. Just provide an array of environment variable names and they'll be accessible in the client.

plugins: [
 new webpack.EnvironmentPlugin([
 'NODE_ENV',
 'SOME_OTHER_KEY'
 ])
]

• Scott: This works great. Your saying to use it it as a REPLACEMENT for webpack.DefinePlugin({'process.env.NODE_ENV: ...}), Right?
• Cristi: Yep, it handles that for you. So the code sample above gives access to process.env.NODE_ENV and process.env.SOME_OTHER_KEY