So let's talk about it let me split my screen here i'm running windows 11. i'm in ubuntu in this tab i'm in windows in that tab doesn't matter which one makes you happy doesn't matter i'm going to go and make a my app folder and i'm going to go in there and you can see that it's empty there's nothing going on here and i'm .
Actually you see how it's when i do that i end up getting my prompt right there again that's because i didn't press enter and then when i was outputting that it didn't press enter on my prompt for me so that's interesting all right i'm going to type node my app and it says hello this is my app .
Connectivity to the outside world that is entirely self-contained and running on my computer however let's go into another folder let's go to this folder here called client versus server and in this folder i have a server.js let's take a look i'm going to run visual studio code .
Again bring this up here and in here i have a server.js it doesn't matter what it's called but i named it server.js and it's not called myapp.js and in here we say i'm going to use http the hypertext transfer protocol we're going to write a .
Little server a little server that a client's going to talk to so we make our server and this is a little cheesy but what we're going to do is we're going to say if the url if the address has a backslash it's only a backslash or so in this case a forward slash we're going to output some .
Html we're going to say this is a homepage and then if you hit slash student we're going to say this is the student page and if you hit slash admin we'll say this is the admin page and we're going to listen on port 5000 ports are like windows into your house .
The computer is my house the port is a window so we're going to be peeking our head out of one window the one we're going to listen on is 5000 and it's going to go ahead and start up so what i'll do is i'll switch back over here and i'm going to say node server.js just like i said node my app and i ran the other one i'm going to run .
This one and here it says web server at port 5000 is running now look at this remember before when we said console.log we said you know hello this is my app here i'm also saying console.log and i'm outputting that we're running on this port but then we have this other thing called server that's doing other work .
All this other code we didn't see any any output there did we we only saw this so that is running on my local machine and my app is running and it's listening it's listening on port 5000. i'm going to put myself in the corner here we're going to bring up our browser we'll put our browser over on the right .
Okay what i'll do actually is i'm going to put myself in the center here okay so here's our server this is our server on this side and this is our client over on this side they happen to be on the same computer but pretend for a second that this is .
Over here this server that could be in azure or that could be an amazon that could be some other computer somewhere else and over here this is you you're on your phone you're on your computer you're doing something and i'm going to type in localhost 5000 in the in the url here and it says this is the home page .
Cool let's hit slash student this is the student page so we just on our client on our client up here our web server we hit local host which is my my local computer the machine i'm on here looking in that window that port port .
5000 slash student and we saw some html we saw some html i can actually move myself down over here and i'm going to right click and say view source this is the student we can actually see the html right there and we can see how it presented itself so here's the source code for the web application but this isn't .
Then we're going to we're going to write out to the response we're going to write out to the response this is the student page if i right click over here and i say view source this text right here okay this text right here right here .
On the server was written out to the response and it got sent over to the client right and our clients over here now that's how that's that's how that string got there now where things get confusing is well what code runs on the client what code runs on the server .
Let's take a look at this this is a little complicated but we're going to go through it together okay i've added three windows now okay so first we've got our little console app that's kind of telling us what's happening it's a console running on the server then we've got our source code up there .
Inside of visual studio code and then we've got our browser our client over here on on the right and what we're going to do is we're going to hit the home page here i'm going to hit enter so watch what happens here when i press enter here look at that i'm going to hit refresh a .
Bunch of times i'm just going to push the refresh button in the server in the server in the server what's that that line of code is this line of code okay so what we're doing is we're outputting this is the home page and outputting in the server .
At the exact same time so we sent information to our window here and we sent information to our client over here so this way the programmers can like look in the logs and see what's going on and they can debug things and they can say i don't know but mom and dad don't see that right the .
Clients don't see that they only see what happens on the client side so as a person browsing the web i just see this i'm just doing my thing but on the back end the back end is the server side you hear about the front end the client and the back end the server on the back end .
Is go like this and go like that and then we're gonna hit refresh so you're gonna watch on the server here and then you're gonna see in the browser right here dude there you go okay .
Hit refresh so each time i'm hitting refresh the server listens on that port 5000 runs its code it runs this console.log in the server it sends that response over to the client sends that response over to the client the client then receives the html and says this is the home page inside of that html is also .
Way to think about the client and the server okay if you like beginner videos like this let me know in the chat what you think we should talk about in the future i do realize that for some of you this is very 101 beginner level content but this was a question that my nephew had and now i wanted to put it out there on .
The internet because apparently they didn't teach it in school and i would encourage you to check out my other videos on computer stuff they didn't teach you in school thanks a lot and subscribe please