Routing won't work once app is deployed to Heroku

Question

I have a fullstack app I deployed on Heroku with React in the frontend and Node.js for my backend. Initially, my frontend would display but the server wasn't running. Now that I've added more dependencies in my package.json , it seems the server is running but the frontend won't render. My page looks like this:

When I look at the Heroku logs, this is what the output is:

It seems that the server is starting on a port (in this instance Port: 17789 and 46894) but then something else tries to run on the same port which causes an error. The port for my server is set to process.env.PORT in the index.js file on my backend. I'm not sure if this is what I need to change or not. Here is the index.js:

 import express from 'express'; import bodyParser from 'body-parser'; import mongoose from 'mongoose'; import cors from 'cors'; import postRoutes from './routes/posts.js'; const app = express(); //Middleware app.use(bodyParser.json({ limit: '30mb', extended: true })); app.use(bodyParser.urlencoded({ limit: '30mb', extended: true })); app.use(cors()); app.use('/posts', postRoutes); const CONNECTION_URL = 'mongodb+srv://caseyclinga:123abc@passport.czhpd.mongodb.net/recollections?retryWrites=true&w=majority'; const PORT = process.env.PORT || 5000; mongoose .connect(CONNECTION_URL, { useNewUrlParser: true, useUnifiedTopology: true, }) .then(() => app.listen(PORT, () => console.log(`Server running on Port: ${PORT} `)) ) .catch((err) => console.log(err));

And lastly, here is my package.json :

 { "scripts": { "build": "cd client && npm run build", "install-client": "cd client && npm install", "heroku-postbuild": "npm run install-client && npm run build", "server": "cd server && nodemon server.js", "develop": "concurrently --kill-others-on-fail \"npm run server\" \"npm run start --prefix client\"", "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run start --prefix client\"" }, "dependencies": { "body-parser": "^1.20.0", "concurrently": "^7.2.1", "cors": "^2.8.5", "express": "^4.18.1", "mongoose": "^6.3.4", "nodemon": "^2.0.16" } }

Does anyone know where the issue may be in this?

Answer 1

In your code you have app.use('/posts', postRoutes); , but you are trying to get /post instead of /posts.