create react app cannot read environment variable after build

I have a react app , created with create-react-app then I build the app with command: npm run build

It's using serve to run the app after build, if we start the app with development code by running ENV=production npm run start it can read the process.env.ENV variable beacause I'm adding this plugins to webpack dev config

   new webpack.DefinePlugin({
      'process.env':{
        'ENV': JSON.stringify(process.env.ENV),
      }
    }),

I also add the script above to webpack prod config, but if I try this command after build ENV=prod serve -s build, it cannot read the environment variable

How to fix this?

The reason why you can not read the ENV var is because:

(1) In development mode webpack watches your files and bundles you app on the fly. It also will read (because of the DefinePlugin) your process.env.ENV and will add it as a global variable. So it is basically piping variables from process.env to your JS app.

(2) After you've build your app (with webpack) everything is already bundled up into one or more files. When you run serve you just start a HTTP server that serves the static build files. So there is no way to pipe the ENV to you app.

Basically what the DefinePlugin does is add a var to the bundle. E.g.

new webpack.DefinePlugin({
  'token': '12356234ga5q3aesd'
})

will add a line similar to this:

var token = '12356234ga5q3aesd';

since the JS files is static there is no way to change this variable after you've build/bundled it with webpack. Basically, when you do npm run build you're creating the compiled binary/.dll/.jar/... file and can no longer influence its contents via the plugin.

cannot read environment variable after build · Issue #2918 , i have a react app , i build the app with command: npm run build if we start the app with development code by running ENV=production npm run  Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files. The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, as described here. Alternatively you can rebuild the app on the server anytime you change them.

You can add a .env file to the root of your project and define your environment variables there. That will be your default (production) environment variables definition. But then you can have a local file called .env.local to override values from the default.

When defining your environment variables, make sure they start with REACT_APP_ so your environment variable definitions would look like this:

REACT_APP_SERVER_URL=https://my-awesome-app.herokuapp.com

Also, add this to .gitignore so you don't commit your local overrides:

.env*.local

Reference: Adding Development Environment Variables In .env (create-react-app)

Adding Custom Environment Variables, Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files. The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can't possibly read them at runtime. The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, as described here.

From create-react-app documentation:

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

You can read them from process.env inside your code:

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
} 

Create-react-app environments - Drew Goodwin, Update: create-react-app 1.0.0 added built-in support for configuration files targeting Imported values are placed in process.env , for example process.env. an easy way to share configuration amongst a team, but the approach doesn't scale the environment variable support in create-react-app to build configuration for  Create React App has support for custom environment variables baked into the build system. To set a custom environment variable, simply set it while starting the Create React App build process. To set a custom environment variable, simply set it while starting the Create React App build process.

Using environment variables in React - Sam Pakvis, How to declare different API url's for your local development build and production build When working with React, environment variables are variables that are (create-react-app uses it, so there) and will get the variables from our .env file  Configure Endpoints at Build Time. If you’d rather configure the API endpoints at build time, that works too. If you’re using Create React App, then you’ll have a global process.env available to get access to environment variables, including process.env.NODE_ENV, which will be set to “production” after a build.

How create-react-app fakes environment variables, After being thrown off with how to use environment variables in a web create-​react-app, and having countless problems with my build process, For example, a node.js app lets us access a server's environment Unfortunately, this common approach to environment based variables doesn't translate  Variables could be set outside of create-react-app (e.g. in a shell startup script), but for the sake of consistency, replicability, and making things less mysterious, we should instead opt for a

create react app cannot read environment variable after build, ENV), } }), I also add the script above to webpack prod config, but if I try this command after build ENV=prod serve -s build, it cannot read the environment  According to the Create React App, this is an intentional setting to protect the production environment from a mistake/accident deploying. You will be able to see scripts like below in package.json after creating your web app.

Comments
  • so the solution is, i have to add a static flag variabel with DefinePlugin that tells if it's production or dev, am i right? or there is any solution?
  • Yes, CRA is setup to add everthing under process.env to the define plugin. See github.com/facebookincubator/create-react-app/blob/… It will also automatically set prod/dev for you -> process.env.NODE_ENV
  • if i am running a react app that already has the webpack bundled( using create-react-app myapp). Do I need to do anything to include the .env? if I had multiple .env would I have to do anything?