WEBVTT 0 00:00.690 --> 00:01.400 All right guys. 1 00:01.410 --> 00:03.930 So how did that go? 2 00:04.340 --> 00:09.990 So, the first thing we're going to do is we're going to delete any projects that are open inside Atom and 3 00:10.020 --> 00:16.860 open up a brand new Hyper Terminal that is at our home location, which is represented by the little tilde 4 00:16.860 --> 00:17.890 squiggly line. 5 00:18.180 --> 00:23.460 So now that we've got everything clear and ready to go, the first thing we're going to do is we're going 6 00:23.460 --> 00:30.390 to cd into our desktop, or cd to any location you wish, and we're going to create our new directory, that's 7 00:30.390 --> 00:32.510 going to be called Calculator. 8 00:33.090 --> 00:37.800 So now that we've got our Calculator directory, we're going to cd to it, 9 00:37.800 --> 00:44.460 and inside here we're going to create a new file called calculator.js. 10 00:44.700 --> 00:50.940 So now that we've got our file and our directory ready to go, we're going to initialize NPM with npm 11 00:51.030 --> 00:57.100 init. And the name is going to be called calculator, version, description, 12 01:02.230 --> 01:04.050 entry point is going to be at calculator.js, 13 01:04.060 --> 01:09.450 author is myself, 14 01:09.600 --> 01:12.680 and we're going to hit enter to create that. 15 01:12.690 --> 01:18.180 All right. So now that we've created it, we're going to open this project inside Atom with 16 01:18.290 --> 01:19.030 atom . 17 01:19.170 --> 01:24.880 And now we're going to install Express with npm install express. 18 01:25.170 --> 01:29.930 So this is the workflow that you’re going to be going through every single time you create a new web site, 19 01:29.940 --> 01:34.370 so it's really good to just get it into your bones and get familiar with it. 20 01:34.380 --> 01:42.110 So in our package.json, we now have a single dependency that is express, and we can now go into our calculator.js 21 01:42.130 --> 01:45.510 and we can require it. 22 01:45.510 --> 01:48.580 So we're going to create a new const called express. 23 01:48.690 --> 01:51.960 This is going to be set to require express, 24 01:55.420 --> 02:05.280 and I'm going to add that comment up here, jshint esversion:6. 25 02:05.450 --> 02:14.770 So now that we've got our const express, then we're going to set up a new app that is going to be using 26 02:14.800 --> 02:16.610 the express module. 27 02:16.900 --> 02:23.990 And finally I wanted you to create a home route, so that's going to be app.get. 28 02:24.100 --> 02:25.950 We're going to target the home route. 29 02:26.170 --> 02:32.080 And then we're going to have a callback function with a request and a response, and we're simply going 30 02:32.080 --> 02:38.170 to respond by sending, “Hello world!” 31 02:38.200 --> 02:44.890 So now that we've defined our route, then we're going to spin up our server, and we do that with app.listen, 32 02:44.920 --> 02:51.250 and we're going to listen again on port 3000, and then we're going to have a callback 33 02:51.520 --> 02:59.120 that simply logs that the server is running on port 3000. 34 02:59.820 --> 03:00.180 All right. 35 03:00.220 --> 03:07.500 So now that we've set up our home route, we've got our app to listen on port 3000. 36 03:07.510 --> 03:13.630 Now you can choose any other port, by the way. You can choose 4040, 8080, 5000, whatever you 37 03:13.630 --> 03:14.650 wish. 38 03:14.830 --> 03:21.030 And you can head over there with localhost comma whatever port you chose to see it. 39 03:21.160 --> 03:25.420 But 3000 is the most commonly used port when people are developing locally, 40 03:25.420 --> 03:27.910 so that's what we're going to be using as well. 41 03:27.910 --> 03:32.190 So we're now pretty much ready to run and spin up our server. 42 03:32.200 --> 03:38.970 So let's head over to the command line, making sure that we're inside the project that contains our calculator.js. 43 03:39.010 --> 03:42.760 We’re going to use Nodemon to spin up our 44 03:42.770 --> 03:43.610 calculator.js. 45 03:43.610 --> 03:51.730 And if at any point during the code writing process you have made a mistake, then you can see that, 46 03:51.730 --> 03:58.720 just as we had errors logging in the Chrome Developer Tool Console, our command line will also show us 47 03:58.870 --> 03:59.930 any errors. 48 04:00.100 --> 04:06.190 And in this case it's telling me that expres with a single s is not defined. And this is one of the 49 04:06.190 --> 04:13.480 most common thing that happens when you misspell, or you make a typo, or you forget to make a particular 50 04:13.480 --> 04:19.140 word capitalized when it should be, then it will say something something is not defined. 51 04:19.150 --> 04:23.800 This just means that it doesn't know what you're talking about. It doesn't know what expres with a single 52 04:23.800 --> 04:25.060 s is. 53 04:25.120 --> 04:32.090 And it also point to you to the line of your code where this occurs, and that is on calculator.js 54 04:32.110 --> 04:39.660 line number 5, and the little arrow points to the specific thing that is offending it. 55 04:39.670 --> 04:46.000 So let's head over to our calculator.js file line number five, and we can see that we've forgotten 56 04:46.090 --> 04:47.450 an s here. 57 04:47.710 --> 04:51.800 So now let's save and we've corrected that. 58 04:51.910 --> 04:59.230 And Nodemon automatically restarts our server with the changes, and it's now all green, and we get a log 59 04:59.290 --> 05:03.480 statement saying, “Server is running on port 3000.” 60 05:03.490 --> 05:06.150 So let's head over to 61 05:06.210 --> 05:07.520 localhost:3000. 62 05:07.620 --> 05:11.690 And there it is. Our server is running on port 3000, 63 05:11.700 --> 05:15.860 our home route is working, and we're using Express to do all of that. 64 05:16.060 --> 05:21.990 So that was a quick recap of everything that we've done so far in the form of a challenge. 65 05:22.180 --> 05:28.240 I hope it was all right for you guys, and you didn't make typos like I did, and you figured out how to 66 05:28.240 --> 05:29.990 debug your web site 67 05:30.010 --> 05:33.130 based on the messages you get in the console. 68 05:33.130 --> 05:40.190 So in the next lesson, we're going to be creating some HTML forms which we will add to our web site. 69 05:40.210 --> 05:42.970 So for all of that and more, I'll see you on the next lesson.