CODEWITHSUNDEEP
node.jsreactjsexpresscorsjson-server
Xorin Nebula
Xorin Nebula

Reputation: 113

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

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.

Upvotes: 2

Views: 3054

Answers (2)

Xorin Nebula
Xorin Nebula

Reputation: 113

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.

Upvotes: 1

Avraham
Avraham

Reputation: 938

First, you should know that Heroku doesn't allow to expose multiple ports, which means you should change the approach of multiple ports to something else (see this answer).

Second, the file client/src/apis/streams.js is hard-coded configured to send requests to http://localhost:4000/ - which is not a good idea.
Whatever approach you choose - even deploying to another host server - you will need to dynamically configure the API endpoint, per environment.

I would also recommend you to:

  1. Change the way you deploy react, as explained here.
  2. After doing the above, consider consolidating your API service with the static server, so that you don't need multiple ports, and then everything becomes easier.

Upvotes: 0

Related Questions