Search code examples
reactjsherokuserverproductionvercel

React app + heroku server not working on production, but working fine in dev

I am working on React application which is querying from a server. I have deployed the server on heroku. When I am testing in dev, the application is behaving as expected. But when I am using it on vercel deployment, it is failing as heroku server is not responding properly.

Following is the server code of the query:

app.get(`/allPlans`, async (req, res) => {
    console.log("allPlans() query");
    ret = await Plans.find({});
    f = [];
    for (i = 0; i < ret.length; i++) {
      f.push(ret[i].name);
    }
    console.log(f);
    return res.status(200).send(f);
  });

Folowing is the code I am using to query from the client using axios:

const endPoint = "/allPlans";
let ret = await axios.get(endPoint);
console.log(ret.data);

In the dev environment, when I am deploying the application on localhost:3000, this is returning me a nice array.

["test","myPlan190","myPlan987"]

But in the actual production on vercel it is returning the following object(You can check this message in the console by going on the vercel deployment): enter image description here

All suggestions are welcome.

Github repo

Vercel deployment

Server status

Heroku server query which is failing from axios, but working elsewise

Solution

  • Well, I checked you repository and also checked the XHR requests on your Vercel deployment and as far as I can see it making only one, which is:

    Request URL: https://planner-pcrsehfg3-akcgjc007.vercel.app/allPlans

    It is not making an actual call to the server. I see that in Dashboard.js you are requiring axios from the package. I did not find any created instance of axios. So essentualy there is nothing to append in front of "/allPlans". Either create an axios instance with the right url "https://cryptic-bayou-91116.herokuapp.com" of just test it by putting the whole url "https://cryptic-bayou-91116.herokuapp.com/allPlans" inside the axios call in Dashboard.js.

    Following is the updated code for an axios query:

    const baseURL = "https://cryptic-bayou-91116.herokuapp.com"
...
const endPoint = baseURL + "/allPlans";
let ret = await axios.get(endPoint);
console.log(ret.data);