1
00:00:00,670 --> 00:00:04,770
Welcome back. I think it's time to create our own server now.

2
00:00:06,270 --> 00:00:09,620
So let's create a new file called 'server.js'.

3
00:00:09,660 --> 00:00:11,470
[touch server.js]

4
00:00:11,700 --> 00:00:15,540
And in order for nodemon to listen to 'server.js'.

5
00:00:15,540 --> 00:00:19,630
Let's just type in 'nodemon' and then 'server.js'.

6
00:00:19,830 --> 00:00:27,450
Now if I save this nodemon will listen to this as long as I say 'npm start'

7
00:00:31,120 --> 00:00:33,070
As I've mentioned before

8
00:00:34,360 --> 00:00:42,250
Node comes with its own HTTP module and that's what we're going to use to create our server.

9
00:00:42,250 --> 00:00:44,080
And it's very very simple to use.

10
00:00:44,260 --> 00:00:56,600
We simply grab the HTTP module and then create a server by defining it saying 'http.createServer()'. In this

11
00:00:56,600 --> 00:01:05,940
'createServer' we'll create an arrow function and within here for now let's just do

12
00:01:05,970 --> 00:01:11,100
'console.log('I hear you! thanks for the request)'

13
00:01:12,910 --> 00:01:20,320
And then finally we have to do 'server.listen()' and give it the port number that we want to listen

14
00:01:20,320 --> 00:01:20,660
for.

15
00:01:20,770 --> 00:01:23,930
So just do 3000 for now but again you can do anything, you can do

16
00:01:23,930 --> 00:01:27,710
3001 if you want, but 3000 is nice.

17
00:01:27,940 --> 00:01:31,160
Let's do 'node server.js'

18
00:01:31,180 --> 00:01:32,020
-

19
00:01:34,690 --> 00:01:37,000
And it looks like it's just hanging there.

20
00:01:38,000 --> 00:01:43,680
But let's go to port 3000 on our localhost that is our machine and see what happens.

21
00:01:45,140 --> 00:01:51,910
If I open up a new tab and go to localhost 3000 hmm, nothing's happening.

22
00:01:52,180 --> 00:01:59,160
If I open up the console nothing's there but if I go back I see "I hear you.

23
00:01:59,230 --> 00:02:05,080
Thanks for the request" and that is because remember 'server.js' is running in Node.

24
00:02:05,230 --> 00:02:11,350
It's running here in the Terminal. But it's listening to connections.

25
00:02:11,350 --> 00:02:19,570
So when I hit 'refresh' here or I press Enter and try to connect, it will be listening and it will run

26
00:02:19,870 --> 00:02:24,410
'console.log()' and you can see the second "I hear you. Thanks for the request" just here.

27
00:02:24,520 --> 00:02:25,180
If I refresh

28
00:02:25,180 --> 00:02:26,300
two more times.

29
00:02:28,190 --> 00:02:31,260
Well again I get two more.

30
00:02:31,480 --> 00:02:36,150
But right now the browser is just hanging there because we're not doing anything.

31
00:02:36,190 --> 00:02:37,800
We're not responding with anything.

32
00:02:37,800 --> 00:02:40,760
You can see at the bottom it says 'waiting for localhost'.

33
00:02:40,960 --> 00:02:44,080
We're just console logging on our end but we're not getting any response.

34
00:02:46,060 --> 00:02:47,050
Let's do that.

35
00:02:47,050 --> 00:02:53,950
I'm going to remove the console log and use the parameters that 'createServer' gets us.

36
00:02:53,980 --> 00:03:02,510
So any time we try to connect, we have a 'request' then a 'response' parameter that we can use and let's

37
00:03:02,510 --> 00:03:07,240
make this a little bit smaller just so we can see.

38
00:03:07,430 --> 00:03:16,700
And within here we can do something like 'response.setHeader()' ...

39
00:03:19,760 --> 00:03:26,010
'Content-Type' – we're letting you know what kind of content we were going to send and it's going to be

40
00:03:26,580 --> 00:03:37,950
'text/html' – and this is just the standard way of declaring content type and we'll say 'response.end()' with

41
00:03:39,470 --> 00:03:42,200
an '' tag that says 'Helloooooo'.

42
00:03:46,740 --> 00:03:50,730
If I save this and re-run

43
00:03:54,350 --> 00:03:57,530
well, again we have to restart our server.

44
00:03:57,620 --> 00:04:02,840
So let's get nodemon involved in here so that it listens to file changes.

45
00:04:02,880 --> 00:04:05,000
I go to 'package.json' I'll save this.

46
00:04:05,000 --> 00:04:10,340
And now I'll run 'npm start' see that everything is running.

47
00:04:10,340 --> 00:04:12,150
Let's go back to our 'server.js' file.

48
00:04:12,410 --> 00:04:19,560
If I go back and refresh I get 'helloooooo'; if I go to the Network tab

49
00:04:20,350 --> 00:04:28,670
I see that localhost I get a 200 response; if I click on this I see that the response was 'helloooooo'

50
00:04:28,900 --> 00:04:39,970
If I go to Headers I see that it was a 200 status code and the content type was 'text/html'.

51
00:04:40,150 --> 00:04:41,230
Very cool.

52
00:04:41,260 --> 00:04:43,940
I can also listen to requests.

53
00:04:43,990 --> 00:04:51,720
So for example in here I could have said 'console.log(request.headers)'

54
00:04:54,700 --> 00:05:05,880
I could have also said, I've could've also said 'method' and finally something like 'url'

55
00:05:05,880 --> 00:05:10,430
'request' gives us a lot information about the requests that we receive.

56
00:05:10,530 --> 00:05:13,700
And just so we are clear on what each one of these are.

57
00:05:13,710 --> 00:05:25,680
I can say 'headers', 'method' and 'url'. If I save this

58
00:05:28,820 --> 00:05:29,540
and rerun

59
00:05:32,440 --> 00:05:36,680
I see that I get headers are 'localhost: 3000'.

60
00:05:36,850 --> 00:05:42,310
We see that 'user-agent' was Mozilla, Macintosh. So that's what we used.

61
00:05:42,610 --> 00:05:44,180
We used an Apple to make that request.

62
00:05:44,180 --> 00:05:44,930
All right.

63
00:05:46,050 --> 00:05:51,830
And the method was a 'GET' method and the url was just the backslash [\].

64
00:05:51,900 --> 00:05:55,890
Let's just comment out the headers for now and show you how things change.

65
00:05:55,890 --> 00:06:01,020
If I now enter 'localhost:3000/profile/123'

66
00:06:04,450 --> 00:06:07,930
I get 'method GET' and 'url' was '/profile/123'

67
00:06:07,990 --> 00:06:12,530
So we get information about the request that the front-end made, which is very cool.

68
00:06:13,560 --> 00:06:22,240
Now with our response we responded with 'text/html' but you remember JSON right? We talked about how useful

69
00:06:22,240 --> 00:06:26,260
JSON is when doing AJAX requests.

70
00:06:26,370 --> 00:06:27,630
Can we do that here?

71
00:06:27,690 --> 00:06:35,870
Of course if I go and change 'Content-Type' to 'application/json' then you'll just have to get used to

72
00:06:35,870 --> 00:06:39,980
this but this is the way you say that the content type is JSON.

73
00:06:40,040 --> 00:06:50,270
Now we can send a JavaScript object such as 'user' and will say "name: 'John'"

74
00:06:53,210 --> 00:06:57,280
"hobby: 'Skating'".

75
00:06:57,320 --> 00:07:05,360
Now this user, I can pass here, but remember in order to transfer between the wires we need to use

76
00:07:05,510 --> 00:07:12,980
'JSON.stringify' and make sure you check out the JSON video if that is confusing to you.

77
00:07:13,040 --> 00:07:22,090
But again we're changing this object into a JSON string so that we can send it over the wires.

78
00:07:22,230 --> 00:07:33,390
If I save and let's go back and refresh I get – look at that! – a JSON response again "name: 'John', hobby: 'skating'"

79
00:07:33,960 --> 00:07:40,560
and if I click on the Network tab here I see that the 'Content-Type' is 'application/json' and the response

80
00:07:40,620 --> 00:07:43,610
is in JSON format.

81
00:07:43,640 --> 00:07:47,740
So on the front-end we'll run 'json.parse()'

82
00:07:47,750 --> 00:07:52,520
And then this [{"name:"John","hobby":"Skating"}] in order to convert it to a JavaScript object.

83
00:07:52,580 --> 00:07:53,340
Very cool.

84
00:07:54,340 --> 00:08:03,670
We've just created our very first server but this HTTP is pretty bare bones; as you can imagine, building servers

85
00:08:03,670 --> 00:08:11,670
is something that everybody does that has a website and there are many tools that we can use now that

86
00:08:11,790 --> 00:08:12,780
are more elegant

87
00:08:12,840 --> 00:08:19,500
than running HTTP, and the most popular and the best one to use with Node.js is something called

88
00:08:19,500 --> 00:08:23,510
Express, which we're going to talk about in the next video.

89
00:08:23,620 --> 00:08:25,360
I'll see you in that one. Bye-bye