Heroku / Node / React - how to access my node api endpoints on heroku

Question

Edit: I can share either of my package.json files if that helps.

Edit2: I dont know if this is a common question or a dumb question. I know it doesn't fit stackoverflow, but I've been struggling with this heroku deploy for the better part of a day already.

I recently followed the following tutorial on posting a react / express app to heroku, and while I think I have been successful, I am confused as to how I can access my API. For reference, a couple of relevant steps in the tutorial are:

1. Create Node / Express API, push to heroku, and check that it works (by going to the api endpoints in the URL and literally seeing the data), and add "start": "node index.js" to the Node package.json file.

2. Create React App inside of the root directory of the Node API, add to the react app's package.json this: "proxy": "http://localhost:5000" (I figure so that the api and app can communicate.

I've followed all of these steps, and my React App is working on heroku. The app is displaying, and since the app relies on the Node API to get data to display, clearly the Express/Node API is working.

However, I would like to Actually See the node API endpoints, by going to the endpoint in my browser, and I am not able to do that in heroku currently. All of the React Routes work, however when I visit the api routes my screen is blank. Any thoughts on how i can visit my API endpoints, that are on heroku, in the browser?

For example of my problem:

Localhost Node

• when I launch (node index.js) on localhost, I can access my node API endpoints at http://localhost:8080/api/path/to/endpoint
• http://localhost:8080/ is root of my node API

Localhost React

• when I launch (npm start) on localhost, I can access my react app root at http://localhost:3000/
• another one of my react router routes is http://localhost:3000/myreactpage/, which leads to a page of my react app.

Heroku

• lets say my heroku app name is https://dusty-manager-23562.herokuapp.com/
• https://dusty-manager-23562.herokuapp.com/ leads to the root of my React app
• https://dusty-manager-23562.herokuapp.com/myreactpage does lead to my react app page
• https://dusty-manager-23562.herokuapp.com/api/path/to/endpoint does not show my data, even though i thought it would / want to see my data. This right here is my question.

So this is my problem. A long post for a simple question - why can't i visit the API endpoint of my node / express app when its pushed to heroku, when I can see the data when its at http://localhost:8080/api/path/to/endpoint. The react app is working, so it's getting the API data correctly, but i want to be able to see the data in browser at the endpoint.

Thanks!

Answer 1

So there are two problems that are probably working in tandem to cause you this headache.

The first and more likely issue is that react-router is intercepting the "/api" urls and deciding prematurely that it doesn't have any components to show for those. A way to fix this is to edit the "proxy" property in your client code's package.json.

"proxy": {
  "/api": {
    "target": "http://localhost:5000"
  }
}

(☝️ I'm assuming here that you kept the 5000 port number from the tutorial. If not change it to 8080 or whatever you used for the api port number.)

The second issue is that the service worker create-react-app adds for you is doing the same thing. It reads the path and thinks there's nothing to serve. If your '/api' route is still showing a blank page, in your browser's dev tools go to the 'Application' tab and click 'Clear site data' (assuming you're using Chrome, not sure how this is done in other browsers) then refresh.

If you don't care about having a service worker, remove the registerServiceWorker() call from your client code's index.js. If you do want the service worker, you'll need to edit the registerServiceWorker.js file to be a little more discerning in how it matches paths.

Hope that helps!

Answer 2

A think this is a relevant post here - Accessing internal API with React, Axios on Heroku

I am not using Axios, but i think the app.get(*) may be giving me issues.

EDIT: no this didn't help a ton actually...