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.