CODEWITHSUNDEEP
node.jsreactjsexpress
Don P
Don P

Reputation: 63667

Node Express paths are not being matched on production (Heroku)

This question has been asked many times, I've checked all the usual causes of this - and still can't resolve the issue. See the debug steps below for the usual causes & attempted solutions.

I have a React app (built from create-react-app), a Node Express server, and I deploy them on Heroku.

The entire repo is public here.

You can view the live production page here.

Here is the problem:

The React app loads fine. On app load, we make an API call to "GET /api/haikus" which returns an error. (view App.js code)

The API call's error says Unexpected token < in JSON. We inspect the network response, and see our React app's index.html page.

I also used PostMan to directly do a GET /api/haikus to see if my browser or react was messing with it. I still get the same response (ie the index.html page).

For Express apps, this usually means your routes are in the wrong order (e.g. app.get("*", ...) is getting hit before your API routes).

So I checked the routes in my server.js file. They're in the right order with the /api routes above the general * route.

So why is my server not matching any routes only in production?

Upvotes: 3

Views: 315

Answers (2)

Dolev Dublon
Dolev Dublon

Reputation: 931

what's up! the problem is that Heroku run different commands to run your app in his server ,

in the repo you showed us

you don't have a build folder that is created after running

npm run build

AND YOU HAVE BOTH SERVER CODE AND REACT CODE ON THE SAME FOLDER!!

please separate server folder and react to a different folder.

quick solution i cant give you because deploying is a long process but this is what you need to go through in order to deploy and get you app to work

check this guide on how to upload this is the best solution i can give you

Article

and if you want

i will happily help you on a video call

Gmail google meets [email protected]

-----------------------------EDIT

check out this video i made you !

How to Deploy to heroku YouTube video

Upvotes: 0

IRSHAD
IRSHAD

Reputation: 1622

The server.js file is already written to serve the static files for react (build folder) and also to serve API response. But in your package.json file, I could see only you are running 'serve -s build' which will serve the react files and not trigger the node server which gives API response.

So you may have to run the server.js as your 'npm start' script and it will serve both API as well as react files (from build folder).

So try changing npm script in package.json as follows and redeploy to heroku.

"start": "node server.js",

Upvotes: 1

Related Questions