WEBVTT 0 00:00.430 --> 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 00:05.190 --> 00:08.820 to build your own server, we’re finally actually going to do it this time. 2 00:09.000 --> 00:14.250 So, in this lesson, we're going to learn how to create a real server locally on our computer using 3 00:14.250 --> 00:16.220 Node.js and Express. 4 00:16.230 --> 00:17.510 Now first things first. 5 00:17.550 --> 00:21.780 I've got my Hyper Terminal open and I've got Atom open next to it as well. 6 00:21.810 --> 00:28.000 So the first thing I want to do is we're going to remove the intro-to-node project directory 7 00:28.020 --> 00:29.650 if you still have it there, 8 00:29.670 --> 00:32.220 so we start off with a clean slate. 9 00:32.460 --> 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 00:38.330 --> 00:41.900 so that means I'm in the home directory of my Mac book. 11 00:42.030 --> 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 00:48.600 --> 00:50.410 at the same position. 13 00:50.610 --> 00:53.070 And here comes a challenge. 14 00:53.130 --> 00:58.170 So, using what you learned in the last module, all about how to use the command line, 15 00:58.380 --> 01:04.190 I want you to complete this challenge by yourself and to create a new directory, 16 01:04.410 --> 01:10.760 and we're going to call it my-express-server, and then I want you to cd into that directory. 17 01:10.790 --> 01:18.180 Then inside that project folder, I want you to create a new file called server.js, and I want you 18 01:18.180 --> 01:19.910 to initialize npm. 19 01:20.010 --> 01:25.130 And when you are initializing npm, I want you to set the starting point as server.js. 20 01:25.290 --> 01:29.010 So pause the video now and see if you can complete that challenge. 21 01:31.510 --> 01:31.770 All right. 22 01:31.780 --> 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 01:37.370 --> 01:37.860 desktop. 24 01:38.050 --> 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 01:46.900 --> 01:47.500 here, 26 01:47.530 --> 01:53.590 I'm going to create a new directory, and I do that of course using the mkdir keyword, 27 01:53.740 --> 01:57.600 and then I'm going to call it my-express-server. 28 01:58.330 --> 01:59.280 So bam. 29 01:59.290 --> 02:01.380 There it is. Created. 30 02:01.420 --> 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 02:09.750 --> 02:10.340 server.js. 32 02:10.370 --> 02:13.260 So, to create a new file the keyword is, of course, touch. 33 02:13.330 --> 02:17.770 And then I create my server.js, which is the name of the file. 34 02:17.950 --> 02:22.420 So this is a brand new Javascript file that I've just created out of thin air. 35 02:22.420 --> 02:29.460 Now, while we’re inside my-express-server, this directory, we're going to initialize npm. 36 02:29.530 --> 02:32.960 So the keyword for that is npm init. 37 02:33.010 --> 02:34.930 And we're going to hit enter. 38 02:34.930 --> 02:40.310 And now we can go through the process of setting up our NPM. 39 02:40.360 --> 02:46.230 So the package name is going to be called my-express-server. That’s fine. Version is 1.0.0. 40 02:46.390 --> 02:54.270 Description, let's call it, “My first express server.” Entry point is server.js. 41 02:54.420 --> 02:56.790 That’s exactly what we want. 42 02:57.070 --> 03:03.640 And test command we’ll ignore. Git repository we’ll ignore. Keywords ignore. Author, we'll just add our own 43 03:03.640 --> 03:11.050 name. License. And now they've compiled our package.json, and let's just take a look at it. Looks 44 03:11.050 --> 03:11.790 fine to me. 45 03:11.800 --> 03:14.110 So let's hit enter for yes. 46 03:14.320 --> 03:19.230 And now we have our package.json and our server.js ready set up. 47 03:19.240 --> 03:24.940 So this is basically the process that you will go through every single time you create a new web development 48 03:24.940 --> 03:25.850 project. 49 03:25.870 --> 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 03:30.490 --> 03:31.480 to do. 51 03:31.960 --> 03:32.250 All right. 52 03:32.260 --> 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 03:38.320 --> 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 03:45.030 --> 03:48.500 that you want to add to Atom as the project folder, 55 03:48.760 --> 03:52.240 and then you're going to write atom . 56 03:52.480 --> 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 03:59.590 --> 04:01.930 can get started coding up over here. 58 04:02.080 --> 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 04:07.810 --> 04:13.460 line is super duper powerful, and it is literally going to become your best friend. 60 04:13.540 --> 04:16.740 So the next step is to install 61 04:16.760 --> 04:22.250 Express. And what do we always do when we use something new? We check out its documentation. 62 04:22.360 --> 04:26.870 So the documentation for Express is on a web site called expressjs.com. 63 04:27.010 --> 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 04:32.560 --> 04:33.910 instructions for you. 65 04:33.970 --> 04:36.540 So we've already completed the first few steps. 66 04:36.580 --> 04:38.440 We've created a new directory. 67 04:38.440 --> 04:40.170 We've initialized NPM. 68 04:40.270 --> 04:44.770 We've set our entry point and we're now going to install 69 04:44.770 --> 04:45.640 Express. 70 04:45.880 --> 04:52.120 Now you can see that they've got this command ‘npm install express - - save’. Now, as they explain 71 04:52.120 --> 05:00.790 down here, what ‘ - - save’ basically does is it adds Express into your packages.json under the 72 05:00.790 --> 05:01.930 dependencies. 73 05:01.990 --> 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 05:08.950 --> 05:14.950 above, which we're definitely using, we’re using node 10 in this course, way into the future, 75 05:15.100 --> 05:17.400 you don't actually need this flag, 76 05:17.440 --> 05:19.260 it’s done by default. 77 05:19.270 --> 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 05:27.610 --> 05:35.260 inside, again, our directory that we're working with, and then we're going to say ‘npm install express’. 79 05:35.300 --> 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 05:41.350 --> 05:48.620 will add the Node modules that Express requires, as well as Express itself. 81 05:48.670 --> 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 05:55.330 --> 05:57.510 added, which is Express. 83 05:57.520 --> 06:00.680 Now this is the current latest version of Express, 84 06:00.790 --> 06:06.300 but in the future when you’re taking this course, it might be 4.17 or 5.0, 85 06:06.430 --> 06:07.420 that’s completely fine. 86 06:07.420 --> 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 06:12.640 --> 06:13.420 version. 88 06:13.690 --> 06:18.840 So I will be time traveling into the future and changing the course in case there are any issues. 89 06:18.910 --> 06:24.690 So rest assured, everything that you're watching, everything I'm telling you to do, is going to work. 90 06:24.700 --> 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 06:32.290 --> 06:37.640 to ‘Getting started’ and going to the ‘Hello world example’. 92 06:37.870 --> 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 06:44.110 --> 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 06:49.630 --> 06:50.220 version. 95 06:50.380 --> 06:53.020 So let's head over to our server.js. 96 06:53.020 --> 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 07:01.420 --> 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 07:07.360 --> 07:12.760 a comment called ‘jshint esversion:6’ 99 07:13.000 --> 07:18.220 to make that warning go away and tell our linter that we are using 100 07:18.310 --> 07:19.640 ES6. 101 07:19.660 --> 07:27.430 All right. So now that we've required and incorporated Express into our file, the next step is to create 102 07:27.490 --> 07:34.810 a new constant called app, and this is simply a function that represents the Express module, and we bind 103 07:34.810 --> 07:36.650 that to the word app. 104 07:36.880 --> 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 07:44.980 --> 07:52.390 you come across web sites built using Express, the word app is usually always used when you're referring 106 07:52.390 --> 07:55.310 to the Express module, like so, 107 07:55.570 --> 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 08:00.940 --> 08:04.360 easier for other people to understand what's going on in your code. 109 08:04.360 --> 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 08:10.930 --> 08:13.240 of its methods called listen. 111 08:13.570 --> 08:22.570 And this tells it to listen on a specific port for any HTTP requests that get sent to our server. 112 08:22.870 --> 08:29.090 So I'm going to choose the port 3000, and if we hit save, 113 08:29.140 --> 08:33.900 now we have literally just built our very first server. 114 08:34.120 --> 08:37.030 This is the bare bones of an Express server. 115 08:37.030 --> 08:44.030 Now let's go into Hyper and let's run this server by saying node server.js, 116 08:44.080 --> 08:50.320 hit enter, and you can see that not much is happening, other than the fact that it seems like our 117 08:50.320 --> 08:51.700 command line is hanging. 118 08:51.700 --> 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 08:58.270 --> 09:00.170 like this, ‘Angelas-Macbook-Pro: 120 09:00.190 --> 09:05.590 my-express-server angelayu’ and the prompt, which is of course that dollar sign. 121 09:05.620 --> 09:07.690 Now we don't get the prompt here. 122 09:07.690 --> 09:12.820 The reason is because it's listening on this port that we specified. 123 09:12.820 --> 09:17.270 Now a port is basically just a channel that we've tuned our server to. 124 09:17.500 --> 09:22.960 So, for example, sometimes I listen to the radio, and I tune my radio to listen to 104.9FM, 125 09:22.960 --> 09:28.780 and our server is just tuned into the channel 3000. 126 09:28.990 --> 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 09:35.410 --> 09:37.360 and hitting Control C. 128 09:37.660 --> 09:42.340 Now, you're going to get yourself out of a lot of hairy situations by using Control C. 129 09:42.370 --> 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 09:50.380 --> 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 09:58.060 --> 10:00.030 a callback function to this method 132 10:00.030 --> 10:08.770 listen. So we can add an anonymous function, and we're going to callback using a console.log saying, “Server 133 10:08.770 --> 10:15.430 started on port 3000”, which is the one that we specified here. 134 10:15.430 --> 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 10:24.370 --> 10:29.830 it's telling us that server has started on port 3000. 136 10:29.830 --> 10:36.940 Now if we head over to that ports location, which is localhost:3000, because we're hosting our server 137 10:36.940 --> 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 10:44.530 --> 10:49.210 see that we get this error, where it says, “Cannot GET /“. 139 10:49.210 --> 10:50.970 Now what does that mean? 140 10:51.160 --> 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 10:58.300 --> 11:01.660 not able to get anything back. 142 11:01.660 --> 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 11:09.280 --> 11:11.370 a request to our server. 144 11:11.560 --> 11:15.550 We have to send the browser some information, right, to display. 145 11:15.760 --> 11:17.350 So, in the next lesson, 146 11:17.350 --> 11:18.630 that’s what we're going to be learning about. 147 11:18.640 --> 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 11:26.110 --> 11:29.110 So for all of that and more, I’ll see you on the next lesson.