Send axios (api) requests from react app deployed on heroku

Question

In development, when i was running the react server on localhost:3000. I used proxy in package.json to set the baseurl for my backend server, which was running on loacalhost:5000. So i just edited proxy in package.json to "localhost:5000". So all the api requests sent from axios will be directed to that url.

axios.get("/name").then(res=>({...}))

A request identical to the above would be redirected to:

localhost:5000/name

In production, when i deployed the app on online platforms like heroku and vercel. The api requests sent from react-app through axios, all failed. When deploying on heroku/vercel, I changed the proxy to the online backend url.

I want to know how to change the proxy when a react app is deployed online (preferably on heroku/vercel). So that my api requests won't fail.

Tech stack: react for frontend, axios to send requests and firebase for the backend. The backend is also deployed on heroku.

Any kind of support would be appreciated. Even if there's a better platform to deploy the app, I can switch to that as well.

Abhishek Singh · Accepted Answer · 2020-10-12 05:41:16Z

2

You should create a config object and pick base_url based on the env. On local, it will pick development url and on Heroku it will use production.

const configs = {
  development: {
    SERVER_URI: 'localhost:5000',
  },
  production: {
    SERVER_URI: 'HEROKU_URI',
  },
};

module.exports.config = configs[process.env.NODE_ENV];

Also replace your axios calls like this:

axios.get(`${config.SERVER_URI}/name`).then(res=>({...}))

answered Oct 12, 2020 at 5:41

Abhishek Singh

1415 bronze badges

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

3 Comments

Sanket Chauhan Over a year ago

How will the production and development be differentiated? Will that be done automatically or do i have to specify something?

Abhishek Singh Over a year ago

Based on your build command. It will set NODE_ENV and pick up configs automatically.

Filippos Over a year ago

What about api call like this: axios.get("URL_FROM_ANOTHER_DOMAIN/calendar'+'?listing_id='+fantastic_id+'&start_date=2021-01-01") How to pass this problem when deploying on vercel

Collectives™ on Stack Overflow

Send axios (api) requests from react app deployed on heroku

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related