1 00:00:01,350 --> 00:00:03,440 In this video, let's take a look 2 00:00:03,440 --> 00:00:07,200 at the two types of packages that we can install 3 00:00:07,200 --> 00:00:12,193 with npm, and also the two type of installs that there are. 4 00:00:14,070 --> 00:00:17,070 So the two types of packages that we can install 5 00:00:17,070 --> 00:00:21,419 are simple dependencies or development dependencies. 6 00:00:21,419 --> 00:00:26,419 Now simple, or regular dependencies, are simply packages 7 00:00:26,600 --> 00:00:30,880 that contain some code that we will include in our own code. 8 00:00:30,880 --> 00:00:34,598 So code upon which we built our own application, 9 00:00:34,598 --> 00:00:37,390 and that's why we actually call them dependencies, 10 00:00:37,390 --> 00:00:40,580 because our project and our code depend on them 11 00:00:40,580 --> 00:00:42,130 to work correctly. 12 00:00:42,130 --> 00:00:44,920 For example, Express, which is, again, 13 00:00:44,920 --> 00:00:47,050 the Node framework that we're gonna be using 14 00:00:47,050 --> 00:00:47,943 later in the course, 15 00:00:47,943 --> 00:00:50,478 that'll be a dependency. 16 00:00:50,478 --> 00:00:54,637 So let's now install our very first dependency 17 00:00:54,637 --> 00:00:57,580 just to show you how it works. 18 00:00:57,580 --> 00:01:01,410 And the package that we're gonna install is called Slugify, 19 00:01:01,410 --> 00:01:03,780 which is a small tool that we can use 20 00:01:03,780 --> 00:01:07,490 to make more readable URLs out of names. 21 00:01:07,490 --> 00:01:10,410 For example, like product names in the case 22 00:01:10,410 --> 00:01:12,698 of our node form example. 23 00:01:12,698 --> 00:01:16,579 So in order to install a simple dependency in npm, 24 00:01:16,579 --> 00:01:21,579 all we have to do is say npm install, 25 00:01:23,008 --> 00:01:25,760 and then the name of the package, 26 00:01:25,760 --> 00:01:28,187 which is simply Slugify. 27 00:01:28,187 --> 00:01:31,629 In previous versions, you would also have to say 28 00:01:31,629 --> 00:01:35,660 dash dash save, like this, 29 00:01:35,660 --> 00:01:38,196 but right now that's no longer necessary. 30 00:01:38,196 --> 00:01:42,440 So if you just specify npm install slugify, 31 00:01:42,440 --> 00:01:47,250 it'll then install this package as a regular dependency. 32 00:01:47,250 --> 00:01:51,020 And watch what happens to our package.json file 33 00:01:51,020 --> 00:01:52,803 once that installation is done. 34 00:01:53,950 --> 00:01:58,060 So we'll hit return now, and let's see what happens. 35 00:01:58,060 --> 00:02:00,340 And actually, that was really fast 36 00:02:00,340 --> 00:02:02,690 and it installed our package right away, 37 00:02:02,690 --> 00:02:06,650 and then created this new field here called dependencies, 38 00:02:06,650 --> 00:02:10,163 and put our first dependency, Slugify, right in there. 39 00:02:12,200 --> 00:02:15,240 It also then has the version of the package, 40 00:02:15,240 --> 00:02:18,480 but we're gonna talk a bit more about that later 41 00:02:18,480 --> 00:02:19,353 in this section. 42 00:02:20,632 --> 00:02:23,410 This is our first dependency, 43 00:02:23,410 --> 00:02:26,960 and again, this is just a regular dependency. 44 00:02:26,960 --> 00:02:29,973 And we will use Slugify right in the next video, 45 00:02:30,863 --> 00:02:35,863 so just to get a sense of how we use these 46 00:02:36,060 --> 00:02:38,910 third party dependencies in our code. 47 00:02:38,910 --> 00:02:40,720 But right now, what I want to show you 48 00:02:40,720 --> 00:02:43,650 is that besides these regular dependencies, 49 00:02:43,650 --> 00:02:46,390 we also have development dependencies. 50 00:02:46,390 --> 00:02:50,140 And these are usually just tools for development, 51 00:02:50,140 --> 00:02:53,540 for example like a code bundler like Webpack, 52 00:02:53,540 --> 00:02:57,310 or a debugger tool or a testing library. 53 00:02:57,310 --> 00:03:00,200 So these are development dependencies. 54 00:03:00,200 --> 00:03:02,330 They are not needed for production, 55 00:03:02,330 --> 00:03:05,290 so our code does not really depend on them, 56 00:03:05,290 --> 00:03:08,910 we simply use them to develop our applications. 57 00:03:08,910 --> 00:03:11,640 So let's now install a dev dependency, 58 00:03:11,640 --> 00:03:15,350 which is just a short name for development dependency, 59 00:03:15,350 --> 00:03:17,090 and the tool that we're gonna install 60 00:03:17,090 --> 00:03:19,160 is called nodemon. 61 00:03:19,160 --> 00:03:24,160 So npm install nodemon, like this, 62 00:03:24,900 --> 00:03:27,030 and then what we have to do to specify 63 00:03:27,030 --> 00:03:31,473 that this is a development dependency is to say save dev, 64 00:03:33,500 --> 00:03:37,390 and so this will then add an entry to this package.json 65 00:03:37,390 --> 00:03:40,160 in the dev dependencies. 66 00:03:40,160 --> 00:03:42,661 So let's actually take a look at that 67 00:03:42,661 --> 00:03:46,360 once this is done installing. 68 00:03:46,360 --> 00:03:50,330 Now nodemon is a very nice tool that helps us develop 69 00:03:50,330 --> 00:03:53,749 Node JS applications by automatically restarting 70 00:03:53,749 --> 00:03:58,250 the Node application whenever we change some files 71 00:03:58,250 --> 00:03:59,870 in our working directory. 72 00:03:59,870 --> 00:04:02,850 So remember that in the project, 73 00:04:02,850 --> 00:04:06,300 I was actually closing down the server all the time 74 00:04:06,300 --> 00:04:08,530 and then restarting it each time 75 00:04:08,530 --> 00:04:10,240 that I was changing the code. 76 00:04:10,240 --> 00:04:12,810 But with this tool, that's no longer necessary. 77 00:04:12,810 --> 00:04:16,200 So it will automatically restart the server each time 78 00:04:16,200 --> 00:04:17,283 that we do a change. 79 00:04:18,661 --> 00:04:21,290 So it's now done installing, 80 00:04:21,290 --> 00:04:24,850 and it created a new field called dev dependencies, 81 00:04:24,850 --> 00:04:27,720 and then of course added nodemon in there. 82 00:04:27,720 --> 00:04:30,473 And so our project now basically knows 83 00:04:30,473 --> 00:04:34,805 that we depend on this tool here to develop our application, 84 00:04:34,805 --> 00:04:38,853 and this package here to actually build our code base. 85 00:04:40,660 --> 00:04:44,470 So these are the two types of packages. 86 00:04:44,470 --> 00:04:48,050 Now let's also talk about the two types of installs 87 00:04:48,050 --> 00:04:49,330 of these packages, 88 00:04:49,330 --> 00:04:52,250 because right now all we did was to install 89 00:04:52,250 --> 00:04:55,010 these packages locally, 90 00:04:55,010 --> 00:04:57,658 so they only work in this project 91 00:04:57,658 --> 00:05:00,010 and we can actually see that right here 92 00:05:00,010 --> 00:05:01,390 in our project folder 93 00:05:01,390 --> 00:05:03,800 because npm created this new folder 94 00:05:03,800 --> 00:05:05,963 called node modules for us. 95 00:05:06,810 --> 00:05:10,329 It has all the dependencies of our project. 96 00:05:10,329 --> 00:05:13,501 But now you might ask, well we only specified 97 00:05:13,501 --> 00:05:16,214 Slugify and nodemon, 98 00:05:16,214 --> 00:05:20,658 so what are all of these packages doing here? 99 00:05:20,658 --> 00:05:23,490 Well, that's simply because they in turn 100 00:05:23,490 --> 00:05:26,573 are dependencies of our dependencies. 101 00:05:26,573 --> 00:05:31,400 If, for example, Slugify needs one of these packages, 102 00:05:31,400 --> 00:05:36,130 well, then npm will install these dependencies as well. 103 00:05:36,130 --> 00:05:39,090 And so we end up with all of these dependencies here 104 00:05:39,090 --> 00:05:40,443 in our project. 105 00:05:44,770 --> 00:05:48,600 So these are for local modules, 106 00:05:48,600 --> 00:05:50,720 so Slugify and nodemon, again, 107 00:05:50,720 --> 00:05:54,360 we just installed them locally in our project folder 108 00:05:54,360 --> 00:05:56,790 and they're not gonna work anywhere else. 109 00:05:56,790 --> 00:06:01,170 But with npm, we can also have global installs, 110 00:06:01,170 --> 00:06:04,460 and global installs will then be available anywhere, 111 00:06:04,460 --> 00:06:06,980 not just our project folder, 112 00:06:06,980 --> 00:06:10,490 but in every folder across your entire machine. 113 00:06:10,490 --> 00:06:13,360 So a package should be installed globally 114 00:06:13,360 --> 00:06:17,530 when it provides an executable command that you can run 115 00:06:17,530 --> 00:06:20,000 from the command line interface. 116 00:06:20,000 --> 00:06:24,260 And nodemon, for example, is one tool like that. 117 00:06:24,260 --> 00:06:28,000 So I use nodemon in all Node projects that I work on, 118 00:06:28,000 --> 00:06:31,530 and so I have nodemon installed as a global dependency 119 00:06:31,530 --> 00:06:34,710 because that way I don't have to install it each time 120 00:06:34,710 --> 00:06:36,830 that I'm creating a new project. 121 00:06:36,830 --> 00:06:38,880 I can simply use it in a new project 122 00:06:38,880 --> 00:06:41,083 because it's already installed globally. 123 00:06:41,950 --> 00:06:44,620 So let's now actually do that. 124 00:06:44,620 --> 00:06:46,560 Clear the console here, 125 00:06:46,560 --> 00:06:48,780 and then install it globally. 126 00:06:48,780 --> 00:06:52,480 So npm install, 127 00:06:52,480 --> 00:06:55,290 and there's actually a shorthand for install. 128 00:06:55,290 --> 00:06:58,963 It actually is enough to just write i, like this. 129 00:06:58,963 --> 00:07:02,990 That's actually usually how I do it. 130 00:07:02,990 --> 00:07:07,990 So npm i nodemon, and then flag global. 131 00:07:10,080 --> 00:07:11,283 Hit return now, 132 00:07:13,291 --> 00:07:18,010 and so now it is being installed globally. 133 00:07:18,010 --> 00:07:20,460 But it actually gives us this error, 134 00:07:20,460 --> 00:07:23,480 and if you're on a Mac and did it like this, 135 00:07:23,480 --> 00:07:25,370 then it will also give you an error 136 00:07:25,370 --> 00:07:27,635 simply because you don't have the permissions 137 00:07:27,635 --> 00:07:30,446 to install this package. 138 00:07:30,446 --> 00:07:34,190 If you're on a Mac, it doesn't work, 139 00:07:34,190 --> 00:07:37,090 and I believe on Windows it should work, 140 00:07:37,090 --> 00:07:39,770 at least that's the experience that I have, 141 00:07:39,770 --> 00:07:43,370 but if you're on a Mac, you have actually put sudo 142 00:07:43,370 --> 00:07:46,890 in front of it and then put in your password 143 00:07:46,890 --> 00:07:50,750 basically just to give it permission. 144 00:07:50,750 --> 00:07:52,704 Well in my case I have Touch ID, 145 00:07:52,704 --> 00:07:55,720 but if you don't have that, 146 00:07:55,720 --> 00:07:58,560 you can use your user account password. 147 00:07:58,560 --> 00:08:02,700 Anyway, now that works, and we can now start using nodemon 148 00:08:02,700 --> 00:08:04,470 on this project. 149 00:08:04,470 --> 00:08:07,380 So let me actually show you how it works. 150 00:08:07,380 --> 00:08:09,459 So before to run our app, we did it like this. 151 00:08:09,459 --> 00:08:14,459 We wrote node and then index.js. 152 00:08:14,480 --> 00:08:17,460 What I did here now was actually an autocomplete, 153 00:08:17,460 --> 00:08:19,900 and I think I hadn't talked to you about that 154 00:08:19,900 --> 00:08:21,170 at this point, 155 00:08:21,170 --> 00:08:24,030 so let me go ahead and delete this. 156 00:08:24,030 --> 00:08:26,680 So I started typing the i here, 157 00:08:26,680 --> 00:08:30,200 and since there is no other file which starts with an i, 158 00:08:30,200 --> 00:08:31,550 I can now hit tab, 159 00:08:31,550 --> 00:08:33,950 and so it will automatically complete 160 00:08:33,950 --> 00:08:35,613 the rest of the filename for me. 161 00:08:36,499 --> 00:08:40,279 We used to do it like this, then hit return, 162 00:08:40,279 --> 00:08:42,890 and then whenever we wanted to do some change, 163 00:08:42,890 --> 00:08:46,200 we would have to exit it like this, 164 00:08:46,200 --> 00:08:48,370 and restart everything again. 165 00:08:48,370 --> 00:08:51,963 But that's no longer the case because now we have nodemon. 166 00:08:51,963 --> 00:08:55,900 So all we have to do is to instead of writing node, 167 00:08:55,900 --> 00:08:59,293 we write nodemon and then index.js. 168 00:09:01,490 --> 00:09:04,910 Okay, and so now it's watching every file 169 00:09:04,910 --> 00:09:06,093 with every extension. 170 00:09:07,816 --> 00:09:10,892 If we go now back to our file here, 171 00:09:10,892 --> 00:09:13,100 we don't even need to change anything, 172 00:09:13,100 --> 00:09:15,160 all I have to do is to give it a save 173 00:09:15,160 --> 00:09:18,790 and take a look at what happens down here in the console. 174 00:09:18,790 --> 00:09:20,750 So I'll save it now, 175 00:09:20,750 --> 00:09:24,146 and you see restarting due to changes. 176 00:09:24,146 --> 00:09:28,340 Now it start again, node index.js. 177 00:09:28,340 --> 00:09:29,880 So you see that behind the scenes, 178 00:09:29,880 --> 00:09:32,860 it is actually still running the original command 179 00:09:32,860 --> 00:09:37,370 that we used to do, so node index.js, 180 00:09:37,370 --> 00:09:40,210 and so nodemon is basically just a wrapper 181 00:09:40,210 --> 00:09:42,320 around that node command 182 00:09:42,320 --> 00:09:44,642 simply to make our lives a bit easier. 183 00:09:44,642 --> 00:09:48,530 This is an extremely, extremely handy tool 184 00:09:48,530 --> 00:09:49,990 for us to work with Node, 185 00:09:49,990 --> 00:09:53,670 and for rest of the course, I will always be using nodemon 186 00:09:53,670 --> 00:09:55,083 instead of the node command. 187 00:09:55,970 --> 00:09:59,230 And now just to finish, there's one more small thing 188 00:09:59,230 --> 00:10:01,450 that I wanted to show you here. 189 00:10:01,450 --> 00:10:05,120 So let's say we didn't install nodemon globally. 190 00:10:05,120 --> 00:10:10,120 Well, how would we then use our dev dependency here locally? 191 00:10:10,410 --> 00:10:13,800 So the local nodemon that we have installed. 192 00:10:13,800 --> 00:10:16,730 Well, we couldn't simply run it from the command line 193 00:10:16,730 --> 00:10:20,200 because the local dependencies, they don't work like that. 194 00:10:20,200 --> 00:10:24,240 We cannot simply use them right away in the command line, 195 00:10:24,240 --> 00:10:27,990 but what we can do is to specify an npm script 196 00:10:31,210 --> 00:10:34,130 and we do that here in this script field. 197 00:10:34,130 --> 00:10:36,500 When we did npm in it, 198 00:10:36,500 --> 00:10:40,400 it actually put this one script here for us, 199 00:10:40,400 --> 00:10:41,960 which is for testing, 200 00:10:41,960 --> 00:10:46,760 and then simply said that we don't have any test specified. 201 00:10:46,760 --> 00:10:49,800 So that is just like a placeholder for us now, 202 00:10:49,800 --> 00:10:53,143 which we can replace now with start, 203 00:10:57,490 --> 00:11:02,420 and then nodemon index.js. 204 00:11:02,420 --> 00:11:04,680 And this nodemon that I'm using here 205 00:11:04,680 --> 00:11:06,690 will actually be the nodemon 206 00:11:06,690 --> 00:11:09,622 coming from the dev dependencies. 207 00:11:09,622 --> 00:11:14,110 Instead of writing the command down here in the command line 208 00:11:15,449 --> 00:11:17,100 like I did here, 209 00:11:17,100 --> 00:11:22,100 I will simply put the same thing into an npm script. 210 00:11:22,330 --> 00:11:25,464 The script is called start in this case, 211 00:11:25,464 --> 00:11:28,660 and now we will be able to run that. 212 00:11:28,660 --> 00:11:30,970 So let me finish this one here. 213 00:11:30,970 --> 00:11:33,880 So this is how we run an npm script, 214 00:11:33,880 --> 00:11:37,763 npm run and start, 215 00:11:39,640 --> 00:11:44,640 and indeed it gives us the command here nodemon index.js, 216 00:11:45,010 --> 00:11:48,858 and now everything works the exact same way as before. 217 00:11:48,858 --> 00:11:50,557 Right? 218 00:11:50,557 --> 00:11:52,580 And this has nothing to do with the fact 219 00:11:52,580 --> 00:11:54,733 that we installed nodemon globally before, 220 00:11:54,733 --> 00:11:58,270 it simply works like this because, again, 221 00:11:58,270 --> 00:12:03,210 nodemon is our dev dependency right here in the npm script. 222 00:12:03,210 --> 00:12:04,870 We can then write something 223 00:12:04,870 --> 00:12:07,785 like a command line interface instruction 224 00:12:07,785 --> 00:12:10,640 that it's gonna use that local dependency 225 00:12:10,640 --> 00:12:12,610 and not the global one. 226 00:12:12,610 --> 00:12:14,770 Again, this would've worked just fine 227 00:12:14,770 --> 00:12:17,203 without nodemon installed globally. 228 00:12:18,750 --> 00:12:21,780 This is how you specify npm script, 229 00:12:21,780 --> 00:12:24,666 and we will do a bunch more throughout this course 230 00:12:24,666 --> 00:12:27,750 and we can give them all sorts of names. 231 00:12:27,750 --> 00:12:31,849 Start is kind of a default one for development. 232 00:12:31,849 --> 00:12:33,870 So actually for start, 233 00:12:33,870 --> 00:12:37,973 we don't even have to write npm run start, 234 00:12:37,973 --> 00:12:41,680 but writing npm start is actually enough 235 00:12:41,680 --> 00:12:44,143 to trigger this special command. 236 00:12:46,010 --> 00:12:49,010 So you see again, it works just fine like this. 237 00:12:49,010 --> 00:12:49,843 Perfect. 238 00:12:49,843 --> 00:12:52,040 So in this video, you learned the difference 239 00:12:52,040 --> 00:12:55,990 between regular dependencies and development dependencies, 240 00:12:55,990 --> 00:12:58,680 and then you also learned that you can install them 241 00:12:58,680 --> 00:13:01,040 either locally or globally, 242 00:13:01,040 --> 00:13:04,950 or you can also install them in both places, right? 243 00:13:04,950 --> 00:13:07,850 But actually, usually the global dependencies 244 00:13:07,850 --> 00:13:11,370 that we install are usually always development tools 245 00:13:11,370 --> 00:13:14,500 because they are the ones who make more sense 246 00:13:14,500 --> 00:13:17,810 to install like that, again because they usually provide us 247 00:13:17,810 --> 00:13:21,240 like a nice command line interface program. 248 00:13:21,240 --> 00:13:26,070 In the next video, we will then use this dependency 249 00:13:26,070 --> 00:13:28,650 that we installed here actually in our code 250 00:13:28,650 --> 00:13:30,263 so that you learn actually how to include 251 00:13:30,263 --> 00:13:33,733 a third party module into your code.