How to access environment variables inside React JS web app?

Question

I have an environment variable that I need to access inside my render method. Since its a custom ENV variable, I cannot use (process.env.NODE_ENV). I have read that React sanitises all process.env access.

How to access my custom environment variable (CLUSTER_ENV) inside React web app?

score 13 · Accepted Answer · edited Nov 09 '20 at 11:12

13

If you are using webpack, it is possible with Webpack Define plugin.

webpack.config.js:

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

and then simply you can use on your javascript file.

console.log(NODE_ENV);

edit: not alias, define plugin.

edited Nov 09 '20 at 11:12

Rajaprabhu Aravindasamy

66,513
17
101
130

answered Sep 19 '17 at 11:04

arikanmstf

462
7
16

I am using react meteor application, I need to use these env varible in react component, I am having babel rather than webpack – Mariya James Sep 20 '17 at 06:55

How to access environment variables inside React JS web app?

1 Answers1