1 00:00:06,150 --> 00:00:07,290 In this video. 2 00:00:07,290 --> 00:00:13,320 Let's go ahead and install our first package from NPM. 3 00:00:13,920 --> 00:00:20,610 The first step is we need to create a folder for it and I've already created a folder called and PM. 4 00:00:20,820 --> 00:00:24,360 So let's look at the syntax for installing package. 5 00:00:24,750 --> 00:00:33,960 Well, we are going to install locally and this is a syntax we make use of NPM and then install and 6 00:00:33,960 --> 00:00:35,820 the name of the package. 7 00:00:36,390 --> 00:00:41,400 The name of the package can be found inside NPM website. 8 00:00:41,520 --> 00:00:48,780 So if you go to NPM here, we can search for any package that we need for our application. 9 00:00:49,230 --> 00:00:56,970 So let's say that we want a package that can generate colours randomly upon each request. 10 00:00:57,210 --> 00:01:00,120 So let's set four colour. 11 00:01:00,780 --> 00:01:07,170 Now if see that we have 14,000 packages found for this package. 12 00:01:07,170 --> 00:01:10,710 So which of this one are we requesting for? 13 00:01:11,160 --> 00:01:15,570 And PM has given us a tag called Exact Match. 14 00:01:15,570 --> 00:01:19,140 Meaning this is what we actually searched for. 15 00:01:19,440 --> 00:01:25,740 For this package we have a little bit description which says color, convention and manipulation with 16 00:01:25,740 --> 00:01:27,750 CSS training support. 17 00:01:28,110 --> 00:01:33,210 So if you click on that, you can see more details about the package. 18 00:01:33,540 --> 00:01:39,750 Up here, we have the package, name the version, and then it's a public repository. 19 00:01:39,750 --> 00:01:48,450 And then last update and under versions, if we see that this package has 48 versions, it tells you 20 00:01:48,450 --> 00:01:52,680 that this package is always being updated. 21 00:01:52,980 --> 00:02:00,510 Let's click on Read Me and this one gives you the installation steps on the right side here we have 22 00:02:00,510 --> 00:02:04,140 more details about the package, how to install. 23 00:02:04,530 --> 00:02:09,300 Since we have bunch of packages under color, which ones we use. 24 00:02:09,300 --> 00:02:16,830 Well, always before you choose a package, take note about this one is the weekly downloads. 25 00:02:16,830 --> 00:02:20,190 It tells you that this package is popular. 26 00:02:20,190 --> 00:02:23,550 So if you use it, there be no problem in the future. 27 00:02:23,580 --> 00:02:24,240 All right. 28 00:02:24,450 --> 00:02:33,180 And then the last update, which is really important, it tells you whether this package is being updated 29 00:02:33,180 --> 00:02:34,560 or maintained. 30 00:02:34,560 --> 00:02:41,400 And you see a number of collaborators, one person who made this package for us, and this is a version 31 00:02:41,400 --> 00:02:44,190 or the current version of this package. 32 00:02:44,220 --> 00:02:50,220 So let's see how we can install and we can install the package using this syntax. 33 00:02:50,220 --> 00:03:01,050 NPM I color or NPM install after installation this added usage telling you how we can use the package. 34 00:03:01,230 --> 00:03:04,350 So first is let's go ahead and install the package. 35 00:03:04,350 --> 00:03:12,840 So as I told you, we are going to use NPM, install or NPM IE and the name of the package. 36 00:03:13,080 --> 00:03:19,890 So back to my terminal, I have already said in to the folder where I want to practice my NPM skills. 37 00:03:20,160 --> 00:03:28,520 So the first step is I will make use of NPM I and then the name of the package which is color well, 38 00:03:28,530 --> 00:03:36,030 but before we install this, we can give this one additional flag, meaning how do we want to install 39 00:03:36,030 --> 00:03:36,960 this package? 40 00:03:36,960 --> 00:03:45,780 One, we can install a package as dev dependencies, meaning that we need a particular package only 41 00:03:45,780 --> 00:03:48,780 in a development mode or environment. 42 00:03:49,050 --> 00:03:54,390 And we can also install the package as dependencies, meaning in production. 43 00:03:54,390 --> 00:03:56,880 We may need that package in production. 44 00:03:57,180 --> 00:04:03,150 So we have two types of packages, dev dependencies and the actual dependencies. 45 00:04:03,150 --> 00:04:10,950 So if we want to install a package as a development dependencies, we are going to give it a flag and 46 00:04:10,950 --> 00:04:14,040 PM I dash a package. 47 00:04:14,970 --> 00:04:19,740 Now before we get into that, let's install this package as dependency. 48 00:04:20,130 --> 00:04:27,780 And after some time you see that we have the package being added, meaning we have added six packages, 49 00:04:27,780 --> 00:04:30,660 meaning that this package has been installed. 50 00:04:30,930 --> 00:04:39,510 Now let's check our folder and indeed we have couple of files here after we initiated this command. 51 00:04:39,510 --> 00:04:44,100 So what is this node modules and what is it doing over here? 52 00:04:44,640 --> 00:04:50,550 Note modules was created automatically as soon as we install any package. 53 00:04:50,880 --> 00:04:59,430 This means that this folder contains any package that we are going to use in this particular application. 54 00:05:00,120 --> 00:05:05,250 And we only install color package by why from this one. 55 00:05:06,110 --> 00:05:11,960 It means that these folders make up the entire color package. 56 00:05:11,960 --> 00:05:14,390 That is the note module's for you. 57 00:05:15,000 --> 00:05:18,220 And after that we have two files. 58 00:05:18,240 --> 00:05:23,040 The first one is package does log dot JSON file. 59 00:05:24,200 --> 00:05:32,450 I got this one simply because I am using two package managers that is young and PM. 60 00:05:33,170 --> 00:05:41,300 If you have an PM only installed without John, you are not going to see this file, so let's remove 61 00:05:41,300 --> 00:05:41,450 it. 62 00:05:41,450 --> 00:05:43,370 Otherwise it's going to conflict. 63 00:05:43,370 --> 00:05:45,020 Which manager should I use? 64 00:05:45,200 --> 00:05:50,570 Now this is the most important one which is packaged dot json file. 65 00:05:50,600 --> 00:05:52,100 So what is it? 66 00:05:52,460 --> 00:06:01,010 This file contains all the scripts and dependencies that you are going to use for this application. 67 00:06:01,340 --> 00:06:06,710 So this file manages our packages and how we can run our application. 68 00:06:06,860 --> 00:06:13,490 If you go to express, you can see that you're going to have a bunch of properties inside this as your 69 00:06:13,490 --> 00:06:14,660 application grows. 70 00:06:14,660 --> 00:06:21,350 So now it has given us an object in a JSON format with key value per and property. 71 00:06:21,800 --> 00:06:25,600 It will say that we have a property here called dependencies. 72 00:06:25,610 --> 00:06:33,830 Like I said, that dependency simply means that our application relies on these packages, even in production 73 00:06:33,830 --> 00:06:36,030 and in dev environment. 74 00:06:36,050 --> 00:06:39,880 So now we can install this package in a different way. 75 00:06:39,890 --> 00:06:43,250 But before that, let's finish up what is going on over here. 76 00:06:43,670 --> 00:06:50,900 It can see that inside the dependencies here we have key value per property, name and value. 77 00:06:51,290 --> 00:06:57,830 The property name represents the name of the package as we installed here, which is color. 78 00:06:58,760 --> 00:07:04,840 And after that, we have a value which represents the version for this package. 79 00:07:04,850 --> 00:07:10,180 So if you check the version, indeed it is 4.2.3. 80 00:07:10,190 --> 00:07:12,290 That's what we have here. 81 00:07:12,740 --> 00:07:13,790 That is it. 82 00:07:14,000 --> 00:07:16,190 That is it, guys. 83 00:07:16,220 --> 00:07:19,610 The next step is, how can we use it? 84 00:07:19,610 --> 00:07:25,290 But before that, let me show you how we can install this package as dev dependencies. 85 00:07:25,340 --> 00:07:35,210 So coming back here so we can give it additional flag as dash and uppercase z, meaning that we are 86 00:07:35,210 --> 00:07:38,720 installing this package as def dependencies. 87 00:07:38,720 --> 00:07:41,990 We need it only in development environment. 88 00:07:42,140 --> 00:07:45,620 When I hit enter now let's have a look. 89 00:07:45,890 --> 00:07:50,960 We see that instead of dependencies it has changed to def dependencies. 90 00:07:50,960 --> 00:07:58,490 Meaning we need this package only in development environment in production application is going to use 91 00:07:58,490 --> 00:07:59,540 this package. 92 00:07:59,720 --> 00:08:04,580 That is how we can install package the next video. 93 00:08:04,580 --> 00:08:07,700 Let's see how we can use a package.