1
00:00:00,150 --> 00:00:06,100
When we install node, we also automatically install NPM or node package manager.

2
00:00:06,600 --> 00:00:14,430
The reason why it's successful is because NPM allows us to save time, automate our tasks and avoid

3
00:00:14,430 --> 00:00:15,690
reinventing the wheel.

4
00:00:16,320 --> 00:00:20,400
We do that by installing packages or dependencies.

5
00:00:20,940 --> 00:00:29,970
Packages can be as simple as utility functions and as complex as full blown frameworks and everything

6
00:00:29,970 --> 00:00:31,290
else, of course, in between.

7
00:00:31,830 --> 00:00:40,230
Keep in mind that the package we are going to use later the Create React app already does all the heavy

8
00:00:40,230 --> 00:00:42,150
lifting for us under the hood.

9
00:00:42,420 --> 00:00:49,920
So this video is just to give you a general overview and for the most part, you'll be just hearing

10
00:00:50,100 --> 00:00:58,150
and PM start on a keyboard for the remainder of the course, a command that will cover a bit later in

11
00:00:58,160 --> 00:00:58,590
the course.

12
00:00:58,920 --> 00:01:05,260
As far as General NPM commands, we have NPM in it that is going to create package.

13
00:01:06,120 --> 00:01:14,820
So essentially the manifest file for our project where also we'll see list of dependencies, then we

14
00:01:14,820 --> 00:01:21,030
can install, package, Byronic, NPM, install and then package your name and then we would need to

15
00:01:21,030 --> 00:01:22,500
run dash dash type.

16
00:01:22,920 --> 00:01:30,320
Now as far as does does save in the latest versions of Node, you already don't have to run that meeting.

17
00:01:30,330 --> 00:01:38,070
This would just save it to a list of dependencies or like I said, in the latest versions of Node,

18
00:01:38,310 --> 00:01:40,020
you don't have to do that anymore.

19
00:01:40,380 --> 00:01:45,480
Now, what I've noticed, though, that once in a while students ask the question and they share the

20
00:01:45,480 --> 00:01:46,020
project.

21
00:01:46,350 --> 00:01:52,270
And then I can see that they have been using older version and they have not been saving dependencies.

22
00:01:52,270 --> 00:01:57,720
So in order for me to run their project, I still need to install those dependencies.

23
00:01:58,140 --> 00:02:03,930
So as a safeguard, I would just still always using the save just in case.

24
00:02:03,930 --> 00:02:10,560
I don't know, maybe your node version is out of date now that is going to install that package locally,

25
00:02:10,710 --> 00:02:12,360
meaning in the project.

26
00:02:12,670 --> 00:02:17,490
Then we also have the NPM install package name that's global.

27
00:02:17,760 --> 00:02:22,240
Now that is going to install the package globally and we can access it anywhere.

28
00:02:22,480 --> 00:02:28,350
However, it comes with a gotcha where when you're doing the global install, most likely you'll be

29
00:02:28,350 --> 00:02:29,640
asked for permission.

30
00:02:29,730 --> 00:02:33,510
And of course, don't worry, I'll show you that with our example.

31
00:02:33,810 --> 00:02:40,230
And lastly, we also have an option of installing package only while we're developing and the flag would

32
00:02:40,230 --> 00:02:42,970
be the same and then the stuff.

33
00:02:43,380 --> 00:02:45,360
Now, what would be the most common one?

34
00:02:45,370 --> 00:02:45,750
I don't know.

35
00:02:45,750 --> 00:02:46,580
Might be testing.

36
00:02:46,920 --> 00:02:50,820
So essentially we only need that package while we're developing.

37
00:02:51,060 --> 00:02:52,850
Then, of course, we're just using it.

38
00:02:53,070 --> 00:02:57,200
And then once we ship to production, we don't need that package anymore.

39
00:02:57,510 --> 00:03:01,710
So remember that testing folder that we created?

40
00:03:02,040 --> 00:03:03,720
So now let's try some things out.

41
00:03:04,200 --> 00:03:10,550
But I'm going to do is first, of course, Zuman in my terminal, then of course, I would want to navigate

42
00:03:10,560 --> 00:03:10,830
there.

43
00:03:11,050 --> 00:03:14,050
So I think the fastest way will be just drag and drop.

44
00:03:14,460 --> 00:03:20,780
Now, of course, I'm in my testing and remember, first we would want to create that manifest while

45
00:03:21,030 --> 00:03:24,720
again, something that create react up the package.

46
00:03:24,720 --> 00:03:27,140
We're going to use those already for us.

47
00:03:27,450 --> 00:03:30,590
So this is just to showcase the general setup.

48
00:03:30,900 --> 00:03:35,930
And in order to get our manifest file, we'll just run NPM in it.

49
00:03:36,270 --> 00:03:38,640
Now, there's a bunch of questions there.

50
00:03:38,650 --> 00:03:44,820
So if you would want to meet that, you can just go with the Y or in my case, I'm going to go with

51
00:03:45,390 --> 00:03:45,530
it.

52
00:03:45,840 --> 00:03:48,340
And that creates a question.

53
00:03:48,390 --> 00:03:50,640
So in this case, what would be the package name?

54
00:03:50,970 --> 00:03:53,070
I'm going to call this app version.

55
00:03:53,280 --> 00:03:58,830
And as you can see, I can skip them if I want to, since, again, this is just to showcase how it's

56
00:03:58,830 --> 00:03:59,460
going to look like.

57
00:04:00,120 --> 00:04:05,880
I'm just going to skip them by pressing enter and this shows what I'm going to currently have in the

58
00:04:05,880 --> 00:04:06,660
package duration.

59
00:04:07,320 --> 00:04:10,790
So of course, I'm going to say that that looks OK.

60
00:04:10,950 --> 00:04:11,790
So say yes.

61
00:04:12,120 --> 00:04:16,860
And now if I check out my testing, I'll have the packages on.

62
00:04:17,860 --> 00:04:25,510
So let me open my text letter here and I'll just drag and drop testing just so I can see that of course

63
00:04:25,510 --> 00:04:28,880
I have my package on and there it is.

64
00:04:29,020 --> 00:04:33,410
So applying the version description, what is going to be the entrance file?

65
00:04:33,430 --> 00:04:37,180
So the main file and in this case it is indexed that is by default.

66
00:04:37,180 --> 00:04:42,160
Of course, we don't have the index jazz and then we have scripts and author.

67
00:04:42,400 --> 00:04:45,970
Now, scripts is an interesting one because we create react up.

68
00:04:46,180 --> 00:04:51,500
Like I was saying, the script that you use most is going to be npm start.

69
00:04:51,730 --> 00:04:55,370
So essentially these are just commands that you can run.

70
00:04:55,810 --> 00:05:04,330
Now let me showcase how we would install a package and we can do it directly from the text letter or

71
00:05:04,330 --> 00:05:06,370
we can do it from the terminal.

72
00:05:06,490 --> 00:05:10,700
Please keep in mind that as long as we're sitting in the same folder, it doesn't matter.

73
00:05:10,930 --> 00:05:14,140
And that's one of the reasons why I like Visual Studio code.

74
00:05:14,380 --> 00:05:17,260
It comes it comes with integrated.

75
00:05:17,980 --> 00:05:21,400
Now how we can access integrated thermal and reduce their code.

76
00:05:22,300 --> 00:05:25,140
We go with control until the end.

77
00:05:25,150 --> 00:05:30,890
Notice here all the way in the bottom I have the thermal and what's really cool that now out right away

78
00:05:31,390 --> 00:05:33,280
kind of be in the folder.

79
00:05:33,700 --> 00:05:40,060
So it's not like I would specifically need to navigate there, just like I would do in a terminal.

80
00:05:40,240 --> 00:05:46,840
In this case, when I'm opening up the integrated terminal from the visuals that are called I'm right

81
00:05:46,840 --> 00:05:48,730
Away at my project.

82
00:05:49,030 --> 00:05:50,970
So I'm in the testing now.

83
00:05:50,980 --> 00:05:56,180
Of course, I would want to install first dependency and I'll just randomly install bootstrap.

84
00:05:56,410 --> 00:06:01,420
So we go with NPM install and then whatever is the package name.

85
00:06:01,420 --> 00:06:03,100
So I know that it is bootstrap.

86
00:06:03,340 --> 00:06:07,420
And then like I said, just in case our run, dash, dash, save.

87
00:06:07,750 --> 00:06:12,130
And what you'll notice is that of course we're installing dependencies.

88
00:06:12,400 --> 00:06:19,890
And the moment I do it, notice here how I have the property and the value right now is bootstrap.

89
00:06:20,140 --> 00:06:24,350
So now I installed this dependency and of course I can use it locally.

90
00:06:24,610 --> 00:06:28,800
Now, what you'll notice is that we have node modules.

91
00:06:28,840 --> 00:06:33,730
This is going to be a folder where we'll have a list of our dependencies.

92
00:06:34,030 --> 00:06:39,910
Now, at the moment, we have bootstrap, but then again, once we start using create ragtop, you'll

93
00:06:39,910 --> 00:06:45,580
see that, of course, since it is a bigger package, it uses more and more dependencies.

94
00:06:45,790 --> 00:06:49,650
So our node modules folder is going to be way bigger.

95
00:06:49,990 --> 00:06:56,590
Now, as a side note, when you're sharing this, for example, when you're adding us to GitHub, your

96
00:06:56,590 --> 00:07:00,130
folder, you usually just add packages on.

97
00:07:00,820 --> 00:07:06,670
So essentially you wouldn't share no modules because usually that is a massive, massive folder.

98
00:07:06,970 --> 00:07:13,300
So much more easier way is just adding everything to get but not the node modules.

99
00:07:13,520 --> 00:07:15,340
So essentially just a package JSON.

100
00:07:15,610 --> 00:07:23,080
And then once you clone a fork or download the folder, which you can do is just one NPM install which

101
00:07:23,080 --> 00:07:25,010
installs all dependencies down.

102
00:07:25,030 --> 00:07:27,940
Don't worry, of course we'll cover that a little bit later.

103
00:07:27,940 --> 00:07:31,890
And of course, because there are some projects that are already set up for you.

104
00:07:32,110 --> 00:07:36,100
So the only thing you'll need to do is just follow the link to repo get.

105
00:07:36,430 --> 00:07:42,280
And then once you get the link, meaning once you clone it, work it or down on it, then you just need

106
00:07:42,280 --> 00:07:44,410
to run and install.

107
00:07:44,770 --> 00:07:49,850
So this would be for the local package, which essentially wants to have installed bootstrap.

108
00:07:50,050 --> 00:07:56,230
Now I can start using how I remember I also said that we can use global packages.

109
00:07:56,230 --> 00:07:56,620
Correct.

110
00:07:56,890 --> 00:08:03,880
Now I can install global package from the integrated terminal or I can do it again from the terminal.

111
00:08:04,050 --> 00:08:05,000
That's up to you.

112
00:08:05,470 --> 00:08:13,690
The difference is that if you install a package globally, you can use it anywhere in your machine,

113
00:08:13,810 --> 00:08:18,580
meaning you can use it on the desktop, you can use it in the project or whatever.

114
00:08:18,790 --> 00:08:24,990
Now, again, the Gocha with a global install is that it is going to be asking for missions.

115
00:08:25,240 --> 00:08:26,230
So in this case, you know what?

116
00:08:27,040 --> 00:08:33,400
I'm going to go to Thurmont just to showcase that, for example, I would be installing a Gadsby Kly

117
00:08:33,700 --> 00:08:34,360
from there.

118
00:08:34,750 --> 00:08:40,210
Remember, this was a road folder and the name was NPM Install.

119
00:08:40,480 --> 00:08:45,810
And then I go with Gadsby Zeolite and then I need to go with Dadge again.

120
00:08:45,820 --> 00:08:47,350
You don't need to run this command.

121
00:08:47,380 --> 00:08:53,140
This is just Ashoka's that if you won't have permissions, which at the moment I don't, since I'm not

122
00:08:53,140 --> 00:08:58,160
running Shuto, then of course I'm going to get a big factor.

123
00:08:58,570 --> 00:09:03,000
And there is of course, like I was saying, we get a bunch of errors.

124
00:09:03,310 --> 00:09:10,840
So again, in order to augment that, we would need to add pseudo so I could go back to my previous

125
00:09:10,840 --> 00:09:13,780
command and I would just add Sudar over here.

126
00:09:13,990 --> 00:09:17,130
And then once you're on, of course, it's going to ask for your password.

127
00:09:17,440 --> 00:09:19,630
So you would need to add your password.

128
00:09:19,840 --> 00:09:26,940
And then once you do, of course, you just press enter and then the install is going to be successful.

129
00:09:27,310 --> 00:09:34,780
So that's the general overview of NPM, how we would install locally and Howard set up globally.

130
00:09:35,050 --> 00:09:41,710
Again, when it comes to create react app, it does all the heavy lifting already for us under the hood.

131
00:09:41,980 --> 00:09:46,840
So the only thing we'll really need to care about is just checking out the scripts.

132
00:09:47,080 --> 00:09:54,160
So essentially the script commands that we have so that we will know how to set up the deaf server.

133
00:09:54,370 --> 00:10:00,640
And also once in a while, of course, we will install some package locally to our project, whether

134
00:10:00,640 --> 00:10:06,430
that is bootstrap, whether that is react icons or something along those lines.