Create-react-app: REACT_APP_X env variable does not show up on front-end as process.env.REACT_APP_X

[ORESoftware]

I have this start script in package.json

"start-dev": "REACT_APP_SECRET_CODE=development && react-scripts start",

on the front-end, I execute this

console.log(' => Process env => ',process.env);

It appears that process.env on the front-end is an empty object, but according to the docs I should expect this:

{
REACT_APP_SECRET_CODE:'development'
}

what am I doing wrong?

[gaearon]

I created a new project and put

console.log(process.env);

in it.

I am seeing an object being printed:

Next, let's try a custom variable. The way you specify environment variables is incorrect.

The User Guide section I referred you to earlier also shows how to do it:

Linux, OS X (Bash)

REACT_APP_SECRET_CODE=abcdef npm start

Note it's REACT_APP_SECRET_CODE=abcdef npm start and not REACT_APP_SECRET_CODE=abcdef && npm start. There is no && there.

If I remove && from your example then the logged object looks like this:

As you can see the environment variable is now available. However if all you want is to tell if the app is running in production, process.env.NODE_ENV is enough. You don't need to pass anything else.

I hope this helps!

[ORESoftware]

well, both of these should work on Mac and *nix TMK:

REACT_APP_SECRET_CODE=abcdef npm start
REACT_APP_SECRET_CODE=abcdef && npm start

there are some subtle differences, not sure why it would make a difference here

I am not seeing anything for process.env but an empty object, on the front-end. We are talking front-end right?

I created a new project and put

console.log(process.env);

in it.

where is "it"?

[gaearon]

well, both of these should work on Mac and *nix TMK

The first one works for me, the second one does it. Unfortunately I don't know enough about Unix shells to tell why.

I am not seeing anything for process.env but an empty object, on the front-end. We are talking front-end right?

What do you mean by front-end? Create React App only "exists" on front end because it generates a static HTML+CSS+JS bundle. How you serve it is up to you but it doesn't have any backend built-in.

I'm afraid that to help you further I would need to see a project consistently reproducing the issue and exact instructions on how to reproduce it step by step.

[ORESoftware]

Np, I can figure it out, it may be that the project I am working on was modified so that the env variables no longer get sent to the front-end via the HTML. thanks for your help, at least I know absolutely what the expected behavior is. I will start from a new app and figure it out

[gaearon]

Maybe your project was ejected before this feature was added.
However I'm pretty sure we supported process.env.NODE_ENV from the very first release.

[ORESoftware]

@gaearon well the web server is in react-scripts, looks like, so there is a server right, but yeah in the react-create-app code, you're right it's all front-end code.

so I created a fresh project and the process.env stuff works, thanks for your help. (we never ejected the project I am working on.)

so it looks like the project (someone else wrote it until now) made enough changes to mess up the process.env thing. My question for you - do you happen to know how the process.env gets sent the front-end? looks like I have to look at the react-scripts project, which was what I was trying to get at before. But if it's the react-scripts project that is sending that data, I don't see why what I have is broken since none of use change react-scripts. If there is an interesting reason behind this will let you know, thanks

[gaearon]

My question for you - do you happen to know how the process.env gets sent the front-end?

It's unfortunately very hard to tell without seeing how exactly your project is organized.

[ORESoftware]

@gaearon by default :) not in my project. process.env gets populated by default. I an not takking about at the command line, I am talking about how the front-end process.env gets set! :) I believe this is in the react-scripts project.

[ORESoftware]

Well, I think I found it in the source

https://github.com/facebookincubator/create-react-app/blob/92d9cda964b920b494774694cc9cef2f216e3cb4/packages/react-scripts/config/env.js

[ORESoftware]

Ok well this is how it works internall TMK, you wrote some of this code so you probably remember

this module gets required

var REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  var processEnv = Object
    .keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce((env, key) => {
      env[key] = JSON.stringify(process.env[key]);
      return env;
    }, {
      // Useful for determining whether we’re running in production mode.
      // Most importantly, it switches React into the correct mode.
      'NODE_ENV': JSON.stringify(
        process.env.NODE_ENV || 'development'
      ),
      // Useful for resolving the correct path to static assets in `public`.
      // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
      // This should only be used as an escape hatch. Normally you would put
      // images into the `src` and `import` them in code to get their paths.
      'PUBLIC_URL': JSON.stringify(publicUrl)
    });
  return {'process.env': processEnv};
}

module.exports = getClientEnvironment;

and then gets loaded into a webpack configuration, like so:

const env = require('./the/above/file');

////

  plugins: [
    // Makes some environment variables available to the JS code, for example:
    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
    new webpack.DefinePlugin(env),
  ],

so what I believe happens is that webpack is responsible for attaching this value to window. And that that means is that I have no idea why my setup would then not work :) have to do more detective work

[gaearon]

what I believe happens is that webpack is responsible for attaching this value to window

That's not correct, Webpack replaces it at build time. So it actually becomes embedded in your code rather than really attached to the window.

[ORESoftware]

hmmm, but process is a global, which means it must be attached to window, not?

[ORESoftware]

or maybe there is just a giant wrapper around my front-end code that I have not seen yet :) I am new to webpack

[gaearon]

hmmm, but process is a global, which means it must be attached to window, not?

No, it is replaced with a string right at the build time.

[ORESoftware]

ok, I will read more about webpack thanks