How to make API request from react client to express server running on the Heroku platform

Question

Ive been trying to deploy a Twitch like application using react, redux, node media server and json server module to Heroku. However, I keep running into a issue when trying to connect my react client and express server via a api request, during production.

Im trying to make the actual request through my action creators and by using axios with a base url of http://localhost:4000, however that only works on my local machine.

 const response = await streams.get("/streams");

 dispatch({ type: FETCH_STREAMS, payload: response.data });
}; 

You can view my full repo at https://github.com/XorinNebulas/Streamy

You can also view my current deployed version of the site on Heroku at https://streamy-app.herokuapp.com/

here is my api/server.js file. My express server will be watching on a random port equal to process.env.PORT, so I have no way of knowing how to make a network request via my action creators to that random port during production.

const path = require("path");
const cors = require("cors");
const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("db.json");
const middlewares = jsonServer.defaults({
  static: "../client/build"
});
const PORT = process.env.PORT || 4000;

// Set default middlewares (logger, static, cors and no-cache)
server.use(cors());
server.use(middlewares);

if (process.env.NODE_ENV === "production") {
  // Add custom routes before JSON Server router
  server.get("*", (req, res) => {
    res.sendFile(
      path.resolve(__dirname, "../", "client", "build", "index.html")
    );
  });
}

// Use default router
server.use(router);
server.listen(PORT, () => {
  console.log(`JSON Server is listening on port ${PORT}`);
});

I expected the request to go thru and load up some data from api/db.json, with a resquest url of https://streamy-app.herokuapp.com/streams but instead i got a request url of http://localhost:4000/streams, which of course leads to the CORS issue below

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4000/streams. (Reason: CORS request did not succeed).

I would truly appreciate any suggestions, been working on this for days.

Answer 1

Alright looks like I figured it out. I simply went into streams/client/package.json and added

"proxy":"http://localhost:4000" 

I then went into streams\client\src and deleted the api folder which contained my custom axios with a base url. using instead axios out of the box for my action creators

const response = await axios.get("/streams");

 dispatch({ type: FETCH_STREAMS, payload: response.data });
}; 

Now while running locally in development mode, I'm able to make a request to http://localhost:4000/streams, but after deploying my node app to Heroku I successfully make a request over to https://streamy-app.herokuapp.com/streams hope this helps someone with slimier issues.