I am working on a small project including react frontend and Java backend with two environments.

I struggle on the idea how to work with multiple environemnts, I declare API url using axios:

export default axios.create({
  baseURL: `/api/v1`,
});

But this works only for one environment, how to change API url after the package is built? I don't think it is a good practise to create two builds (one for dev and one for prod), because it could create mess inside artifacts manager (we use Azure Artifacs Feed).

How do you solve this problem?

I am working on a small project including react frontend and Java backend with two environments.

I struggle on the idea how to work with multiple environemnts, I declare API url using axios:

export default axios.create({
  baseURL: `http://api.dev.project.local/api/v1`,
});

But this works only for one environment, how to change API url after the package is built? I don't think it is a good practise to create two builds (one for dev and one for prod), because it could create mess inside artifacts manager (we use Azure Artifacs Feed).

How do you solve this problem?

• javascript
• reactjs

• 1 try using webpack – Joseph D. Commented Nov 12, 2020 at 15:58
• @JosephD. but using webpack will produce the same result, right? multiple packages, each for different environment? – FN_ Commented Nov 12, 2020 at 16:22
• 1 @FilipNiko, right. different webpack config for each environment: dev, prod and common. Using webpack-merge to generate different output bundles. Not familiar with Azure but maybe the bundle hashes can be handy. – Joseph D. Commented Nov 12, 2020 at 16:50
• @JosephD. Thanks for the output, but how to handle versions in registry (artifact feed), if one can have different API configuration than other so I am unable to deploy every pacakge to every environment... – mikrotik_ Commented Nov 13, 2020 at 0:11

2 Answers 2

In case you are with create-react-app, and only need local and production environment go with Adding Custom Environment Variables build-in feature. Otherwise, a useful alternative is env-cmd.

Install env-cmd, as a development dependency:

npm i -D env-cmd

Add .env file (at project root, same for all environments):

REACT_APP_API_ENDPOINT = https://default.example.com

Add .env.qa file:

REACT_APP_API_ENDPOINT = https://qa.example.com

Add .env.staging file:

REACT_APP_API_ENDPOINT = https://stage.example.com

Add .env.production file:

REACT_APP_API_ENDPOINT = https://production.example.com

Update package.json

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:qa": "env-cmd -f .env.qa npm run-script build",
    "build:staging": "env-cmd -f .env.staging npm run-script build",
  }
}

Note that default start and build create-react-app commands are using .env and .env.production respectively, and have no need of env-cmd.

Ready to use in our code

const baseUrl = process.env.REACT_APP_API_BASE_URL;

And, we also can use env-cmd for start command at development environment.

i think you should use environment variables and create an .env file and its seprate from your project.

for more information you can react docs about environment variables

or you can use npm scripts variables

I hope it was useful.