1 00:00:03,680 --> 00:00:07,800 In the exercise in the previous lesson, 2 00:00:07,800 --> 00:00:13,940 we built a simple HTTP server that could serve up static content, 3 00:00:13,940 --> 00:00:17,825 this was built completely using Node.js. 4 00:00:17,825 --> 00:00:20,800 Now that we have learned about Express, 5 00:00:20,800 --> 00:00:27,700 the minimalist framework that supports development of server on top of Node.js, 6 00:00:27,700 --> 00:00:37,640 let's now examine how we can use Express to build the same server in this exercise. 7 00:00:37,640 --> 00:00:43,520 To get started, go to the Node.js folder that we have been using for storing 8 00:00:43,520 --> 00:00:51,540 all the code for this course and then,create a new folder there named node-express, 9 00:00:52,170 --> 00:00:56,170 and then move into this folder. 10 00:00:56,170 --> 00:00:59,315 Now, we will create 11 00:00:59,315 --> 00:01:06,815 a public folder here within the node express folder. 12 00:01:06,815 --> 00:01:14,645 Then, we will go to that node HTTP public folder and then copy these two files, 13 00:01:14,645 --> 00:01:20,835 the index.HTML and aboutus.html to the node-express public folder. 14 00:01:20,835 --> 00:01:23,660 We're going to serve up these two files using 15 00:01:23,660 --> 00:01:27,980 the Express server that we're going to build in this exercise. 16 00:01:27,980 --> 00:01:31,070 Now, going to the terminals. 17 00:01:31,070 --> 00:01:40,725 Move into the node-express folder in the terminal and then at the prompt type npm init, 18 00:01:40,725 --> 00:01:44,060 to initialize a node application. 19 00:01:44,060 --> 00:01:50,645 Then, for the package name let's just use node-express, 20 00:01:50,645 --> 00:02:00,725 and for the description we'll say Node Express Examples, 21 00:02:00,725 --> 00:02:04,685 and entry point is index.js, 22 00:02:04,685 --> 00:02:09,740 and all the rest of that same like before, 23 00:02:09,740 --> 00:02:14,520 and let's create the package.json file. 24 00:02:14,520 --> 00:02:17,290 Now, let me open 25 00:02:18,470 --> 00:02:26,525 the project using the editor Visual Studio Code in my case and then, 26 00:02:26,525 --> 00:02:35,950 in the package.json file let's go in and add in the new script called start, 27 00:02:35,950 --> 00:02:42,745 which is node index and save the changes. 28 00:02:42,745 --> 00:02:46,100 Now, that we have initialized the node module, 29 00:02:46,100 --> 00:02:50,060 let's go ahead and install the Express framework within 30 00:02:50,060 --> 00:02:54,985 the project to make use of it to build our express server. 31 00:02:54,985 --> 00:02:56,105 So, at the prompt, 32 00:02:56,105 --> 00:03:01,250 type npm install express. 33 00:03:01,250 --> 00:03:03,065 So this is how you would install 34 00:03:03,065 --> 00:03:07,280 a third-party node module if you are taking this course for 35 00:03:07,280 --> 00:03:11,060 the first time and have not taken the previous courses 36 00:03:11,060 --> 00:03:15,200 then this is something that is important to note. 37 00:03:15,200 --> 00:03:20,450 This is how you will install a node module by adding the minus minus save, 38 00:03:20,450 --> 00:03:23,435 we are also saving the information that 39 00:03:23,435 --> 00:03:27,380 this third-party node module is a dependency 40 00:03:27,380 --> 00:03:31,740 for our project and this information will be saved in the package.json file. 41 00:03:31,740 --> 00:03:34,835 If you have taken the previous courses of the specialization, 42 00:03:34,835 --> 00:03:38,110 then you already know about this information. 43 00:03:38,110 --> 00:03:44,000 So, let's go ahead and install the Express module. 44 00:03:44,000 --> 00:03:45,725 As you can notice, 45 00:03:45,725 --> 00:03:51,380 we are using Express version 4.16.3 in this course. 46 00:03:51,380 --> 00:03:54,875 So, let's now go back to our code. 47 00:03:54,875 --> 00:03:58,025 Taking a look at the package.json file, 48 00:03:58,025 --> 00:04:03,530 you see that within the package.json file by installing Express we already see 49 00:04:03,530 --> 00:04:10,265 another property that is included into the package.json file called dependencies. 50 00:04:10,265 --> 00:04:13,910 This dependencies track all the packages 51 00:04:13,910 --> 00:04:16,750 on which this current project is going to be dependent upon. 52 00:04:16,750 --> 00:04:20,870 Here you see Express being installed 53 00:04:20,870 --> 00:04:25,790 there and the corresponding version of Express being installed here, 54 00:04:25,790 --> 00:04:30,320 so this declares that this particular project is 55 00:04:30,320 --> 00:04:35,660 dependent upon Express version at least 4.16.3. 56 00:04:35,660 --> 00:04:41,870 In addition, you also see this folder called node modules created here. 57 00:04:41,870 --> 00:04:46,175 So this is where all the third-party node modules that are installed by 58 00:04:46,175 --> 00:04:51,600 your application are going to be stored. 59 00:04:51,600 --> 00:04:54,305 Now, when we do a Git commit, 60 00:04:54,305 --> 00:04:57,895 we don't want to commit this node modules folder. 61 00:04:57,895 --> 00:04:59,965 So to ignore that, 62 00:04:59,965 --> 00:05:02,980 lets create a file 63 00:05:02,980 --> 00:05:10,675 named.gitignore and within the.gitignore file, 64 00:05:10,675 --> 00:05:14,475 let's type in node_ modules. 65 00:05:14,475 --> 00:05:18,740 So, this is letting Git know that we do not wish to 66 00:05:18,740 --> 00:05:23,315 commit the node modules folder to the Git repository. 67 00:05:23,315 --> 00:05:25,580 So, with this let's save the changes. 68 00:05:25,580 --> 00:05:28,505 So now when you create a Git repository, 69 00:05:28,505 --> 00:05:30,945 the node modules folder will be ignored. 70 00:05:30,945 --> 00:05:36,710 It is not required because you can always recreate the node modules folder anytime 71 00:05:36,710 --> 00:05:42,980 you clone this project from your Git repository by simply typing npm install. 72 00:05:42,980 --> 00:05:46,405 This will look at the package.json file, 73 00:05:46,405 --> 00:05:48,065 and look at all the dependencies, 74 00:05:48,065 --> 00:05:51,720 and the development dependencies that are in the package.json 75 00:05:51,720 --> 00:05:55,905 file and are automatically installed all those packages for you. 76 00:05:55,905 --> 00:05:58,260 Now, that we have completed this, 77 00:05:58,260 --> 00:06:01,810 let's create our first Express project, 78 00:06:01,810 --> 00:06:09,350 so to do that we'll create a file named index.js and in the index.js 79 00:06:09,350 --> 00:06:19,190 we'll declare a const express require express. 80 00:06:19,190 --> 00:06:23,255 Now, you'll note that express is a third-party node module and it has been 81 00:06:23,255 --> 00:06:27,910 installed in our node modules folder in the correct directory. 82 00:06:27,910 --> 00:06:35,150 So, when we declare this here saying that this Express module is required, 83 00:06:35,150 --> 00:06:41,030 then it will be automatically included from the node modules folder into our application. 84 00:06:41,030 --> 00:06:46,145 Now, also install HTTP 85 00:06:46,145 --> 00:06:55,785 the core module here. 86 00:06:55,785 --> 00:06:57,585 Now, that we have installed this, 87 00:06:57,585 --> 00:07:04,165 let's create the course name as 88 00:07:04,165 --> 00:07:12,850 local host and port number as 3000. 89 00:07:12,850 --> 00:07:17,950 So you see that we are using exactly the same way of doing 90 00:07:17,950 --> 00:07:23,550 this exercise as we did for the HTTP exercise earlier. 91 00:07:23,550 --> 00:07:25,535 Now, at this point, 92 00:07:25,535 --> 00:07:32,560 we will declare this const called app as express. 93 00:07:32,560 --> 00:07:37,855 So this way, we are saying that our application is going to use the Express node module. 94 00:07:37,855 --> 00:07:39,620 So, once we do that, 95 00:07:39,620 --> 00:07:47,840 then Express provides a bunch of methods that we can use to construct our web server. 96 00:07:47,840 --> 00:07:53,335 So after this, we'll say app.use() and inside here, 97 00:07:53,335 --> 00:07:59,845 we will declare a function that will be called to set up our server. 98 00:07:59,845 --> 00:08:04,010 So, this function takes three parameters req, 99 00:08:04,010 --> 00:08:06,330 which is the request; res, 100 00:08:06,330 --> 00:08:09,850 which is the response, and next. 101 00:08:09,850 --> 00:08:19,310 Now, as we saw Express uses additional middleware. 102 00:08:19,310 --> 00:08:22,955 So, the next is used when you need to 103 00:08:22,955 --> 00:08:28,080 invoke additional middleware to take care of work on your behalf. 104 00:08:28,080 --> 00:08:32,930 We will see the use of next in some of the later exercises, 105 00:08:32,930 --> 00:08:38,350 but the function here will take three parameters req, res, and next. 106 00:08:38,350 --> 00:08:40,940 Next is an optional parameter that can 107 00:08:40,940 --> 00:08:46,755 be not included if you are not going to use it within your code. 108 00:08:46,755 --> 00:08:48,685 So, inside here we'll say, 109 00:08:48,685 --> 00:08:51,870 console log and then, 110 00:08:51,870 --> 00:08:57,165 we'll log that headers, 111 00:08:57,165 --> 00:09:07,840 and we'll respond with the status code set to 200. 112 00:09:11,120 --> 00:09:19,845 Set header content type 113 00:09:19,845 --> 00:09:25,870 as text HTML. 114 00:09:25,870 --> 00:09:29,150 So, you notice that much of this code looks very similar 115 00:09:29,150 --> 00:09:32,744 to the way we set up our node application. 116 00:09:32,744 --> 00:09:36,205 So, we'll say res.end and 117 00:09:36,205 --> 00:09:45,130 here HTML body h1. 118 00:09:47,760 --> 00:09:56,245 We'll just say this is an Express server and close off 119 00:09:56,245 --> 00:10:09,685 the tanks there, and that's it. 120 00:10:09,685 --> 00:10:14,970 From your understanding of the node HTTP, 121 00:10:14,970 --> 00:10:18,180 you already understand what these three are doing 122 00:10:18,180 --> 00:10:22,735 and the same thing is also done in the Express server. 123 00:10:22,735 --> 00:10:26,480 Now that we have set up the server using the App, 124 00:10:26,480 --> 00:10:30,715 we will set up the server, 125 00:10:30,715 --> 00:10:35,435 and then this is where we will use the HTTP createServer, 126 00:10:35,435 --> 00:10:44,415 and thus createServer is now going to take app as it's function parameter there, 127 00:10:44,415 --> 00:10:54,850 and thereafter, we'll simply say server.listen port, 128 00:10:54,850 --> 00:11:03,160 hostname and the arrow 129 00:11:03,160 --> 00:11:09,080 function here within which I'm going to print out, 130 00:11:12,560 --> 00:11:24,340 console, log back coat server running at HTTP://hostname:port, 131 00:11:38,560 --> 00:11:43,880 that's it. So you'll see that this part is very much similar 132 00:11:43,880 --> 00:11:48,515 to what you have done for the HTTP exercise, 133 00:11:48,515 --> 00:11:51,620 except that the createServer now takes this app, 134 00:11:51,620 --> 00:11:53,990 which we have declared earlier Express. 135 00:11:53,990 --> 00:11:58,120 So, Express is adding in additional functionality which will be 136 00:11:58,120 --> 00:12:03,460 used by the HTTP server that we create using note. 137 00:12:04,270 --> 00:12:06,540 Once we are done with this, 138 00:12:06,540 --> 00:12:08,265 let's save the changes, 139 00:12:08,265 --> 00:12:11,625 and then we will go ahead and start the server, 140 00:12:11,625 --> 00:12:14,900 and have a look at what the server will serve up. 141 00:12:14,900 --> 00:12:17,495 Going into the terminal, add the terminal, 142 00:12:17,495 --> 00:12:25,160 type NPM start and you will see that your server is up and running. 143 00:12:25,160 --> 00:12:30,645 Now when we access this from either the browser or from postman, 144 00:12:30,645 --> 00:12:33,160 you will see what it serves up. 145 00:12:33,160 --> 00:12:36,320 So, here I have Postman up and money. 146 00:12:36,320 --> 00:12:41,425 Let me send the GET request to localhost 3,000 just like before 147 00:12:41,425 --> 00:12:47,545 and you will see that this is serving up the HTML code that we include in there, 148 00:12:47,545 --> 00:12:50,655 and so this is an Express server. 149 00:12:50,655 --> 00:12:52,075 Clicking on the preview, 150 00:12:52,075 --> 00:12:56,460 this will show you what it will look like in a browser, 151 00:12:56,970 --> 00:13:03,490 and this shows the raw version of the code that has been sent back from the server side, 152 00:13:03,490 --> 00:13:06,905 and you can see that the status code is 200, okay? 153 00:13:06,905 --> 00:13:13,560 And the other header information vector has been sent from the server site. 154 00:13:13,560 --> 00:13:20,190 Notice in particular it says x powered by Express in the header. 155 00:13:20,190 --> 00:13:24,110 With this, we complete the first part of this exercise where we have seen 156 00:13:24,110 --> 00:13:29,535 how we can make use of Express to set up a simple web server. 157 00:13:29,535 --> 00:13:35,540 Let me now stop the server and then initialize the Git repository, 158 00:13:35,540 --> 00:13:40,330 so at the prompt I will type "git init" and 159 00:13:40,330 --> 00:13:48,030 then "git status" and you'll see that files that have been untracked, 160 00:13:48,030 --> 00:13:55,805 so I will say "get and dropped" and these files are now added into the Git repository, 161 00:13:55,805 --> 00:13:57,750 and so when you say git status, 162 00:13:57,750 --> 00:13:59,780 you see the files that have been added. 163 00:13:59,780 --> 00:14:02,610 Note in particular that the node modules folder 164 00:14:02,610 --> 00:14:05,750 has not been added to the Git repository because in 165 00:14:05,750 --> 00:14:09,310 the.gitignore file we explicitly stated that 166 00:14:09,310 --> 00:14:14,035 the node modules folder should not be included in the Git repository. 167 00:14:14,035 --> 00:14:19,905 So now, let's check in our commit exchange by saying git 168 00:14:19,905 --> 00:14:28,095 commit minus m Express example, 169 00:14:28,095 --> 00:14:32,285 and we have committed this to our Git repository. 170 00:14:32,285 --> 00:14:34,820 In the second part of this exercise, 171 00:14:34,820 --> 00:14:40,975 we will look at the use of Express middleware called Morgan. 172 00:14:40,975 --> 00:14:46,390 Morgan is used to log information to the screen, 173 00:14:46,390 --> 00:14:50,640 so it'll log information about incoming requests to the screen so that we 174 00:14:50,640 --> 00:14:55,185 can see some information being printed in our console here. 175 00:14:55,185 --> 00:15:02,290 Also, we will see how we can set up our Express server to serve up static HTML files. 176 00:15:02,290 --> 00:15:06,740 To get started, at the prompt type npm 177 00:15:06,740 --> 00:15:13,505 install Morgan minus, minus save. 178 00:15:13,505 --> 00:15:18,650 Now, Morgan is going to be a dependency that we're going to be using in our Application. 179 00:15:18,650 --> 00:15:20,390 So, that's why it's minus, 180 00:15:20,390 --> 00:15:24,530 minus save and this would get Install, 181 00:15:24,530 --> 00:15:32,260 and you can see that I'm using Morgan version 1.9.0 in this course. 182 00:15:32,260 --> 00:15:34,735 Now that we have installed Morgan, 183 00:15:34,735 --> 00:15:38,650 let's see how we can make use of it within our Application. 184 00:15:38,650 --> 00:15:40,615 So going to our Application, 185 00:15:40,615 --> 00:15:47,235 the way to make use of Morgan is to declare here 186 00:15:47,235 --> 00:15:57,015 const Morgan require Morgan, 187 00:15:57,015 --> 00:16:01,470 and then we'll say, 188 00:16:01,470 --> 00:16:10,665 "App use Morgan with the development". 189 00:16:10,665 --> 00:16:12,820 So, this is the development version. 190 00:16:12,820 --> 00:16:18,045 So, it will print out additional information to the screen as required. 191 00:16:18,045 --> 00:16:21,400 Now, going into our application. 192 00:16:21,990 --> 00:16:28,460 Within our application, I'm not going to log the entire headers. 193 00:16:28,460 --> 00:16:32,500 Instead, let me remove this because Morgan will 194 00:16:32,500 --> 00:16:37,750 log sufficient information for us to look at, 195 00:16:37,750 --> 00:16:47,695 and I'm going to set up my server to serve up the HTML files from the public folder. 196 00:16:47,695 --> 00:16:48,945 So to do this, 197 00:16:48,945 --> 00:16:56,660 I'm going to declare up use and express static. 198 00:16:56,660 --> 00:17:06,265 This tells Express to serve up the static files from double underscore dirname. 199 00:17:06,265 --> 00:17:13,735 So, this says the root of 200 00:17:13,735 --> 00:17:19,430 this project and they will find those files 201 00:17:19,430 --> 00:17:25,605 in double_dirname, plus/ public. 202 00:17:25,605 --> 00:17:30,355 So, recall that we created the public folder in the node Express folder. 203 00:17:30,355 --> 00:17:35,845 So, this is informing Express that you will look at 204 00:17:35,845 --> 00:17:42,630 this particular folder in the root folder of this project and inside the public folder. 205 00:17:42,630 --> 00:17:45,985 So, this will be the folder from which 206 00:17:45,985 --> 00:17:52,530 static HTML files will be served up by my Express server. 207 00:17:52,530 --> 00:17:54,155 After making these changes, 208 00:17:54,155 --> 00:17:55,660 let's save the changes, 209 00:17:55,660 --> 00:17:58,615 and then restart our server, 210 00:17:58,615 --> 00:18:01,480 and then see how it works. 211 00:18:01,480 --> 00:18:04,495 Going to that prompt, 212 00:18:04,495 --> 00:18:08,520 let's type npm start, 213 00:18:08,520 --> 00:18:10,510 to start our server, 214 00:18:10,510 --> 00:18:12,985 and once the server is up and running, 215 00:18:12,985 --> 00:18:18,960 let's examine what it will serve up when we send various requests to this server. 216 00:18:18,960 --> 00:18:24,200 Using Postman, let's first send a get request to local host:3,000 217 00:18:24,200 --> 00:18:32,545 and you'll notice that it is serving up the index.html file. 218 00:18:32,545 --> 00:18:38,795 We have set up our server to serve up static files from the public folder, 219 00:18:38,795 --> 00:18:43,190 and if we just say localhost:3000 by default, 220 00:18:43,190 --> 00:18:45,060 it'll serve up the index.html file. 221 00:18:45,060 --> 00:18:48,685 So, this is how your typical Web server works. 222 00:18:48,685 --> 00:18:53,440 So, that's what we have ended up setting up our express server to do. 223 00:18:53,440 --> 00:19:01,735 Now, let's type in localhost:3000 about.html and send the request, 224 00:19:01,735 --> 00:19:04,280 and says this is about our strategy HTML, 225 00:19:04,280 --> 00:19:07,660 and also the about us HTML file has been saved up here. 226 00:19:07,660 --> 00:19:09,145 So in the preview, 227 00:19:09,145 --> 00:19:14,710 you can see the resulting file that has been served up from our server site. 228 00:19:14,710 --> 00:19:20,020 Let's try to access a non-existent file 229 00:19:20,020 --> 00:19:25,755 and you'll see that when you try to access a non-existent file, 230 00:19:25,755 --> 00:19:31,995 then it will default to the second setup that we have done in our code, 231 00:19:31,995 --> 00:19:34,175 which says this is an Express server. 232 00:19:34,175 --> 00:19:37,790 We have not specified to our Express server how to handle 233 00:19:37,790 --> 00:19:42,830 situations where it encounters a file that doesn't exist. 234 00:19:42,830 --> 00:19:50,450 So, that is why it is using the default that have set up right below the Express static, 235 00:19:50,450 --> 00:19:53,680 which is to serve up the default value, and of course, 236 00:19:53,680 --> 00:19:57,335 this is not the most ideal behavior 237 00:19:57,335 --> 00:20:00,845 but that's what we have in the Express server at this moment. 238 00:20:00,845 --> 00:20:04,940 Later on, we will modify the Express server to handle 239 00:20:04,940 --> 00:20:10,215 errors in more detail, in later exercises. 240 00:20:10,215 --> 00:20:14,780 This is also a good time for you to do a Git commit of the changes. 241 00:20:14,780 --> 00:20:20,760 So, let's check Git status after stopping the server, 242 00:20:20,760 --> 00:20:25,925 and we'll add the modified files, 243 00:20:25,925 --> 00:20:29,189 and then do Git commit 244 00:20:29,189 --> 00:20:36,880 minus m Express, 245 00:20:36,880 --> 00:20:44,125 serve static files. 246 00:20:44,125 --> 00:20:46,030 That's it. With this, 247 00:20:46,030 --> 00:20:48,015 we complete this exercise. 248 00:20:48,015 --> 00:20:50,540 In this exercise, we have seen how we can set up 249 00:20:50,540 --> 00:20:55,460 a simple web server to serve up content on our behalf.