WEBVTT 0 00:00.900 --> 00:08.580 Now in the last lesson, we looked at how we can use this app.get method, and using a callback function, 1 00:08.880 --> 00:17.100 we can tap into the request that was made to our server, and we managed to log it into our console, and 2 00:17.100 --> 00:23.970 then we looked at how we can send back a response that will get rendered on our browser. 3 00:24.270 --> 00:30.690 Now in this lesson, I want to talk more about this first parameter for our app.get method. 4 00:30.690 --> 00:34.830 Now you can see here we're targeting the home route. 5 00:34.850 --> 00:43.770 Now it's a little bit awkward, because in British English we pronounce route, as in R O U T E, as route, 6 00:44.130 --> 00:48.370 but that can also sound like root as in R O O T. 7 00:48.420 --> 00:54.510 So from now on I'm actually going to use the American pronunciation, which is very odd for me, but it 8 00:54.510 --> 00:59.830 might help you differentiate when I'm trying to say root or when I'm trying to say route. 9 00:59.850 --> 01:06.980 So from now on, when I say root I mean R O O T, when I say route I mean R O U T E. 10 01:07.140 --> 01:11.690 So I hope that makes it easier for you guys to figure out what it is I'm trying to convey. 11 01:12.000 --> 01:18.740 So this first parameter specifies the route that we are going to respond to. 12 01:18.750 --> 01:25.620 So that means when we get a get request from a browser that is targeting this route, which is the home 13 01:25.620 --> 01:29.440 route, then we're going to respond with this callback. 14 01:29.490 --> 01:32.510 Now we can respond to different routes. 15 01:32.520 --> 01:39.270 So for example, if I create another app.get method, and, instead of targeting the home route, I target maybe the 16 01:39.270 --> 01:41.390 contact route, 17 01:41.940 --> 01:44.900 so that simply is /contact, 18 01:44.910 --> 01:52.130 then I can create a callback that has a req and a res, request and a response, 19 01:52.350 --> 01:54.490 and I should really change this 20 01:54.540 --> 02:01.830 now that I've changed the parameter to res, and in this case our response is again going to be to send some 21 02:01.830 --> 02:11.410 information. And the information I'm going to send is simply, “Contact me at angela@gmail.com”. 22 02:11.450 --> 02:14.320 So now we've created another route. 23 02:14.370 --> 02:18.420 Now, as you can imagine, a lot of programming is all about forward planning. 24 02:18.420 --> 02:24.450 So it's kind of saying like what if somebody tried to go to our home page. 25 02:24.450 --> 02:26.950 Well then we're going to respond with this. 26 02:27.030 --> 02:30.660 Now what if somebody tried to go to the contact page. 27 02:30.780 --> 02:33.300 Well then in that case we'll respond with this. 28 02:33.300 --> 02:43.040 So if I hit save now, and I again quit my server, restart my server, and we go on to port 3000, 29 02:43.380 --> 02:49.170 then you can see that when I go to port 3000, this is my home route that I'm hitting up. 30 02:49.200 --> 02:52.990 It's making the request to this location. 31 02:53.070 --> 03:00.690 Now if I go to my contact route, so /contact, and I hit enter, then you can see I'm hitting 32 03:00.690 --> 03:02.230 up a different route, 33 03:02.490 --> 03:05.890 and that gets caught by these lines of code. 34 03:06.210 --> 03:13.050 And in that case my server sends back the information where it says, “Contact me at angela@gmail.com”, 35 03:13.560 --> 03:16.440 and that's what we see on our web page. 36 03:16.560 --> 03:22.980 So you can specify in this scenario what should happen, in this scenario what should happen, and you can 37 03:22.980 --> 03:28.020 start setting up the code for a lot of different routes. 38 03:28.020 --> 03:30.420 So now here's a challenge. 39 03:30.420 --> 03:38.490 I want you to create a new route so that when I go to the About page of my web site at localhost, I want 40 03:38.490 --> 03:41.950 to be able to see a quick brief bio for who you are, 41 03:41.970 --> 03:42.290 right? 42 03:42.300 --> 03:44.450 So this is like a personal page essentially. 43 03:44.490 --> 03:52.860 The home page just says, “Hello, world”, the contact page has my contact details, and then when I go to the 44 03:52.860 --> 03:58.850 About page it should now have a brief bio of who owns this web site. 45 03:58.890 --> 04:07.050 So go ahead and set up a new route for the About page and send back some information about yourself. 46 04:07.140 --> 04:12.480 So pause the video now and complete that challenge. 47 04:12.480 --> 04:12.810 All right. 48 04:12.810 --> 04:19.130 So we've already set up two routes, one for the home route and one for the contact route. 49 04:19.350 --> 04:21.460 So now we're going to set up a new one. 50 04:21.510 --> 04:28.200 And, again, we're going to target get requests that are made to the about route. 51 04:28.380 --> 04:36.150 And when that does happen, we're going to use a callback function with a request and a response. 52 04:36.150 --> 04:41.490 Now the response we're going to make is, again, we're going to send some information, and we're going to 53 04:41.490 --> 04:49.070 say, “My name is Angela and I love beer and code.” 54 04:49.080 --> 04:54.140 So now our server is able to respond to three routes. 55 04:54.240 --> 04:59.220 So if the user goes to our home page, this happens, if the user goes to our contact page, 56 04:59.220 --> 04:59.900 this happens, 57 04:59.990 --> 05:03.920 and if the user goes to the About page, then this should happen. 58 05:03.920 --> 05:07.850 So let's hit save, let's stop our server, 59 05:08.030 --> 05:12.700 start our server with the new code, and refresh. 60 05:12.920 --> 05:17.210 Now our About page has a response from our server. 61 05:17.450 --> 05:21.240 When we go to localhost:3000/about, we get back, 62 05:21.260 --> 05:24.980 “My name is Angela and I love beer and code.” 63 05:25.520 --> 05:32.360 So you can set up basically as many routes as you wish, and that means that you can start building up 64 05:32.360 --> 05:35.730 your web site to have a lot of different pages. 65 05:35.750 --> 05:41.690 For example, you can have a page about your hobbies, you can have a page about your CV, and you can see that 66 05:41.690 --> 05:44.930 this is a lot easier than creating a new index.html, 67 05:44.950 --> 05:52.040 about.html, a contact.html, that we were doing in the earlier modules when we're 68 05:52.040 --> 05:54.970 relying only on HTML. 69 05:55.010 --> 06:03.090 Now, just before I end this lesson, I want to show you something that I've kept to myself until now. 70 06:03.320 --> 06:11.210 Now I hope by this point you've realized that it's pretty painful to constantly having to end your server 71 06:11.300 --> 06:16.780 and restart your server every single time you add some new code to the 72 06:16.840 --> 06:17.780 server.js. 73 06:17.900 --> 06:25.730 Now if you head over to nodemon.io, this is a utility that you can install using NPM that will 74 06:25.790 --> 06:32.900 monitor for changes in your source code, and it will automatically restart your server when it detects 75 06:32.930 --> 06:34.610 any changes in your code. 76 06:34.610 --> 06:42.350 So this will save us from insanity, and all you have to do is just go into your Hyper Terminal, and type 77 06:42.500 --> 06:46.690 these commands ‘npm install -g nodemon’. 78 06:46.700 --> 06:49.020 Now it doesn't matter where you install this. 79 06:49.040 --> 06:51.070 It doesn't have to be inside your package. 80 06:51.080 --> 06:54.960 It can be in your root or in your home directory. 81 06:54.980 --> 06:59.420 Once you've installed it, it will be available across all of your projects. 82 06:59.420 --> 07:04.280 So let's head over to our terminal, and we can say ‘npm install -g 83 07:04.680 --> 07:14.840 nodemon’, and hit enter, and it will take a little while to install, and now when it's done we can go to 84 07:14.990 --> 07:20.380 the location where our server.js resides, which happens to be my-express-server, 85 07:20.570 --> 07:23.000 and then we can simply say ‘nodemon’ 86 07:23.090 --> 07:27.830 and then the file name of our server, which happens to be server.js. 87 07:27.920 --> 07:33.710 So now, once I hit enter, Nodemon activates, and it will start monitoring for changes. 88 07:33.710 --> 07:41.390 So if I go in here and I add another route, say app.get, let's say this is my hobbies page, and I have 89 07:41.390 --> 07:53.870 a callback, req, res, and we res.send maybe a ul that has a li, say something like coffee, 90 07:54.140 --> 07:55.690 code, 91 07:55.980 --> 08:05.230 and beer. So now that I'm done with my code, we need to watch over here. When I save my file here, 92 08:05.300 --> 08:11.110 so my shortcut is Command S, yours might be different depending on whether you're on Windows or Mac, 93 08:11.240 --> 08:19.910 but when I save this server.js file, then Nodemon will restart automatically, and it will keep to the port 94 08:19.970 --> 08:22.090 that we've specified in our server. 95 08:22.250 --> 08:29.710 So that means that my server is active and refreshed to the latest version of the code at all times, 96 08:30.080 --> 08:35.420 and I don't have to go through that painful process of Command C, restarting. It gets a little bit 97 08:35.420 --> 08:36.870 tiring after a while. 98 08:36.890 --> 08:38.670 So that is Nodemon. 99 08:38.930 --> 08:43.430 It will save your sanity and it's a really really cool tool to use. 100 08:43.460 --> 08:50.720 So, in this lesson, we learnt all about routes that we can set up to preempt what the user might try to 101 08:50.720 --> 08:53.810 navigate to using their browser. 102 08:53.840 --> 09:00.050 Now, in the next lesson, we're going to be building a calculator web site, and we're going to use what 103 09:00.050 --> 09:05.150 we learnt in these lessons so far to build a full web site. 104 09:05.180 --> 09:08.550 It's going to look pretty simple but it's going to work great. 105 09:08.600 --> 09:15.440 And in the process we'll see how we can get our server to do a lot of the code processing and make all 106 09:15.440 --> 09:19.750 of the code run on our backend rather than on our front end. 107 09:19.880 --> 09:22.990 So for all of that and more, I’ll see you on the next lesson.