adrianhajdin / project_mern_memories

This is a code repository for the corresponding video tutorial. Using React, Node.js, Express & MongoDB you'll learn how to build a Full Stack MERN Application - from start to finish. The App is called "Memories" and it is a simple social media app that allows users to post interesting events that happened in their lives.
https://youtube.com/playlist?list=PL6QREj8te1P7VSwhrMf3D3Xt4V6_SRkhu
4.96k stars 1.83k forks source link

Cannot Get / - ERROR #109

Open mitchxxmitch-code opened 2 years ago

mitchxxmitch-code commented 2 years ago

Hi :)

When I am starting the server side with npm start it works without throwing an error. The side is hosted on local port 3000. If I am opening the browser, however, the page is white saying: Cannot Get /.

Can anyone help out? :) I am a coding newbie and not experienced with the error handling.

Many thanks, Mitch

MatinT-SA commented 2 years ago

Can you provide more details such as taking a screenshot of your code or pasting them here?

As far as I know, the message that you should get in the terminal of your server is that the server should be running on localhost, port 5000 or localhost:5000 not 3000.

Can't say with certainty before providing more details of this issue but I think you need to specify the port to be 5000 in the index.js file inside your server folder if you haven't done that yet.

mitchxxmitch-code commented 2 years ago

Hey @MatinT-SA !

Thanks for answering!

Here is a screenshot of the index.js.

When using Port 5000: Screenshot 1 - index.js file Screenshot 2 - the error message in the console

When using Port 3000: Screenshot 3 - No error message in the console Screenshot 4 - index.js file Screenshot 5 - error in the browser (Mozilla Firefox + Google Chrome)

I am a little bit confused about what's the problem.

Thanks for your help! 😊

Screenshot 5 Screenshot 4 Screenshot 3 Screenshot 2 Screenshot 1

MatinT-SA commented 2 years ago

@mitchxxmitch-code Well, there are two solutions which come to my mind right now based on your screenshots.

1- The first one is checking the index.js file inside your api folder in the client directory. If you're watching part_3, then your API object inside your index.js file must have the same port as what you've already mentioned in your index.js file in your server directory. something like this:

const API = axios.create({ baseURL: 'http://localhost:5000' });

In other words, if it is 5000 in the backend, then it has to be 5000 for the frontend too.

If you're watching part_1_and_2 , then the line above must be something like this:

const url = 'http://localhost:5000/posts';

(Just like what Adrian has mentioned in the tutorial and his Github Repo)

So, pay attention to the port specified in both of your index.js files (one in the server directory and the other one in the client directory). They must match with each other. Otherwise, it's not going to work properly.

2- The second solution if the first solution wasn't the case is to check your .env file inside your server directory. Just be careful not to paste this file's code here because it was supposed to be a secret file and you must be the only person to have access to it. Just check that file out yourself and see if the PORT mentioned there matches with the port mentioned in the index.js file inside your api folder (client directory).

I hope one of these solutions solve your issue and please let me know how it goes.

mitchxxmitch-code commented 2 years ago

Alright thanks will try out and let you know :)

I am really thankful for your answer!! Really appreciate it!