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.

Nenu · Accepted Answer · 2018-03-12 09:33:09Z

7

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.

edited Mar 12, 2018 at 9:33

Nenu

2,6572 gold badges20 silver badges24 bronze badges

answered Apr 21, 2016 at 6:09

CapCa

5561 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

index Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

I'll check this out hope this works. Thanks so much!

|

Peter Hill · Accepted Answer · 2016-09-28 13:29:17Z

7

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'
  ])
]

edited Sep 28, 2016 at 13:29

Peter Hill

74 bronze badges

answered Jul 25, 2016 at 22:42

Cristi

3,0291 gold badge17 silver badges9 bronze badges

2 Comments

Scott Over a year ago

This works great. Your saying to use it it as a REPLACEMENT for webpack.DefinePlugin({'process.env.NODE_ENV: ...}), Right?

Cristi Over a year ago

Yep, it handles that for you. So the code sample above gives access to process.env.NODE_ENV and process.env.SOME_OTHER_KEY

Collectives™ on Stack Overflow

Pass or use process.env variable from node to reactjs

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related