Receiving the message: Cannot GET / error while using NodeJS and React - node.js

Question

I know similar questions have been answered multiple times over the years and I have scoured through just about all of them and can't seem to figure out what my issue is.
I am getting the Cannot GET / error with NodeJS when opening the localhost:5000 in browser. When inspecting I can see it says "Failed to load resource: the server responded with a status of 404 (Not Found)", which I think may be related to my controllers file.
Note: I am trying to code based off of this tutorial: https://www.youtube.com/watch?v=ngc9gnGgUdA
The "This works" message previously showed up for me and the array symbol still shows up. It is the JSX structure part where I first run into this issue (begins at 28:50). I feel I have done exactly as the tutorial explains, but perhaps I need a better person than me to look at it.
server/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();
app.use('/posts', postRoutes);
app.use(express.json({ limit: "30mb", extended: true }));
app.use(express.urlencoded({ limit: "30mb", extended: true }));
app.use(cors());
const CONNECTION_URL = 'mongodb+srv://*****:******#cluster0.kwo9h.mongodb.net/myFirstDatabase?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((error) => console.log(error.message));
mongoose.set('useFindAndModify', false);
controllers/posts
import PostMessage from '../models/postMessage.js';
// import router from '../routes/posts.js';
export const getPosts = async (req, res) => {
try {
const postMessages = await PostMessage.find();
// console.log(postMessages);
res.status(200).json(postMessages);
} catch (error) {
res.status(404).json({ message: error.message });
}
}
export const createPost = async (req, res) => {
const
post = req.body;
const newPost = new PostMessage(post);
try {
await newPost.save();
res.status(201).json(newPost);
} catch (error) {
res.status(409).json({ message: error.message });
}
}
routes/posts
import express from 'express';
import { getPosts, createPost } from '../controllers/posts.js'
const router = express.Router();
// localhost:5000/posts
router.get('/', getPosts);
router.post('/', createPost);
export default router;
Any help would definitely make my day. Thank you!

Answer 1

In the tutorial, there are actually 2 applications. The first one is the backend (NodeJS), which is running on port 5000. The second one is the frontend (React), which is running on port 3000.
At 30:50, you see that the mentor typing "npm run start" on the 2nd terminal to start the react application.
At 33:12, the URL is localhost:3000, which is pointing to React application. It isn't localhost:5000. You get the error 404 because in the NodeJS part, there is no GET "/" route. So you just need to use the correct URL.

Answer 2

You cannot directly use router.
declare the express app first and attach the router to it.
const app = express();
const router = express.Router();
router.get('/', getPosts);
router.post('/', createPost);
app.use('/', router)
export default router;

Answer 3

You have no route declared for http://localhost:5000 - your router is under /posts
So you need to visit http://localhost:5000/posts to see something.
If you want something to appear directly at http://localhost:5000 you can do something like
index.js
const app = express();
app.use('/', (req, res) => {
res.send('works')
})
app.use('/posts', postRoutes);
What do you want to see at http://localhost:5000?
If you want to display a index.html website you can put your index.html file in a a folder e.g. public and add
app.use(express.static('public'))
If you want your posts to appear at http://localhost:5000 then change your routing
index.js
const app = express();
app.use('/', postRoutes)