How to inject API server URL when deploying react frontend?

Question

Disclaimer: I am a React noob so perhaps what I am trying to do is not the React Way

I am writing a React front-end that will be deployed to be served statically by some cloud provider, e.g. S3 or Google Storage or whatever. This front-end interacts with several API servers that live somewhere in the cloud, maybe in the same provider, maybe not. Furthermore, while developing the UI or part of it, those servers' addresses might be local or testing instances.

How do I inject the API server(s) URLs into my react application in a flexible so that I can deploy in dev, staging or prod using different addresses?

SOLUTION: I finally ended up using a combination of solutions proposed:

• use .env.production and .env.development files (exact names) to store the variable REACT_APP_API_URI = 'host'
• this is automatically picked-up by create-react-app's build scaffolding and available in UI code as process.env.REACT_APP_API_URI

Note this somewhat goes against principles from 12 Factor Apps, e.g. storing env variables in files in version control but it does the job ATM.

Answer 1

You can try this:

// http.js
const getBaseUrl = () => {
  let url;
  switch(process.env.NODE_ENV) {
    case 'production':
      url = 'https://stackoverflow.com';
      break;
    case 'development':
    default:
      url = 'https://google.com';
  }

  return url;
}

export default axios.create({
  baseURL: getBaseUrl(),
});

Answer 2

Using this package https://github.com/toddbluhm/env-cmd you could create an env file for your environment

for example create .env.staging and .env file with this code

// .env.staging file   
API_URL=https://staging.url.com/api/

// .env file
API_URL=https://url.com/api/

How to fetch with API_URL from env variable:

fetch(process.env.API_URL)

Then you can just add some extra scripts in your package.json:

{
  "scripts": {
    "build:staging": "env-cmd .env.staging yarn build",
    "build:prod": "env-cmd .env yarn build"
  }
}

Answer 3

You can use .env file if the API's are constant for development or production environment. after build you can't change these parameters.

If you want to change the URL after build, add a js file lets say config.js

Include the conf.js in index.html

Add URL in conf.js like

var URL1 = 'https://www.google.com'

You can access the parameter like :

export const {URL1} = window;