2

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.

Xorin Nebula
  • 113
  • 2
  • 10
  • Using Heroku's instance and running your API on my Ubuntu, at `http://localhost:4000/` - I couldn't reproduce the problem. Can you share `Access-Control-*` headers of the response you've get? – Avraham Aug 21 '19 at 12:09
  • when running the application locally in development mode. I'm able to get a status of 304 with response headers including, `Access-Control-Allow-Credentials: true, Access-Control-Allow-Origin: http://localhost:3000, and Cache-Control: no-cache.` – Xorin Nebula Aug 21 '19 at 15:18
  • However i get, `No response data available for this request`, when deployed on Heroku in production mode. I also get no response headers. Hope this helps. – Xorin Nebula Aug 21 '19 at 15:27
  • You are using two domains: the client served from Heroku is requesting API on `http://localhost:4000/`. Does anything run on your local machine on this port? – Avraham Aug 22 '19 at 08:53
  • Yes i can easily run my express server locally and everything works fine, however users visiting the app cant accesses my json.db data because they are not on my localhost. I would like to make the request to my express server instance that is deployed to Heroku and listening on port process.env.PORT. – Xorin Nebula Aug 22 '19 at 15:27

2 Answers2

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.

Xorin Nebula
  • 113
  • 2
  • 10
0

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.
Avraham
  • 928
  • 4
  • 12