Welcome back. I think it's time to create our own server now.
So let's create a new file called 'server.js'.
[touch server.js]
And in order for nodemon to listen to 'server.js'.
Let's just type in 'nodemon' and then 'server.js'.
Now if I save this nodemon will listen to this as long as I say 'npm start'
As I've mentioned before
Node comes with its own HTTP module and that's what we're going to use to create our server.
And it's very very simple to use.
We simply grab the HTTP module and then create a server by defining it saying 'http.createServer()'. In this
'createServer' we'll create an arrow function and within here for now let's just do
'console.log('I hear you! thanks for the request)'
And then finally we have to do 'server.listen()' and give it the port number that we want to listen
for.
So just do 3000 for now but again you can do anything, you can do
3001 if you want, but 3000 is nice.
Let's do 'node server.js'
-
And it looks like it's just hanging there.
But let's go to port 3000 on our localhost that is our machine and see what happens.
If I open up a new tab and go to localhost 3000 hmm, nothing's happening.
If I open up the console nothing's there but if I go back I see "I hear you.
Thanks for the request" and that is because remember 'server.js' is running in Node.
It's running here in the Terminal. But it's listening to connections.
So when I hit 'refresh' here or I press Enter and try to connect, it will be listening and it will run
'console.log()' and you can see the second "I hear you. Thanks for the request" just here.
If I refresh
two more times.
Well again I get two more.
But right now the browser is just hanging there because we're not doing anything.
We're not responding with anything.
You can see at the bottom it says 'waiting for localhost'.
We're just console logging on our end but we're not getting any response.
Let's do that.
I'm going to remove the console log and use the parameters that 'createServer' gets us.
So any time we try to connect, we have a 'request' then a 'response' parameter that we can use and let's
make this a little bit smaller just so we can see.
And within here we can do something like 'response.setHeader()' ...
'Content-Type' – we're letting you know what kind of content we were going to send and it's going to be
'text/html' – and this is just the standard way of declaring content type and we'll say 'response.end()' with
an '' tag that says 'Helloooooo'.
If I save this and re-run
well, again we have to restart our server.
So let's get nodemon involved in here so that it listens to file changes.
I go to 'package.json' I'll save this.
And now I'll run 'npm start' see that everything is running.
Let's go back to our 'server.js' file.
If I go back and refresh I get 'helloooooo'; if I go to the Network tab
I see that localhost I get a 200 response; if I click on this I see that the response was 'helloooooo'
If I go to Headers I see that it was a 200 status code and the content type was 'text/html'.
Very cool.
I can also listen to requests.
So for example in here I could have said 'console.log(request.headers)'
I could have also said, I've could've also said 'method' and finally something like 'url'
'request' gives us a lot information about the requests that we receive.
And just so we are clear on what each one of these are.
I can say 'headers', 'method' and 'url'. If I save this
and rerun
I see that I get headers are 'localhost: 3000'.
We see that 'user-agent' was Mozilla, Macintosh. So that's what we used.
We used an Apple to make that request.
All right.
And the method was a 'GET' method and the url was just the backslash [\].
Let's just comment out the headers for now and show you how things change.
If I now enter 'localhost:3000/profile/123'
I get 'method GET' and 'url' was '/profile/123'
So we get information about the request that the front-end made, which is very cool.
Now with our response we responded with 'text/html' but you remember JSON right? We talked about how useful
JSON is when doing AJAX requests.
Can we do that here?
Of course if I go and change 'Content-Type' to 'application/json' then you'll just have to get used to
this but this is the way you say that the content type is JSON.
Now we can send a JavaScript object such as 'user' and will say "name: 'John'"
"hobby: 'Skating'".
Now this user, I can pass here, but remember in order to transfer between the wires we need to use
'JSON.stringify' and make sure you check out the JSON video if that is confusing to you.
But again we're changing this object into a JSON string so that we can send it over the wires.
If I save and let's go back and refresh I get – look at that! – a JSON response again "name: 'John', hobby: 'skating'"
and if I click on the Network tab here I see that the 'Content-Type' is 'application/json' and the response
is in JSON format.
So on the front-end we'll run 'json.parse()'
And then this [{"name:"John","hobby":"Skating"}] in order to convert it to a JavaScript object.
Very cool.
We've just created our very first server but this HTTP is pretty bare bones; as you can imagine, building servers
is something that everybody does that has a website and there are many tools that we can use now that
are more elegant
than running HTTP, and the most popular and the best one to use with Node.js is something called
Express, which we're going to talk about in the next video.
I'll see you in that one. Bye-bye