WEBVTT 00:00.100 --> 00:00.560 OK. 00:00.750 --> 00:02.730 So we saw expressway introduced it. 00:02.730 --> 00:07.320 Now let's get down to work to install it and let's make our first simple web. 00:07.430 --> 00:09.080 And I don't want to get your hopes up too much. 00:09.090 --> 00:15.810 This web app is going to be very very bare bones basically will be a web site you hit enter or you go 00:15.810 --> 00:21.810 to the you are l and we just get a single message back saying what everyone can Gretz or hello or something 00:22.620 --> 00:23.590 nice and simple. 00:23.790 --> 00:29.310 But the difference between doing that and then responding with I don't know a big beautiful Web site 00:29.310 --> 00:35.310 with images and big text animations isn't that much as far as the code we have to write on the backend 00:35.370 --> 00:37.000 which is what we're focusing on now. 00:37.050 --> 00:42.200 It's the same idea you respond with some some content what you respond with that's a different story. 00:42.470 --> 00:43.150 OK. 00:43.620 --> 00:50.910 So don't run this is a big red red letter say but to install express like we've installed faker or re-installed 00:50.910 --> 00:55.850 the Myers QOL package you just run NPM install and then the name of the package. 00:55.950 --> 00:58.530 However rather than doing this this will work fine. 00:58.530 --> 00:59.650 It will install. 00:59.670 --> 01:02.740 I'm going to show you another way of using NPM. 01:02.850 --> 01:08.310 That's a little bit nicer or a better practice and it involves running this first command. 01:08.580 --> 01:10.080 What does this do. 01:10.230 --> 01:14.200 NPM and it creates what's known as a package that japes on file. 01:14.530 --> 01:17.700 So if that doesn't make any sense to you don't worry. 01:17.700 --> 01:23.190 Basically when you make a new project let's say we're working on a big node project within it like a 01:23.190 --> 01:27.420 web app and our web app might have 20 packages involved. 01:27.420 --> 01:31.680 So we're only working with the couple right now but it could have 20 involved rather than just installing 01:31.680 --> 01:36.460 them individually and leaving no record of what's been installed and what version has been installed. 01:36.540 --> 01:42.840 What we can do is create a package that just on file and it acts as like a log file of everything we 01:42.850 --> 01:48.450 install so that if I send my code to someone else across the world our posts don't get how. 01:48.450 --> 01:55.350 For example all the person has to do to run it is take that packet Jaison and then run a single command 01:55.530 --> 02:01.980 NPM install which will then go find the packet adjacent in and install every necessary package. 02:01.980 --> 02:03.250 So let me show you an example. 02:03.540 --> 02:07.150 This is actually the Get Home Depot for Express. 02:07.230 --> 02:12.660 Yes the framework we're about to install which is itself it's a node package and there's a package not 02:12.660 --> 02:14.480 just on file in it. 02:14.610 --> 02:18.510 If you look there's this giant dependency section. 02:18.510 --> 02:21.270 These are all different packages that express needs. 02:21.270 --> 02:26.400 So when we install express it goes and installs all of these things as well. 02:26.520 --> 02:28.660 So we don't have to do it right. 02:28.710 --> 02:34.680 If this package that Jason wasn't here we would have to manually install array flatten and Content-Disposition 02:34.680 --> 02:35.560 and KOKI. 02:35.580 --> 02:39.430 Thankfully we don't even have to worry about what these do let alone the fact that they exist. 02:39.720 --> 02:42.180 So that's the point of the package that Jason. 02:42.420 --> 02:49.320 It's a way of storing not only the packages that are necessary within the version because this version 02:49.320 --> 02:53.450 of express might be totally broken if we used 0.6. 02:53.460 --> 02:58.550 If that exists or escape each time L is zero point zero point three instead of one point zero point 02:58.550 --> 02:59.060 three. 02:59.460 --> 03:01.170 So that all we'll say about it for now. 03:01.500 --> 03:07.650 But to actually create the package based on what I'm going to do is first make a brand new folder just 03:07.650 --> 03:09.440 so that we're working in a different folder. 03:09.530 --> 03:10.960 And I'm going to just call this one. 03:11.040 --> 03:16.920 Join us and that's where we'll be building the application to everything else we've done up until now 03:17.250 --> 03:19.240 has actually been building the app. 03:19.350 --> 03:29.080 So what I'll do is now CD into join us with the terminal down here and it should be empty. 03:29.080 --> 03:32.520 If I type LS we're now in this directory there's nothing there. 03:32.690 --> 03:38.860 So we're going to run this NPM init command and this will just generate a new package. 03:38.880 --> 03:39.780 Jason. 03:39.800 --> 03:44.900 However it's interactive so it's going to ask for a name and what you can do is just hit enter if you 03:44.900 --> 03:48.170 want it to just accept what it is the default value is. 03:48.380 --> 03:53.880 But if I hit Enter now I'll get a message saying sorry name can no longer contain capital letters so 03:53.880 --> 04:02.410 let's do join us underscore version will say it's 1.0 over at that's fine description and we can leave 04:02.410 --> 04:03.350 it blank for now. 04:03.460 --> 04:06.050 Entry point I like to change to app japes. 04:06.190 --> 04:10.850 This is just the name of the file that we're writing or app in or the main file of her app. 04:10.870 --> 04:11.890 We could have 20 files. 04:11.890 --> 04:14.880 But what's the start point index is fine too. 04:14.890 --> 04:18.830 But I'm going to do app then I'm just going to hit enter until we're done. 04:18.850 --> 04:20.390 You could put author in there as well. 04:20.620 --> 04:24.830 And the license then you can see the basic text it generates for us. 04:24.830 --> 04:28.630 Jason just a data format and all that enter. 04:28.630 --> 04:34.520 Now I have a package that Jason File appear and it's ready for us to install things. 04:34.540 --> 04:40.570 So now what I'm going to do is run NPM install express but not on its own. 04:40.560 --> 04:47.820 I'm going to add dash dash save and that will save a record of our install into our package. 04:47.910 --> 04:56.730 Jason So right now it's not here but if I do NPM install express dash dash save like that takes a moment. 04:56.910 --> 05:01.650 You'll see first of all we have our node modules now instead of join us so we installed it in this directory 05:01.800 --> 05:05.130 which is set then in our package that Jaison. 05:05.130 --> 05:10.770 We now have Express saying 4.1 5.2 is our version. 05:10.770 --> 05:19.600 And while we're here why not also just reinstall NPM install two other packages we need for our app. 05:19.680 --> 05:21.960 The first one is faker. 05:22.230 --> 05:23.370 And then the second is my ask. 05:23.370 --> 05:26.210 Well you can just separate them by spaces and add dash dash. 05:26.220 --> 05:30.500 Save and it will just add both of them in here too. 05:30.780 --> 05:31.560 Not a deal breaker. 05:31.560 --> 05:36.060 We already have installed them on this machine but it's nice to have them in this directory too and 05:36.060 --> 05:39.450 also have records of them in our pack stuff Jason. 05:39.450 --> 05:45.480 So now if I wanted to upload this to get hubby or something and share this with someone I wouldn't have 05:45.480 --> 05:51.290 to you know send them the node modules folder and send them the actual express directory and faker in 05:51.290 --> 05:56.850 my ask you if I could ignore that because this is the largest part of our directory structure right 05:56.850 --> 05:57.050 now. 05:57.050 --> 06:03.210 This I don't know how many megabytes it is but it's a lot more than the single file or our sim or single 06:03.210 --> 06:04.250 app J.S. file. 06:04.350 --> 06:09.900 So it's better to just have our friends or other developers download what they need remotely. 06:10.170 --> 06:13.950 So I just send them this recipe that says oh by the way you need these three things. 06:13.950 --> 06:16.730 Here's my code plus the package Jason. 06:16.770 --> 06:21.090 Then they go take package Jason and they install these things. 06:21.330 --> 06:26.520 And the way that you do that by the way is running NPM install and you don't add anything afterwards. 06:26.580 --> 06:30.170 It will try and install everything in the nearest package that Jason. 06:30.470 --> 06:31.350 All right. 06:31.450 --> 06:33.450 So we have expressed installed. 06:33.450 --> 06:34.560 We don't have an app yet. 06:34.560 --> 06:38.590 Not even an app Jasc file but we have a structure that we need to create the app.