0
1
00:00:00,430 --> 00:00:05,120
All right. After all of this time talking about how amazing the back end is and how cool it is to have
1

2
00:00:05,190 --> 00:00:08,820
to build your own server, we’re finally actually going to do it this time.
2

3
00:00:09,000 --> 00:00:14,250
So, in this lesson, we're going to learn how to create a real server locally on our computer using 
3

4
00:00:14,250 --> 00:00:16,220
Node.js and Express.
4

5
00:00:16,230 --> 00:00:17,510
Now first things first.
5

6
00:00:17,550 --> 00:00:21,780
I've got my Hyper Terminal open and I've got Atom open next to it as well.
6

7
00:00:21,810 --> 00:00:28,000
So the first thing I want to do is we're going to remove the intro-to-node project directory
7

8
00:00:28,020 --> 00:00:29,650
if you still have it there,
8

9
00:00:29,670 --> 00:00:32,220
so we start off with a clean slate.
9

10
00:00:32,460 --> 00:00:38,330
Now, the second thing is, I want you to notice that you can see the location I'm currently at is the tilde,
10

11
00:00:38,330 --> 00:00:41,900
so that means I'm in the home directory of my Mac book.
11

12
00:00:42,030 --> 00:00:48,600
So I want you to open up a new Hyper Terminal, or just navigate to the home directory, so that we're starting
12

13
00:00:48,600 --> 00:00:50,410
at the same position.
13

14
00:00:50,610 --> 00:00:53,070
And here comes a challenge.
14

15
00:00:53,130 --> 00:00:58,170
So, using what you learned in the last module, all about how to use the command line,
15

16
00:00:58,380 --> 00:01:04,190
I want you to complete this challenge by yourself and to create a new directory,
16

17
00:01:04,410 --> 00:01:10,760
and we're going to call it my-express-server, and then I want you to cd into that directory.
17

18
00:01:10,790 --> 00:01:18,180
Then inside that project folder, I want you to create a new file called server.js, and I want you
18

19
00:01:18,180 --> 00:01:19,910
to initialize npm.
19

20
00:01:20,010 --> 00:01:25,130
And when you are initializing npm, I want you to set the starting point as server.js.
20

21
00:01:25,290 --> 00:01:29,010
So pause the video now and see if you can complete that challenge.
21

22
00:01:31,510 --> 00:01:31,770
All right.
22

23
00:01:31,780 --> 00:01:37,370
So the first thing we had to do was to create a new directory, and I'm going to create that on my 
23

24
00:01:37,370 --> 00:01:37,860
desktop.
24

25
00:01:38,050 --> 00:01:46,900
So let's just shrink that down, and I'm going to cd into desktop. Now that I'm on my desktop as indicated
25

26
00:01:46,900 --> 00:01:47,500
here,
26

27
00:01:47,530 --> 00:01:53,590
I'm going to create a new directory, and I do that of course using the mkdir keyword,
27

28
00:01:53,740 --> 00:01:57,600
and then I'm going to call it my-express-server.
28

29
00:01:58,330 --> 00:01:59,280
So bam.
29

30
00:01:59,290 --> 00:02:01,380
There it is. Created.
30

31
00:02:01,420 --> 00:02:09,740
Now I'm going to cd into my-express-server, and I'm going to create a new file here called 
31

32
00:02:09,750 --> 00:02:10,340
server.js.
32

33
00:02:10,370 --> 00:02:13,260
So, to create a new file the keyword is, of course, touch.
33

34
00:02:13,330 --> 00:02:17,770
And then I create my server.js, which is the name of the file.
34

35
00:02:17,950 --> 00:02:22,420
So this is a brand new Javascript file that I've just created out of thin air.
35

36
00:02:22,420 --> 00:02:29,460
Now, while we’re inside my-express-server, this directory, we're going to initialize npm.
36

37
00:02:29,530 --> 00:02:32,960
So the keyword for that is npm init.
37

38
00:02:33,010 --> 00:02:34,930
And we're going to hit enter.
38

39
00:02:34,930 --> 00:02:40,310
And now we can go through the process of setting up our NPM.
39

40
00:02:40,360 --> 00:02:46,230
So the package name is going to be called my-express-server. That’s fine. Version is 1.0.0.
40

41
00:02:46,390 --> 00:02:54,270
Description, let's call it, “My first express server.” Entry point is server.js.
41

42
00:02:54,420 --> 00:02:56,790
That’s exactly what we want.
42

43
00:02:57,070 --> 00:03:03,640
And test command we’ll ignore. Git repository we’ll ignore. Keywords ignore. Author, we'll just add our own
43

44
00:03:03,640 --> 00:03:11,050
name. License. And now they've compiled our package.json, and let's just take a look at it. Looks
44

45
00:03:11,050 --> 00:03:11,790
fine to me.
45

46
00:03:11,800 --> 00:03:14,110
So let's hit enter for yes.
46

47
00:03:14,320 --> 00:03:19,230
And now we have our package.json and our server.js ready set up.
47

48
00:03:19,240 --> 00:03:24,940
So this is basically the process that you will go through every single time you create a new web development
48

49
00:03:24,940 --> 00:03:25,850
project.
49

50
00:03:25,870 --> 00:03:30,490
So it's good to run through it a few times just so that you get used to all the things that you have
50

51
00:03:30,490 --> 00:03:31,480
to do.
51

52
00:03:31,960 --> 00:03:32,250
All right.
52

53
00:03:32,260 --> 00:03:38,290
So now that I've done that, the next thing I'm going to do is I'm going to open up that project inside
53

54
00:03:38,320 --> 00:03:44,920
Atom. And the short cut to do that in the command line is simply, make sure that you're inside the directory
54

55
00:03:45,030 --> 00:03:48,500
that you want to add to Atom as the project folder,
55

56
00:03:48,760 --> 00:03:52,240
and then you're going to write atom .
56

57
00:03:52,480 --> 00:03:59,590
and now if you hit enter, it will open up and add your project folder to Atom on the left hand side, and you
57

58
00:03:59,590 --> 00:04:01,930
can get started coding up over here.
58

59
00:04:02,080 --> 00:04:07,810
So that's just a quick tip when you're using Atom and the command line. As you'll come to see, the command
59

60
00:04:07,810 --> 00:04:13,460
line is super duper powerful, and it is literally going to become your best friend.
60

61
00:04:13,540 --> 00:04:16,740
So the next step is to install
61

62
00:04:16,760 --> 00:04:22,250
Express. And what do we always do when we use something new? We check out its documentation.
62

63
00:04:22,360 --> 00:04:26,870
So the documentation for Express is on a web site called expressjs.com.
63

64
00:04:27,010 --> 00:04:32,560
And if you have a look at ‘Getting started’ and ‘Installing’, then you can see they've got a whole bunch of
64

65
00:04:32,560 --> 00:04:33,910
instructions for you.
65

66
00:04:33,970 --> 00:04:36,540
So we've already completed the first few steps.
66

67
00:04:36,580 --> 00:04:38,440
We've created a new directory.
67

68
00:04:38,440 --> 00:04:40,170
We've initialized NPM.
68

69
00:04:40,270 --> 00:04:44,770
We've set our entry point and we're now going to install
69

70
00:04:44,770 --> 00:04:45,640
Express.
70

71
00:04:45,880 --> 00:04:52,120
Now you can see that they've got this command ‘npm install express  - - save’. Now, as they explain
71

72
00:04:52,120 --> 00:05:00,790
down here, what ‘ - - save’ basically does is it adds Express into your packages.json under the
72

73
00:05:00,790 --> 00:05:01,930
dependencies.
73

74
00:05:01,990 --> 00:05:08,950
Now it used to be that you had to do this manually by adding the ‘ - - save’, but as of Node 5 and
74

75
00:05:08,950 --> 00:05:14,950
above, which we're definitely using, we’re using node 10 in this course, way into the future,
75

76
00:05:15,100 --> 00:05:17,400
you don't actually need this flag,
76

77
00:05:17,440 --> 00:05:19,260
it’s done by default.
77

78
00:05:19,270 --> 00:05:27,610
So all we need to do is to say ‘npm install express’, and we can do that over here, making sure that we're
78

79
00:05:27,610 --> 00:05:35,260
inside, again, our directory that we're working with, and then we're going to say ‘npm install express’.
79

80
00:05:35,300 --> 00:05:41,350
Hit enter. It’s going to take a little while to download. It’s a relatively large package. And once it's done, it
80

81
00:05:41,350 --> 00:05:48,620
will add the Node modules that Express requires, as well as Express itself.
81

82
00:05:48,670 --> 00:05:55,330
And now, when you have a look inside your packages.json, you can see that we've got a new dependency
82

83
00:05:55,330 --> 00:05:57,510
added, which is Express.
83

84
00:05:57,520 --> 00:06:00,680
Now this is the current latest version of Express,
84

85
00:06:00,790 --> 00:06:06,300
but in the future when you’re taking this course, it might be 4.17 or 5.0,
85

86
00:06:06,430 --> 00:06:07,420
that’s completely fine.
86

87
00:06:07,420 --> 00:06:12,580
We're going to be working with the latest version, and this course will be up to date with the latest
87

88
00:06:12,640 --> 00:06:13,420
version.
88

89
00:06:13,690 --> 00:06:18,840
So I will be time traveling into the future and changing the course in case there are any issues.
89

90
00:06:18,910 --> 00:06:24,690
So rest assured, everything that you're watching, everything I'm telling you to do, is going to work.
90

91
00:06:24,700 --> 00:06:32,260
So now that we've installed Express, the next step is of course to require Express. So let's head over
91

92
00:06:32,290 --> 00:06:37,640
to ‘Getting started’ and going to the ‘Hello world example’.
92

93
00:06:37,870 --> 00:06:44,110
So we're going to create a new constant called express and we're going to require express. Now in this
93

94
00:06:44,110 --> 00:06:49,630
case they’re actually specifying a specific version, but we won’t. We’re just going to use the current latest
94

95
00:06:49,630 --> 00:06:50,220
version.
95

96
00:06:50,380 --> 00:06:53,020
So let's head over to our server.js.
96

97
00:06:53,020 --> 00:07:01,320
We're going to create a new const that's called express, and we're going to require that package “express”.
97

98
00:07:01,420 --> 00:07:07,330
Now, as always, if we want to use the keyword const without JSHint shouting at us, we're going to add
98

99
00:07:07,360 --> 00:07:12,760
a comment called ‘jshint esversion:6’
99

100
00:07:13,000 --> 00:07:18,220
to make that warning go away and tell our linter that we are using
100

101
00:07:18,310 --> 00:07:19,640
ES6.
101

102
00:07:19,660 --> 00:07:27,430
All right. So now that we've required and incorporated Express into our file, the next step is to create
102

103
00:07:27,490 --> 00:07:34,810
a new constant called app, and this is simply a function that represents the Express module, and we bind
103

104
00:07:34,810 --> 00:07:36,650
that to the word app.
104

105
00:07:36,880 --> 00:07:44,980
So we now have a constant called app, which is set equal express, and you'll notice that in the wild, when
105

106
00:07:44,980 --> 00:07:52,390
you come across web sites built using Express, the word app is usually always used when you're referring
106

107
00:07:52,390 --> 00:07:55,310
to the Express module, like so,
107

108
00:07:55,570 --> 00:08:00,910
although you don't have to. You can call it anything you like. But this is just best practice, and it makes it
108

109
00:08:00,940 --> 00:08:04,360
easier for other people to understand what's going on in your code.
109

110
00:08:04,360 --> 00:08:10,930
So now that we've created our constant app, the next step is to use this app, and we're going to use one
110

111
00:08:10,930 --> 00:08:13,240
of its methods called listen.
111

112
00:08:13,570 --> 00:08:22,570
And this tells it to listen on a specific port for any HTTP requests that get sent to our server.
112

113
00:08:22,870 --> 00:08:29,090
So I'm going to choose the port 3000, and if we hit save,
113

114
00:08:29,140 --> 00:08:33,900
now we have literally just built our very first server.
114

115
00:08:34,120 --> 00:08:37,030
This is the bare bones of an Express server.
115

116
00:08:37,030 --> 00:08:44,030
Now let's go into Hyper and let's run this server by saying node server.js,
116

117
00:08:44,080 --> 00:08:50,320
hit enter, and you can see that not much is happening, other than the fact that it seems like our
117

118
00:08:50,320 --> 00:08:51,700
command line is hanging.
118

119
00:08:51,700 --> 00:08:58,270
We don't get our normal sort of prompt, right? Because normally, when we execute a command, we'll get something
119

120
00:08:58,270 --> 00:09:00,170
like this, ‘Angelas-Macbook-Pro:
120

121
00:09:00,190 --> 00:09:05,590
my-express-server angelayu’ and the prompt, which is of course that dollar sign.
121

122
00:09:05,620 --> 00:09:07,690
Now we don't get the prompt here.
122

123
00:09:07,690 --> 00:09:12,820
The reason is because it's listening on this port that we specified.
123

124
00:09:12,820 --> 00:09:17,270
Now a port is basically just a channel that we've tuned our server to.
124

125
00:09:17,500 --> 00:09:22,960
So, for example, sometimes I listen to the radio, and I tune my radio to listen to 104.9FM,
125

126
00:09:22,960 --> 00:09:28,780
and our server is just tuned into the channel 3000.
126

127
00:09:28,990 --> 00:09:35,050
Now not much is happening here, so let's stop our server, and we do that by going into the command line
127

128
00:09:35,410 --> 00:09:37,360
and hitting Control C.
128

129
00:09:37,660 --> 00:09:42,340
Now, you're going to get yourself out of a lot of hairy situations by using Control C.
129

130
00:09:42,370 --> 00:09:50,070
So now we've stopped our server and we're back on the prompt, so we're no longer running our server anymore.
130

131
00:09:50,380 --> 00:09:58,030
So if we wanted to be able to see when our port is set up and when our server is running, we can add
131

132
00:09:58,060 --> 00:10:00,030
a callback function to this method
132

133
00:10:00,030 --> 00:10:08,770
listen. So we can add an anonymous function, and we're going to callback using a console.log saying, “Server
133

134
00:10:08,770 --> 00:10:15,430
started on port 3000”, which is the one that we specified here.
134

135
00:10:15,430 --> 00:10:24,310
So now, if we hit save and we try to run our code again, node server, you can see now, instead of just hanging,
135

136
00:10:24,370 --> 00:10:29,830
it's telling us that server has started on port 3000.
136

137
00:10:29,830 --> 00:10:36,940
Now if we head over to that ports location, which is localhost:3000, because we're hosting our server
137

138
00:10:36,940 --> 00:10:44,530
locally, and after the colon we specify the port that our server is set up on, which is 3000, and you can
138

139
00:10:44,530 --> 00:10:49,210
see that we get this error, where it says, “Cannot GET /“.
139

140
00:10:49,210 --> 00:10:50,970
Now what does that mean?
140

141
00:10:51,160 --> 00:10:58,300
Well, it means that when our browser is trying to get in touch with our server on the port 3000, it's
141

142
00:10:58,300 --> 00:11:01,660
not able to get anything back.
142

143
00:11:01,660 --> 00:11:09,280
Now we have to figure out how can we write some code so that our server responds when a browser is making
143

144
00:11:09,280 --> 00:11:11,370
a request to our server.
144

145
00:11:11,560 --> 00:11:15,550
We have to send the browser some information, right, to display.
145

146
00:11:15,760 --> 00:11:17,350
So, in the next lesson,
146

147
00:11:17,350 --> 00:11:18,630
that’s what we're going to be learning about.
147

148
00:11:18,640 --> 00:11:25,950
We're going to learn about the request and response that we can provide when a browser makes a get request.
148

149
00:11:26,110 --> 00:11:29,110
So for all of that and more, I’ll see you on the next lesson.