How to make a production build of React app with a custom mode?

Question

Built an app using CRA with "react-scripts": "3.3.1" , however i have an issue with a build modes, for example in a Vue-CLI i could do this:

npm run build -- --mode staging
// any ENV name i want

But in CRA, there's:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

I've tried something like that:

yarn build --mode staging

But it uses .env.production variables. I have .env.staging for "STAGING" environment. How can i do that?

I'm using different API endpoints on a few production servers, that's why i need this mode thing.

Answer 1

Turns out, its already documented here: https://create-react-app.dev/docs/deployment#customizing-environment-variables-for-arbitrary-build-environments

We just have to yarn add env-cmd , then:

{
  "scripts": {
    "build:staging": "env-cmd -f .env.staging npm run build"
  }
}