WEBVTT 0 00:00.750 --> 00:08.130 In the last lesson we looked at how we can use native Node modules that were bundled with Node.js in 1 00:08.130 --> 00:14.610 order to use libraries of code that we didn't write but somebody else wrote in order to execute commonly 2 00:14.610 --> 00:16.850 used bits of functionality. 3 00:16.860 --> 00:24.270 Now, in this lesson, I want to talk about NPM, which is a package manager for external modules, so modules 4 00:24.270 --> 00:28.560 that anybody could build that you could incorporate into your projects. 5 00:28.560 --> 00:36.300 Now, NPM itself actually stands for Node Package Manager, and it's currently the world's largest collection 6 00:36.720 --> 00:38.990 of these packages of code. 7 00:39.000 --> 00:42.300 So why would you want to use a package manager anyways? 8 00:42.390 --> 00:47.660 Well, let's say that you were building a Lego house, and it's a bit of work putting it all together. 9 00:47.790 --> 00:52.020 Now, let's say that you want to have some trees around your Lego house as well. 10 00:52.020 --> 00:58.320 Now you could spend the time and energy figuring out how to put those trees together, or you could simply 11 00:58.320 --> 01:07.740 go onto NPM and find a tree package, and you can simply incorporate it and add it to your project. And it's 12 01:07.740 --> 01:11.190 exactly the same thing with code. 13 01:11.190 --> 01:19.650 The packages on NPM are bits of reusable code that somebody else wrote, and using NPM you can incorporate 14 01:19.650 --> 01:22.300 those packages into your own projects, 15 01:22.380 --> 01:27.830 saving you the time and effort that's required to write those bits of code yourself. 16 01:28.290 --> 01:31.000 Now NPM actually gets bundled with Node, 17 01:31.080 --> 01:34.340 so when we installed node we already installed NPM. 18 01:34.440 --> 01:38.940 Now, I'm going to delete those two files that we created in the last lesson, 19 01:39.360 --> 01:45.870 and I'm also going to split screen my Hyper.js with Atom, 20 01:46.020 --> 01:50.640 so that means that you guys can see both of them on the same screen, which should make it easier to figure 21 01:50.640 --> 01:52.010 out what's going on. 22 01:52.050 --> 01:59.190 Now I'm going to clear my console so that I start off with a clean slate, and, making sure that you're 23 01:59.340 --> 02:03.280 still inside the intro-to-node directory, 24 02:03.540 --> 02:09.240 we’re going to initialize NPM by saying npm init. 25 02:09.390 --> 02:14.760 And when I hit enter you can see that it's going to run through a utility. It’s kind of like the wizard 26 02:14.760 --> 02:18.760 that you get on Windows when it tries to help you set something up. 27 02:18.780 --> 02:24.690 So the first thing it asked me is what do you want to call your package, and they give you a suggestion inside 28 02:24.690 --> 02:28.080 these parentheses. Are you OK with calling it intro-to-node? 29 02:28.320 --> 02:34.410 Which I'm fine with that, so I'll just hit enter. And then it asks me what's the version of your project, 30 02:34.500 --> 02:37.460 and I'm happy with 1.0.0. 31 02:37.470 --> 02:40.250 Now, the next thing is the description of your project. 32 02:40.290 --> 02:51.690 So let's say, “This is a intro to node project.” And then that becomes the description. The entry point will 33 02:51.690 --> 02:58.260 refer to your main Javascript file, and I've called it index.js. That’s their recommended name as 34 02:58.260 --> 03:00.690 well, so I can just hit enter as well. 35 03:00.750 --> 03:01.430 Test command 36 03:01.440 --> 03:02.270 I'm going to ignore, 37 03:02.280 --> 03:08.400 so I'm just going to hit enter. Git repository we also don't have one, but we will talk about it a lot later 38 03:08.400 --> 03:08.770 on, 39 03:08.910 --> 03:13.680 so we're going to skip this as well, so just hit enter. Keywords, hit enter to ignore. 40 03:13.860 --> 03:14.780 And then author, 41 03:14.780 --> 03:16.470 I'll just put my name, or, 42 03:16.620 --> 03:20.010 in your case, you would put your name. And finally license, 43 03:20.020 --> 03:21.200 ISC, that's fine, hit enter. 44 03:21.230 --> 03:28.200 And now it's compiled all of this data together, and you can see that it's got a name, it’s got a version, 45 03:28.300 --> 03:31.350 it’s got a description, and then it asks you, “Is it OK?” 46 03:31.400 --> 03:33.780 And if you hit enter, then that means it's yes, 47 03:33.960 --> 03:35.690 and that's now done. 48 03:35.700 --> 03:40.900 So that process has created this file called package.json. 49 03:40.980 --> 03:48.000 And this is a description of all of your NPM packages so far. 50 03:48.120 --> 03:53.510 Once we start installing external packages, they will also show up in this file. 51 03:53.610 --> 03:54.570 So enough talking. 52 03:54.570 --> 03:58.260 Let's go ahead and install an NPM external module. 53 03:58.260 --> 04:03.960 So if you head over to npmjs.com, then you've got this big search bar where you can search for 54 04:04.290 --> 04:06.270 all the packages that they contain. 55 04:06.540 --> 04:15.180 And, at the time of making this, there are 650,000 NPM packages, 56 04:15.180 --> 04:17.160 so that's a lot to play with. 57 04:17.160 --> 04:23.760 Now, the one that we're going to check out is we're going to look for something that will generate superhero 58 04:23.760 --> 04:25.140 names. 59 04:25.140 --> 04:31.260 So I'm just going to type in ‘superhero names’, and the first package I get is something called ‘superheroes’. 60 04:31.500 --> 04:37.410 And if you click on it, there's a description that tells you how this package works. 61 04:37.410 --> 04:42.890 So, in order to install it, you write ‘npm install superheroes’. In order to use it, 62 04:42.900 --> 04:51.000 you require the module, and then it has a method called .random that will generate as an output a 63 04:51.000 --> 04:57.930 superhero name. And with all of the NPM modules, you can see that there's extensive documentation on what 64 04:57.930 --> 05:03.390 you can do with it, and how you can install it, related modules, and a whole bunch of things. 65 05:03.430 --> 05:05.040 And I'm going to show you how we can use it. 66 05:05.140 --> 05:09.690 So firstly, as with any NPM module, we first have to install it. 67 05:09.840 --> 05:14.770 So, to install it, we just make sure that we're, again, inside the right directory, 68 05:14.800 --> 05:16.690 so our project folder, 69 05:16.870 --> 05:23.590 and then we write ‘npm install’, and then we write the name of the module, which in this case is called 70 05:23.670 --> 05:26.540 superheroes, plural. 71 05:26.560 --> 05:34.240 So, superheroes. And make sure that you spell it exactly the way that you see it over here, including 72 05:34.240 --> 05:37.190 any capitalizations or dashes that they may have. 73 05:37.540 --> 05:45.840 So now if I hit enter, it will go online and it’ll download that module, and you can see that we now, in our package.json, 74 05:45.880 --> 05:48.970 have a dependency. 75 05:49.000 --> 05:54.730 So our project now depends on a module, and that module is called superheroes 76 05:54.730 --> 05:56.900 version 1.0.0. 77 05:56.950 --> 06:00.640 And you can see over here we get a few warnings and a few notices. 78 06:00.730 --> 06:02.330 Don't worry too much about that. 79 06:02.350 --> 06:07.660 Once we learn about GitHub and Git and version control, then we will get rid of these warnings. 80 06:08.050 --> 06:11.950 At the moment it’s not going to affect our project or our code at all, 81 06:11.950 --> 06:13.330 so don't worry. 82 06:13.330 --> 06:20.350 So, now that we've installed our superheroes package, so if we go into index.js, we're now going 83 06:20.350 --> 06:24.800 to delete this code, which was using an internal Node.js module, 84 06:25.090 --> 06:30.060 and we're going to instead require this superheroes module. 85 06:30.400 --> 06:34.650 And you can see they clearly documented this is how you might use it. 86 06:34.750 --> 06:43.930 So we'll create a var called superheroes, and we're going to set it to equal require the module 87 06:43.930 --> 06:46.660 superheroes. 88 06:46.660 --> 06:55.420 So now that incorporates this module into our current project, and we're able to use it by tapping into 89 06:55.630 --> 07:03.250 this .random function. And all it does is it generates a random superhero name as the output. 90 07:03.250 --> 07:12.010 So let's write ‘superheroes’, which is our superheroes module, . to tap into one of its methods, and the 91 07:12.010 --> 07:14.990 method is called random. 92 07:15.010 --> 07:18.850 Now this as an output generates a random superhero name, 93 07:18.880 --> 07:26.160 so we're going to store that output into a variable, and we're going to call it mySuperheroName. 94 07:26.170 --> 07:35.290 So now we have installed the superhero package, we have included it in our project, and we now are using 95 07:35.290 --> 07:38.220 it to generate a superhero name. 96 07:38.230 --> 07:45.240 Now we should log that superhero name into our command line or our console so that we can see it. 97 07:45.250 --> 07:54.400 So lets simply log mySuperheroName, and lets hit save, and now we can run our code by saying again node 98 07:54.820 --> 07:57.490 index.js. 99 07:57.550 --> 08:02.460 So if I hit enter, you can see we get a name called Free. 100 08:02.480 --> 08:04.100 Its not a very good superhero name. 101 08:04.240 --> 08:05.560 Let's try again. 102 08:05.560 --> 08:06.430 What about the next one? 103 08:06.430 --> 08:08.180 Dragonfly. Oh, I like that. 104 08:08.260 --> 08:13.180 Let's try again. Iron Lad. Hmm, yeah, not feeling it. 105 08:13.210 --> 08:19.900 But in this lesson, you’ve seen how we can go intonations NPM, we can search for packages that might interest us, 106 08:20.260 --> 08:26.170 and very often I will spend a lot of time on here just window shopping, browsing the packages that might 107 08:26.170 --> 08:28.760 inspire my next web project. 108 08:28.780 --> 08:37.150 So the process of incorporating an external package was firstly using npm init in order to initialize 109 08:37.570 --> 08:41.710 a package file, and you can see that this is called package.json. 110 08:41.720 --> 08:48.730 And json is just simply a file format that's used to organize data, and it looks almost a little 111 08:48.730 --> 08:54.790 bit like Javascript objects, where you have a key, and you have a value, and it's just a very simple way 112 08:54.790 --> 08:56.530 of structuring data. 113 08:56.560 --> 09:02.980 And after we initialize this file, we then installed an external package that we wanted, which was called 114 09:03.150 --> 09:08.730 superheroes, and that gets added in as a dependency to our project, 115 09:08.770 --> 09:16.300 so our project now depends on this external package. And it depends on it because we are requiring it 116 09:16.420 --> 09:23.200 inside our project, and then we're using it's random function in order to generate a superhero name. 117 09:23.500 --> 09:30.280 So we literally had to do no work at all in order to have a bit of functionality that will just keep 118 09:30.280 --> 09:36.160 generating new superhero names every single time we run this code. 119 09:36.190 --> 09:39.560 Now as a challenge I want you to do this yourself. 120 09:39.580 --> 09:41.540 So in addition to superheroes. 121 09:41.740 --> 09:48.560 So in addition to superheroes, there's also an NPM package called supervillains, and this allows you 122 09:48.560 --> 09:53.350 to generate supervillain names, which I think is going to be a lot better than the sort of stuff that 123 09:53.350 --> 09:54.970 we're coming up over here. 124 09:55.150 --> 09:56.970 Not looking that great. 125 09:57.040 --> 09:59.630 I'm not very keen on any of these names so far. 126 09:59.890 --> 10:02.580 Maybe we’ll have more luck with the supervillains. 127 10:02.620 --> 10:11.620 So I want you to install this package to our current project, and then I want you to use it to be able 128 10:11.620 --> 10:14.920 to console.log some supervillain names. 129 10:14.920 --> 10:20.130 So pause the video now and complete this challenge. 130 10:20.170 --> 10:20.530 All right. 131 10:20.530 --> 10:27.250 So, after seeing the process of installing an NPM package, I just wanted you to try it out yourself, just 132 10:27.250 --> 10:31.330 so that you can give it a go yourself and see how easy it is. 133 10:31.330 --> 10:38.730 So over here you can see that in order to install, all we had to do is write ‘npm install supervillains’, 134 10:39.250 --> 10:41.940 and we do that inside our command line. 135 10:41.940 --> 10:42.820 So over here, 136 10:42.820 --> 10:49.450 I’ll write ‘npm install supervillains’, making sure that I'm spelling it right. 137 10:49.680 --> 10:54.700 And now it goes onto NPM, fetches the package, and installs it into our project. 138 10:54.700 --> 11:02.740 So now, inside our package.json we now have this dependency listed, and inside our node_modules folder, 139 11:02.870 --> 11:04.860 you can see that there's a whole bunch of things, 140 11:04.870 --> 11:10.220 but we've also got our superhero and supervillain packages. 141 11:10.330 --> 11:16.810 Now the reason why there's so many other packages is because these guys themselves also have dependencies. 142 11:16.930 --> 11:19.780 So our project depends on superheroes. 143 11:20.020 --> 11:27.120 But superheroes will have its own dependencies, and then these packages might have their own dependencies. 144 11:27.150 --> 11:29.690 And it's kind of like Inception. 145 11:29.800 --> 11:36.850 There's just many many layers, and in the end we end up with all of these packages which we have to incorporate 146 11:36.940 --> 11:39.270 in order for all the modules to work. 147 11:39.610 --> 11:45.190 So now, inside our index.js, in order to use this new package, 148 11:45.250 --> 11:47.230 we of course have to require it. 149 11:47.290 --> 11:52.990 So I'm going to do it up here, next to where we've got our superheroes package. 150 11:53.080 --> 11:59.860 So I'm going to say ‘var supervillain = require’, and then the name of the package, which is 151 11:59.980 --> 12:01.390 supervillains. 152 12:01.570 --> 12:04.540 Then I'm going to check their documentation. 153 12:04.540 --> 12:09.920 So, again, it has a method called .random, which generates a random supervillain name. 154 12:09.970 --> 12:23.200 So I can simply write ‘var mySupervillainName = supervillain.random();’. 155 12:23.690 --> 12:30.460 And now, in addition to console logging my superhero name, I'm also going to console.log my supervillain 156 12:30.460 --> 12:31.020 name. 157 12:31.150 --> 12:38.000 So now, if we save this file and we execute it inside our command line, then we can simply say ‘node 158 12:38.010 --> 12:38.910 index.js’. 159 12:39.190 --> 12:42.400 And if I hit enter I should get two names this time. 160 12:42.400 --> 12:49.570 One is my superhero name, which is kind of naff, and the other one is my supervillain name, which sounds 161 12:49.660 --> 12:51.040 a lot better. 162 12:51.400 --> 12:56.190 For some reason I am a lot more drawn to these supervillain names. 163 12:56.200 --> 13:02.280 Captain Boomerang. The Scorpion. Electrocutioner. 164 13:02.500 --> 13:04.100 Yeah I'm really liking this. 165 13:04.180 --> 13:04.480 All right. 166 13:04.480 --> 13:10.690 So, I hope this lesson was interesting, and we've learned a whole bunch of things in this module, including 167 13:10.690 --> 13:18.610 how to get started using Node, using Node’s native packages, as well as NPMs, external packages, and this 168 13:18.670 --> 13:24.220 really is going to be our superpower that we're going to leverage to build really awesome web sites 169 13:24.550 --> 13:28.830 without having to spend a lot of time and energy and effort ourselves. 170 13:28.870 --> 13:36.100 So, in the next module, we’re going to look at a Node framework that's really really popular, and if you're going 171 13:36.100 --> 13:38.240 to be using Node, you're going to be using it. 172 13:38.440 --> 13:40.050 And it's called Express. 173 13:40.180 --> 13:43.520 So for all of that and more, I’ll see you on the next lesson.