7

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?

Improve this question

4 Answers 4

Reset to default
8

If you set all the environment variables inside the app.config.js, you can replace them after the build in the main.????????.chunk.js file.

A sample app.config.js could look like:

export default {
  SOME_URL: "https://${ENV_VAR_1}"
  SOME_CONFIGURATION: "${ENV_VAR_2}",
}

Leave the app.config.js file as is, without replacing the environment variables with their actual values. Then, create the optimized production build:

npm ci # if not already installed
npm run build

If the default webpack configurations are used, the contents of app.config.js will be bundled in build/static/js/main.????????.chunk.js. The values of the environment variables can be be envsubst, with a bash script like this:

main_chunk=$(ls build/static/js/main.*.js)
envsubst <$main_chunk >./main_chunk_temp
cp ./main_chunk_temp $main_chunk
rm ./main_chunk_temp

Note: In the above example, envsubst reads the actual variables set in the environment at runtime and literally replaces ${ENV_VAR_1} and ${ENV_VAR_2} with them. So, you can only run this once as the chunk is being over-written.

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

1 Comment

where do I setup the app.config.js file would that be in the root directory and how do I use it after build to change the env variables ?
5

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.

Improve this answer

3 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
@SebastianSebald is right about the bundle taking place at build time. But there is actually a way to replace ENV variables post-build, and this is what we are doing in our company: stackoverflow.com/a/61881757/5465000
0

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)

Improve this answer

2 Comments

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?
This solution would not work if the build is already bundled. The .env file and its REACT_APP variables are read during build not at serve time!
-1

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>
  );
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.