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.

I usually add a .env.sample to the repo not the actual files with values. Also, you can probably set that environment variable in your CI/CD to better align with the 12 Factor approach. — Jason Leach
– Jason Leach, Commented Feb 4, 2019 at 18:33
Nice solution. You can use console.log(process.env.NODE_ENV) and console.log(process.env.REACT_APP_API_URI) to watch from any place after adding .env.production and .env.development files to root dir. — laimison
– laimison, Commented Jul 7, 2019 at 23:22
Important note: With create-react-app, you need to prefix REACT_APP_ to the variable name to be able to access it. — yesnik
– yesnik, Commented Apr 12, 2021 at 13:03
Don't forget to restart your app for the var to take effect, Ctrl-C to Terminate batch job (Y/N)? y, then npm start. I couldn't figure out for the life of me what I was missing — Inphinite Phractals
– Inphinite Phractals, Commented Nov 3, 2022 at 0:15

Giang Le · Accepted Answer · 2022-07-03 14:56:22Z

26

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(),
});

edited Jul 3, 2022 at 14:56

answered Jun 25, 2018 at 13:26

Giang Le

7,1294 gold badges29 silver badges28 bronze badges

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

5 Comments

Giang Le Over a year ago

you can see the example here github.com/gianglevan94/auto-shop/blob/master/resources/assets/…

insitu Over a year ago

but process.env.NODE_ENV assumes there is a node server runninng, isn't it? Which means this works at runtime, not at build time.

insitu Over a year ago

So you mean webpack introspects the JS code and statically replaces those variables with their value?

Giang Le Over a year ago

Yes. I bet you use create-react-app. When you deploy it as production, you will build the bundle, and NODE_ENV will set to 'production' and your api url will be stackoverflow.com instead of google.com

uberrebu Over a year ago

@GiangLe you did not mention which file we need to have the content of your answer

Jason · Accepted Answer · 2021-05-31 05:40:29Z

4

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"
  }
}

edited May 31, 2021 at 5:40

Jason

11.2k7 gold badges40 silver badges38 bronze badges

answered Jun 25, 2018 at 13:51

Rizal Ibnu

4434 silver badges10 bronze badges

2 Comments

insitu Over a year ago

But the .env file is read at runtime? When is the process.env.API_URL variable defined? I want this to happen at build/deploy time so that when the app executes in the browser it is statically configured with the right URL.

Rizal Ibnu Over a year ago

No, it will transform process.env.API_URL when you run a command that include it. For example if you run command yarn build:staging to build react, it will transform fetch(process.env.API_URL) to fetch('https://staging.url.com/api/') and then you can deploy build files to the staging server.

Midhun G S · Accepted Answer · 2018-06-25 13:36:31Z

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;

answered Jun 25, 2018 at 13:36

Midhun G S

9959 silver badges23 bronze badges

2 Comments

Piyush Over a year ago

But f we do this, then URL1 will be publicly available. Anyone can see it.

Midhun G S Over a year ago

Yes, Its not a good practice. There must be a back end server which hosts reactjs app. So that you can hit the server using route name, not using ip and port, IP, port will be same as reactjs apps. Then you can get the data from your desired applications from the server side.

João Cunha · Accepted Answer · 2018-06-25 13:31:31Z

2

You can do that making use of environment variables on the build step for example.

You can use something like .env that allows you to define environment variables and load them on your webpack file for example (assuming you use webpack). But you can really use it with any bundler.

.env file:

API=http://localhost:3000

On your webpack you could make use of the DefinePlugin

example taken from docs: add your API env

    ...
    require('dotenv').config()
    ...

    new webpack.DefinePlugin({
      API_ENDPOINT: process.env.API,
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('5fa3b9'),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: '1+1',
      'typeof window': JSON.stringify('object')
    });

Anyway, this is just one way. I like this way because it makes my project ready for defining API keys and other useful stuff for different environments.

NOTE: You can even define different .env files for local, staging and production and load the respective one in the webpack depending on the build type.

answered Jun 25, 2018 at 13:31

João Cunha

10.3k4 gold badges42 silver badges64 bronze badges

4 Comments

insitu Over a year ago

This makes sense but I have used create-react-app to scaffold my application and it does not seem to use webpack. Or is it using it under the hood?

João Cunha Over a year ago

@insitu yes it does use webpack under the hood. it uses react-scripts.

João Cunha Over a year ago

@insitu look at this post: medium.com/@tacomanator/… it is basically my approach and uses CRA

insitu Over a year ago

This is confusing: Are process.env.XXX available at build-time?

Suman Deol · Accepted Answer · 2023-05-22 07:06:50Z

0

After creating the .env file. Please restart the app. Like in reactJs use npm start command to restart it. It will work fine.

answered May 22, 2023 at 7:06

Suman Deol

4024 silver badges11 bronze badges

Comments

Israr khan · Accepted Answer · 2023-06-13 12:11:22Z

0

in the app.js file you can create function of this type sessionStorage.setItem("apipathurl","http://localhost:3000/api")

sessionStorage.setItem("apipathurl","https://example.onrender.com/api");

and call this function each file of your app as in login.js

const baseURL = sessionStorage.getItem("apipathurl");

call this baseURL into your API endpoint

const response = await fetch(${baseURL}/user/login, { method: 'POST', body: JSON.stringify({ email, password }), headers: { 'Content-Type': 'application/json', }, });

this is the the way to create live url path for your app

answered Jun 13, 2023 at 12:11

Israr khan

92 bronze badges

1 Comment

Israr khan Over a year ago

remarks // this is for reactjs and node js

Manoj Thapliyal · Accepted Answer · 2024-04-16 08:07:30Z

0

create a config file

const baseURL =
  process.env.NODE_ENV === "production"
    ? "https://webserver.com/api"
    : "http://localhost:3000/api";


    const Config = async () => {
        return (
          <>
          </>
        );
      };
export default Config;
export { baseURL };

import this file in the code

  import { baseURL } from './config';

in api call

  const res = await fetch(`${baseURL}/PATH`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });

answered Apr 16, 2024 at 8:07

Manoj Thapliyal

5777 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to inject API server URL when deploying react frontend?

7 Answers 7

5 Comments

2 Comments

2 Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

2 Comments

2 Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related