1
00:00:00,210 --> 00:00:06,000
In this video you're going to create and run your very first node j s based server.

2
00:00:06,000 --> 00:00:11,940
This is going to offer users an entirely new way to interact with your applications instead of needing

3
00:00:11,940 --> 00:00:15,390
to run commands from the terminal to interact with your app.

4
00:00:15,450 --> 00:00:20,880
They'll be able to visit a U R L and by the end of this video you're gonna have a you are well you can

5
00:00:20,880 --> 00:00:27,390
visit in the browser to interact with your node j s application with the node server we can serve up

6
00:00:27,390 --> 00:00:29,660
whatever our application needs.

7
00:00:29,670 --> 00:00:34,110
So imagine I'm trying to create a portfolio Web site to show off my work.

8
00:00:34,230 --> 00:00:39,670
I can create a node server that serves up all of the assets the browser would need to load.

9
00:00:39,690 --> 00:00:46,770
This would include H TMF documents CSA s files to style the page client side JavaScript and maybe some

10
00:00:46,800 --> 00:00:48,640
images of my work.

11
00:00:48,690 --> 00:00:54,510
Now we could also take the other approach with the server and instead of serving up a Web site we could

12
00:00:54,510 --> 00:00:58,320
serve up an HDTV Jason based API.

13
00:00:58,320 --> 00:01:04,890
That would be similar to the map box or the dark sky API where we're exchanging Jason data back and

14
00:01:04,890 --> 00:01:06,570
forth with the server.

15
00:01:06,600 --> 00:01:10,110
Now we are going to explore both approaches throughout the class.

16
00:01:10,140 --> 00:01:14,100
We're going to start off by creating simple web servers.

17
00:01:14,100 --> 00:01:20,220
Then once we're comfortable with that we're going to move on to create TTP based API as with database

18
00:01:20,220 --> 00:01:23,730
storage authentication email sending and more.

19
00:01:23,730 --> 00:01:29,040
As mentioned in the section introduction the tool we're going to use to create our node servers is the

20
00:01:29,040 --> 00:01:31,630
very popular express library.

21
00:01:31,680 --> 00:01:39,930
You can find Express on the Web over at Express J S dot com Express is one of the original NPM packages

22
00:01:39,960 --> 00:01:46,290
and it's one of my favorite express definitely helped put no JSA on the map back in the day because

23
00:01:46,290 --> 00:01:51,990
it made it so easy to create web servers whether you wanted to serve up something like a static web

24
00:01:51,990 --> 00:02:00,090
site or whether you wanted to create a complex HDTV Jason based API to serve as the back end for something

25
00:02:00,090 --> 00:02:02,880
like a mobile or web application.

26
00:02:02,880 --> 00:02:07,920
Now we're gonna use Express extensively throughout the class but I wanted to take a moment to show you

27
00:02:07,920 --> 00:02:12,020
where you can find it on the Web so you know where you can go to learn more.

28
00:02:12,090 --> 00:02:15,090
They have a great getting started guide that will cover all of this.

29
00:02:15,090 --> 00:02:20,940
In the class they also have a guide for doing more complex and advanced things which will also cover.

30
00:02:20,940 --> 00:02:27,330
And finally they have a great API reference which serves as the low level documentation for every single

31
00:02:27,360 --> 00:02:29,580
method and tool available.

32
00:02:29,580 --> 00:02:34,050
Now in this video in particular the goal is to get a basic server up and running.

33
00:02:34,050 --> 00:02:39,990
I want to be able to pull up a you are well in the browser and see an asset that my server served up

34
00:02:40,260 --> 00:02:43,920
and that is exactly what we're going to do right now to do this.

35
00:02:43,920 --> 00:02:49,220
We're going to create a brand new directory so let's head over to visual studio code.

36
00:02:49,290 --> 00:02:55,290
I'm going to close all open files collapse all open directories and we're gonna make a brand new one

37
00:02:55,350 --> 00:02:58,050
inside of the node course folder.

38
00:02:58,110 --> 00:03:01,690
Right here we can call this something like web server.

39
00:03:01,830 --> 00:03:02,550
Perfect.

40
00:03:02,640 --> 00:03:07,830
And now we're going to install and use Express inside of the terminal.

41
00:03:07,860 --> 00:03:11,090
Let's take a quick moment to navigate into our new directory.

42
00:03:11,100 --> 00:03:16,590
That would be C D web server since I'm currently inside of the node course directory.

43
00:03:16,590 --> 00:03:23,010
And once I'm in the web server folder we need to initialize NPM so we can actually install Express which

44
00:03:23,010 --> 00:03:25,410
is indeed an NPM module.

45
00:03:25,410 --> 00:03:28,610
So right here I'm going to use NPM in it.

46
00:03:28,620 --> 00:03:33,250
Now we could just run this and then fill out the individual fields for package.

47
00:03:33,290 --> 00:03:39,720
Jason as mentioned earlier though we can just use the Y flag which is just going to answer yes using

48
00:03:39,720 --> 00:03:42,060
the default value for each question.

49
00:03:42,150 --> 00:03:45,660
And that's perfectly fine since we were gonna use the defaults anyways.

50
00:03:46,080 --> 00:03:48,000
I run the command and what do I get.

51
00:03:48,000 --> 00:03:54,600
I get a package dot Jason File now that we have this in place we can install the Express library.

52
00:03:54,600 --> 00:04:03,070
That would be NPM I express at the latest version which is four point sixteen point four.

53
00:04:03,150 --> 00:04:09,540
I'm gonna run the installer and once that's done we can focus on actually creating a no J Yes script

54
00:04:09,720 --> 00:04:13,440
that will create configure and start up the server.

55
00:04:13,440 --> 00:04:19,410
Now I'm gonna do this in a brand new directory so in the web server folder I'm going to create a sub

56
00:04:19,410 --> 00:04:23,350
directory called Source or S.R. C for short.

57
00:04:23,520 --> 00:04:27,600
And this is where we're gonna end up putting all of our node J.S. scripts.

58
00:04:27,600 --> 00:04:32,460
So instead of having them in the root of the project like we did with the notes app and with the weather

59
00:04:32,460 --> 00:04:37,770
app we're gonna go ahead and keep things a bit more organized so I can show you how to create a more

60
00:04:37,770 --> 00:04:44,080
complex directory structure that's going to scale a little better as your application starts to grow.

61
00:04:44,100 --> 00:04:49,100
So as things get more complex it's gonna be more important to stay organized.

62
00:04:49,260 --> 00:04:54,630
Now that we have things in place let's go ahead and clear the terminal output down below and create

63
00:04:54,660 --> 00:04:57,260
a single file in the source folder.

64
00:04:57,270 --> 00:05:02,690
This is going to be the starting point to our node Apple ocean and I'm going to call this app dot J.

65
00:05:02,690 --> 00:05:09,200
S in here we're going to load in Express configure it to serve something up and then we're gonna start

66
00:05:09,290 --> 00:05:15,200
the server to get started let's create a new constant so we can load the library in I'm going to create

67
00:05:15,230 --> 00:05:22,520
a constant Express and I'll use require to grab the library exports and what the Express library exposes

68
00:05:22,520 --> 00:05:29,840
is just a single function so express is actually a function as opposed to something like an object and

69
00:05:29,840 --> 00:05:34,930
we call it to create a new express application and that is exactly what we're gonna do.

70
00:05:34,940 --> 00:05:38,150
Just a single time right below right here.

71
00:05:38,150 --> 00:05:41,990
Let's create a new variable to store our Express application.

72
00:05:42,080 --> 00:05:48,620
I'm gonna call this something like app and all we do to generate the application is called Express.

73
00:05:48,620 --> 00:05:51,770
Now the Express function doesn't take in any arguments.

74
00:05:51,770 --> 00:05:58,480
Instead we configure our server by using various methods provided on the application itself.

75
00:05:58,490 --> 00:06:04,970
That means this line is all done and down below we can start to tell our Express application what exactly

76
00:06:05,030 --> 00:06:05,820
it should do.

77
00:06:05,840 --> 00:06:08,990
For this example imagine we owned the following domain.

78
00:06:09,020 --> 00:06:10,520
App dot com.

79
00:06:10,520 --> 00:06:16,190
Now obviously when someone visits app dot com we want to show them something maybe the home page for

80
00:06:16,190 --> 00:06:23,210
our company Web site but we're gonna have other pages as well like app dot com forward slash help or

81
00:06:23,210 --> 00:06:26,450
app dot com forward slash about.

82
00:06:26,450 --> 00:06:33,080
So right here we have one domain app dot com and all of it's going to run on a single express server.

83
00:06:33,110 --> 00:06:35,840
What we have setup though are multiple routes.

84
00:06:35,840 --> 00:06:42,340
We have the route route we have forward slash help we have forward slash about and we could add others.

85
00:06:42,380 --> 00:06:47,990
So how do we set up our server to send a response when someone tries to get something at a specific

86
00:06:47,990 --> 00:06:48,800
route.

87
00:06:48,800 --> 00:06:56,540
We set that up using a method on app it is app dot get this lets us configure what the server should

88
00:06:56,540 --> 00:07:03,650
do when someone tries to get the resource at a specific U.R.L. maybe we should be sending back HDL or

89
00:07:03,650 --> 00:07:09,440
maybe we should be sending back Jason now the get method which we're gonna use a ton throughout the

90
00:07:09,440 --> 00:07:12,110
class takes in two arguments.

91
00:07:12,110 --> 00:07:18,680
The first is the route so the partial you are all that would be nothing for this first example forward

92
00:07:18,680 --> 00:07:25,820
slash help for the second or forward slash about for the third and it also takes in a function.

93
00:07:25,820 --> 00:07:32,300
Now the function is where we describe what we want to do when someone visits this particular route.

94
00:07:32,300 --> 00:07:37,760
So in this case when someone visits the home page this function would describe what to send back to

95
00:07:37,760 --> 00:07:38,540
them.

96
00:07:38,570 --> 00:07:42,360
Now this function gets called with two very important arguments.

97
00:07:42,380 --> 00:07:47,950
The first is an object containing information about the incoming request to the server.

98
00:07:47,960 --> 00:07:52,030
This is commonly called R E Q which is short for request.

99
00:07:52,100 --> 00:07:54,950
You'll see this used throughout the documentation.

100
00:07:54,980 --> 00:07:57,320
The other argument is the response.

101
00:07:57,320 --> 00:08:03,530
So this contains a bunch of methods allowing us to customize what we're going to send back to the requester.

102
00:08:03,530 --> 00:08:07,450
This is commonly called R E S which is short for response.

103
00:08:07,520 --> 00:08:12,570
Now down below we can go ahead and look at their request to figure out what we want to do.

104
00:08:12,590 --> 00:08:18,800
We could do something like read data from the database or create some HDMI all and we could use various

105
00:08:18,800 --> 00:08:23,070
methods on response to actually send a response back.

106
00:08:23,120 --> 00:08:26,730
Let's go ahead and stick with a very basic text response.

107
00:08:26,810 --> 00:08:30,400
Just displaying some text in the browser to get that done.

108
00:08:30,410 --> 00:08:33,530
We're going to use response dot send.

109
00:08:33,680 --> 00:08:40,490
This allows us to send something back to the requester so if someone's making a request from code using

110
00:08:40,490 --> 00:08:44,400
something like the NPM request library they'll get this back.

111
00:08:44,480 --> 00:08:49,580
If they're making the request from the browser this is what's going to display in the browser window

112
00:08:50,000 --> 00:08:50,510
right here.

113
00:08:50,510 --> 00:08:57,320
We're going to pass in a string and we're going to stick with a simple message like hello express.

114
00:08:57,320 --> 00:08:58,400
Perfect.

115
00:08:58,400 --> 00:09:03,680
Now that we have this in place we have something that's going to show up at the root you are.

116
00:09:03,830 --> 00:09:08,720
And now the last thing we need to do is actually start the server up.

117
00:09:08,720 --> 00:09:11,540
Currently the server is not up and running.

118
00:09:11,540 --> 00:09:17,150
If we were to run the application we would never be able to view it in the browser to start the server

119
00:09:17,150 --> 00:09:17,660
up.

120
00:09:17,690 --> 00:09:24,260
We have to use one more method on app which will only ever use a single time in our application that

121
00:09:24,260 --> 00:09:25,420
is app dot.

122
00:09:25,430 --> 00:09:26,120
Listen.

123
00:09:26,210 --> 00:09:28,640
This starts up this server and it has it.

124
00:09:28,640 --> 00:09:29,110
Listen.

125
00:09:29,120 --> 00:09:36,300
On a specific port for the moment we're gonna use a common development port which is port three thousand.

126
00:09:36,320 --> 00:09:39,870
Now port three thousand is obviously not the default port.

127
00:09:39,980 --> 00:09:45,800
When you visit a Web site you don't provide the port because there are default ports for example for

128
00:09:45,800 --> 00:09:48,140
an H TTP based website.

129
00:09:48,230 --> 00:09:49,650
It is port 80.

130
00:09:49,760 --> 00:09:55,730
As we explore production deployment a little bit later in the class we'll learn how to use those ports.

131
00:09:55,820 --> 00:10:01,900
But for now in our local development environment as we're just viewing on our local machine port three

132
00:10:01,900 --> 00:10:04,320
thousand is gonna work really well.

133
00:10:04,390 --> 00:10:10,630
Now the other optional argument we can pass to the listen method is a callback function which just runs

134
00:10:10,630 --> 00:10:12,530
when the server is up and running.

135
00:10:12,760 --> 00:10:19,240
The process of starting up a server isn't a synchronous process though it'll happen almost instantly.

136
00:10:19,240 --> 00:10:24,010
Right here though we could print a little message to the console just letting the person who's running

137
00:10:24,010 --> 00:10:27,510
the application know the server did start correctly.

138
00:10:27,550 --> 00:10:33,280
So right here server is up on port three thousand.

139
00:10:33,280 --> 00:10:39,100
Now this message is never going to display to someone in the browser that is what this message is for.

140
00:10:39,100 --> 00:10:44,890
This is just going to display as a useful piece of information when running the application down below.

141
00:10:44,920 --> 00:10:46,840
Let's go ahead and do just that.

142
00:10:46,870 --> 00:10:49,510
We can start up the server by using Node.

143
00:10:49,510 --> 00:10:55,530
Now since the file isn't in the root of the web server project we'll use source forward slash app dot

144
00:10:55,660 --> 00:11:01,870
J S providing the complete path to it and if we run the script you'll notice that basically instantly

145
00:11:02,050 --> 00:11:05,320
server is up on port three thousand prints.

146
00:11:05,330 --> 00:11:10,210
The other thing you'll notice is that it's been maybe 10 seconds since I originally ran the command

147
00:11:10,480 --> 00:11:14,590
and we haven't been brought back to the command prompt to run something else.

148
00:11:14,620 --> 00:11:20,590
That is because the node process is still up and running with the notes app or the weather app.

149
00:11:20,620 --> 00:11:23,590
There was some discrete task that needed to be completed.

150
00:11:23,650 --> 00:11:28,890
I needed to read a note or I needed to fetch the weather information for a given location.

151
00:11:28,990 --> 00:11:34,230
When that task was done the node process was closed with the web server.

152
00:11:34,240 --> 00:11:39,410
It's never gonna stop unless we stop it because its job is to stay up and running.

153
00:11:39,490 --> 00:11:45,940
Listening and processing new incoming requests so it's staying up and running so if someone does visit

154
00:11:45,940 --> 00:11:49,400
the root of our Web site they can get a response right away.

155
00:11:49,420 --> 00:11:53,290
Now that means that it is going to stay up and running as long as we let it.

156
00:11:53,290 --> 00:11:59,080
We can always shut it down using controlled C that'll shut down the web server and bring us back to

157
00:11:59,080 --> 00:12:04,720
the command prompt and we could always start it again if we need to know that our server is up and running.

158
00:12:04,720 --> 00:12:07,030
Let's go ahead and visited in the browser.

159
00:12:07,030 --> 00:12:12,900
I'm gonna crack open a new tab in the browser and since we're running the server on our local machine

160
00:12:13,120 --> 00:12:17,830
we're not going to be able to access it off of our machine and we're not going to be able to access

161
00:12:17,830 --> 00:12:19,290
it from a real domain.

162
00:12:19,300 --> 00:12:23,680
We'll learn how to do that sort of thing when we explore production deployment.

163
00:12:23,680 --> 00:12:30,050
For now the server is only accessible on our machine and we can access it at local host.

164
00:12:30,250 --> 00:12:32,760
Now it's local host port three thousand.

165
00:12:32,770 --> 00:12:36,770
That is the port we chose to listen on when we called app dot.

166
00:12:36,790 --> 00:12:37,540
Listen.

167
00:12:37,540 --> 00:12:42,760
So right here colon to provide the port and then three thousand if I visit this.

168
00:12:42,760 --> 00:12:43,690
What do I see.

169
00:12:43,750 --> 00:12:47,890
Right here I get my message Hello express printing to the screen.

170
00:12:47,890 --> 00:12:53,560
So when we visited that you are all in the browser it went off to our server the Express server found

171
00:12:53,560 --> 00:12:59,860
the matching route which is this one for the route and it processed the request using our handler the

172
00:12:59,860 --> 00:13:07,150
handler used response dot send to send back a text response and that is exactly what we're seeing inside

173
00:13:07,150 --> 00:13:07,880
of the browser.

174
00:13:07,900 --> 00:13:13,330
Now to set up a second route we just add another call to app dot get so down below.

175
00:13:13,330 --> 00:13:18,340
The first one I'll add a second one and we're still going to pass in that string though this time we're

176
00:13:18,340 --> 00:13:20,530
going to provide the new route.

177
00:13:20,530 --> 00:13:26,290
So instead of nothing for the route of our website we're going to use forward slash help for the help

178
00:13:26,350 --> 00:13:27,110
page.

179
00:13:27,160 --> 00:13:30,490
So right inside of here forward slash help.

180
00:13:30,490 --> 00:13:35,860
Now what do we want to do when someone visits that you are all we're gonna go ahead and set up our function

181
00:13:35,890 --> 00:13:38,410
telling the Express server what it should do.

182
00:13:38,530 --> 00:13:42,310
We're gonna get our two arguments request and response.

183
00:13:42,310 --> 00:13:48,350
And for the moment we are once again going to use response dot send to send something back.

184
00:13:48,370 --> 00:13:53,320
Right here I'll just display a title for the page like Help page.

185
00:13:53,350 --> 00:13:54,300
Perfect.

186
00:13:54,370 --> 00:14:00,040
Now that we have this in place we are going to need to restart our server for the changes to take effect

187
00:14:00,280 --> 00:14:00,880
right now.

188
00:14:00,880 --> 00:14:03,490
The currently running the server has no idea.

189
00:14:03,490 --> 00:14:05,680
You've added something to the file.

190
00:14:05,680 --> 00:14:11,200
We can always fix this by shutting the server down with control C and starting it up again but instead

191
00:14:11,200 --> 00:14:15,920
of doing that over and over again we'll just use node Monde which we installed earlier.

192
00:14:16,210 --> 00:14:23,710
So no demon space source forward slash app dot J S that's going to start up the server and it's going

193
00:14:23,710 --> 00:14:28,730
to restart the server whenever we make a change to abduct Jess and save it.

194
00:14:28,900 --> 00:14:33,850
Now over in the browser I can refresh the route to still see Hello express.

195
00:14:33,850 --> 00:14:38,840
I could also head over to forward slash help to view my help page.

196
00:14:39,040 --> 00:14:45,270
Now if I was to visit any other are which I didn't have setup like forward slash about what are we going

197
00:14:45,270 --> 00:14:45,960
to see.

198
00:14:46,120 --> 00:14:52,750
We're going to see an error message cannot get forward slash about later on we'll learn how to set up

199
00:14:52,750 --> 00:14:59,410
a for a four page four routes that we don't have a support setup for but that's a slightly more complex

200
00:14:59,410 --> 00:15:01,740
topic and it'll come up a bit later.

201
00:15:01,760 --> 00:15:07,880
For now it is challenge time where you're going to add a few new routes to our web server on your own.

202
00:15:07,880 --> 00:15:12,170
Down below I have the challenged comments outlining what I'd like you to do.

203
00:15:12,410 --> 00:15:16,420
Right here you are going to set up two new routes for the server.

204
00:15:16,670 --> 00:15:18,260
So we already have two.

205
00:15:18,320 --> 00:15:21,680
You'll be adding two more for a grand total of four.

206
00:15:21,820 --> 00:15:26,290
One you're going to set up an about route and render a page title.

207
00:15:26,300 --> 00:15:32,450
That means when I visit this U.R.L. I should see something like about page showing up.

208
00:15:32,450 --> 00:15:38,030
And number two you're going to set up a weather route and there you can render a title for that page

209
00:15:38,060 --> 00:15:38,960
as well.

210
00:15:38,960 --> 00:15:42,780
Something like view whether or show weather would get the job done.

211
00:15:42,860 --> 00:15:45,650
The exact text you show isn't important.

212
00:15:45,650 --> 00:15:49,690
What is important is that when you visit your two you are L's in the browser.

213
00:15:49,730 --> 00:15:52,310
You see the text you chose.

214
00:15:52,340 --> 00:15:58,790
So take some time to add those two new routes to our Express server visit both in the browser making

215
00:15:58,790 --> 00:16:02,560
sure they're showing up and when you're done come back and click play

216
00:16:06,120 --> 00:16:06,840
how that go.

217
00:16:06,840 --> 00:16:10,150
Let's kick things off by setting up the about route.

218
00:16:10,170 --> 00:16:16,650
So once again if we want to support a new route we have to set a new one up with app dot get right here

219
00:16:16,650 --> 00:16:23,580
we provide those two arguments forward slash about for the route and then we provide our callback function

220
00:16:23,650 --> 00:16:27,530
telling express what to do when someone visits this route.

221
00:16:27,570 --> 00:16:33,630
Now we get some information about their request which we haven't used so far but we'll use pretty extensively

222
00:16:33,660 --> 00:16:39,840
later on in the class and we get our response which we do indeed need in order to send something back

223
00:16:40,290 --> 00:16:41,130
down below.

224
00:16:41,190 --> 00:16:45,330
We'll be using response dot send to send back a message.

225
00:16:45,330 --> 00:16:51,870
I will just print about now with this in place I should be able to save the file no demand automatically

226
00:16:51,900 --> 00:16:58,380
restarted the server and if I refresh the browser I can see my text showing up which is fantastic.

227
00:16:58,380 --> 00:17:02,580
Next up we can set up the weather page so down below.

228
00:17:02,580 --> 00:17:08,530
That's going to be app dot get forward slash weather would get the job done though maybe you picked

229
00:17:08,550 --> 00:17:09,800
something slightly different.

230
00:17:09,810 --> 00:17:14,240
That's a OK and from here we'll set up our callback function.

231
00:17:14,310 --> 00:17:20,370
We're going to define the request and response arguments and then we're going to send our response down

232
00:17:20,370 --> 00:17:23,860
below using response dot sent.

233
00:17:23,940 --> 00:17:25,200
What are we going to send back.

234
00:17:25,200 --> 00:17:28,690
I'll just send back something like your weather.

235
00:17:28,740 --> 00:17:29,820
Perfect.

236
00:17:29,820 --> 00:17:35,320
Now we have four routes in place and we can test things out over here in the browser.

237
00:17:35,340 --> 00:17:40,860
I'm going to switch from forward slash about to forward slash weather and what do I get.

238
00:17:40,860 --> 00:17:43,060
I get your weather showing up.

239
00:17:43,200 --> 00:17:44,520
So now we have a route.

240
00:17:44,520 --> 00:17:50,940
Page We have a health page and about page and a weather page and our little application is really coming

241
00:17:50,940 --> 00:17:52,770
together down below.

242
00:17:52,770 --> 00:17:58,410
I'm going to go ahead and delete the comments from earlier as well as the challenge comments and I'll

243
00:17:58,410 --> 00:18:05,100
wrap the video up by saving our file now that we have a basic express server in place.

244
00:18:05,100 --> 00:18:11,070
We're gonna be able to continue expanding off of this learning how we can render aid to the AML learning

245
00:18:11,070 --> 00:18:16,290
how we can render Jason or serve up assets from a directory on our machine.

246
00:18:16,290 --> 00:18:18,640
I'm excited to get to all of that and more.

247
00:18:18,720 --> 00:18:21,080
So let's jump right in to the next video.