1
00:00:00,330 --> 00:00:00,990
Excellent.

2
00:00:01,320 --> 00:00:08,430
We now know that we have access to the NBN Global Command, we now know that in order to install the

3
00:00:08,430 --> 00:00:10,860
local package, we will need around 9pm.

4
00:00:10,860 --> 00:00:13,260
I am the package you name.

5
00:00:13,530 --> 00:00:14,550
So what are we missing?

6
00:00:14,970 --> 00:00:18,950
What we're missing by the name of package, Jason.

7
00:00:19,320 --> 00:00:26,370
And essentially you can think of it as a manifest file, that store's important information about our

8
00:00:26,370 --> 00:00:26,880
project.

9
00:00:27,300 --> 00:00:30,630
And there are three ways how you can create a package, Jason.

10
00:00:30,990 --> 00:00:38,280
First is the manual approach where you just create a package in the road and please do that in route

11
00:00:38,280 --> 00:00:41,940
if that's something that eventually you decide doing.

12
00:00:42,420 --> 00:00:45,510
And then, of course, you would need to create each property.

13
00:00:45,870 --> 00:00:49,980
Or there are two ways how we can automate this.

14
00:00:50,280 --> 00:00:53,190
And the first one is running NPM in it.

15
00:00:53,610 --> 00:00:59,580
And in there they just step by step, ask you the questions and if you want to skip it, you can just

16
00:00:59,580 --> 00:01:00,450
press enter.

17
00:01:00,990 --> 00:01:08,760
And the another way, the third way is running npm in it with a Y flag and then everything is set up

18
00:01:08,760 --> 00:01:09,420
as default.

19
00:01:09,780 --> 00:01:16,380
So I'm not going to show you the manual approach just too time consuming and will right away go with

20
00:01:16,380 --> 00:01:16,800
NPM.

21
00:01:16,800 --> 00:01:22,470
And at first I'll show you the step by step approach and then of course I'll show you how everything

22
00:01:22,620 --> 00:01:25,380
is set up by default using the white flag.

23
00:01:25,740 --> 00:01:28,950
So go to your terminal and just type NPM in it.

24
00:01:29,280 --> 00:01:30,270
And there it is.

25
00:01:30,300 --> 00:01:31,030
Of course not.

26
00:01:31,050 --> 00:01:36,780
I tell you that there's going to be a walkthrough of creating a package just on file.

27
00:01:36,960 --> 00:01:38,780
On the first one is the package name.

28
00:01:39,000 --> 00:01:42,930
And by default, of course, it is going to use the folder name.

29
00:01:43,200 --> 00:01:49,500
Now keep in mind that if you eventually want to publish this package, then the name has to be unique.

30
00:01:49,890 --> 00:01:57,390
So you need to make sure that nowhere in the NPM you can see the package with the same name.

31
00:01:57,630 --> 00:02:00,230
And I'm just going to go with editorial as far as version.

32
00:02:00,510 --> 00:02:05,070
We'll talk about versions shortly, so I'll just skip this one.

33
00:02:05,070 --> 00:02:10,680
As far as this description, whatever, again, is just the default now as far as the entry point eventually

34
00:02:10,680 --> 00:02:12,990
will change it, but for now, it's good enough.

35
00:02:12,990 --> 00:02:19,920
We're going to go with one introduce and then the test come out as well as git repository and keywords

36
00:02:19,920 --> 00:02:21,450
and author and license.

37
00:02:21,690 --> 00:02:25,130
And we simply say yes, and we are in good shape.

38
00:02:25,320 --> 00:02:30,870
So now, of course, we have these packages on file with name, version, description as well as the

39
00:02:30,870 --> 00:02:35,340
main property and of course the scripts author and the license.

40
00:02:35,610 --> 00:02:42,360
Now remove it and say delete and I'll show you that, of course, you can skip all of those questions

41
00:02:42,570 --> 00:02:46,350
by simply typing and PM in it and why.

42
00:02:46,770 --> 00:02:53,460
And as you can guess, yes, of course you can come here later and then just change these values.

43
00:02:53,670 --> 00:03:00,150
That's why it's definitely faster to just type AMPM in it than the white flag.

44
00:03:00,660 --> 00:03:03,450
So why do we need this package some.

45
00:03:03,930 --> 00:03:10,710
Well, because if I would want to install the package, the local package now, of course, this package

46
00:03:10,950 --> 00:03:13,470
is going to be stored as a dependency.

47
00:03:13,800 --> 00:03:16,890
And the share that let's just go with NPM and you're not.

48
00:03:17,950 --> 00:03:25,350
McClair Council first, so we're going to go and Pam, I am and we're going to go with a package named

49
00:03:25,400 --> 00:03:30,030
Logush, and if you're not familiar with Lodish, it's just a utility library.

50
00:03:30,030 --> 00:03:33,750
And I'm just specifically using for installation purposes.

51
00:03:33,780 --> 00:03:40,920
There's no real reason to have Lodish for our own project, but it's just something pretty interesting

52
00:03:40,920 --> 00:03:41,940
that I would want to showcase.

53
00:03:42,120 --> 00:03:48,570
That's why we're using Lodish and we run it and notice how we install the package and check it out.

54
00:03:48,900 --> 00:03:56,040
Now, in the package, Jessan, we have dependencies, property, and it's an object inside of that

55
00:03:56,040 --> 00:03:56,570
object.

56
00:03:56,820 --> 00:03:59,610
We have a package by the name of Lodish.

57
00:04:00,060 --> 00:04:07,590
Now, I'll show you in this video or maybe in the next one why it's so important to have this package.

58
00:04:07,590 --> 00:04:14,930
Jessan But another thing that I would want to showcase once we can see that we have dependancy property,

59
00:04:15,210 --> 00:04:22,680
if you go in your visual studio code and if you click on a refresh explorer, what you'll also notice

60
00:04:23,040 --> 00:04:25,830
is this node modules folder.

61
00:04:26,070 --> 00:04:31,960
And in that node modules folder, this is where all the dependencies are stored.

62
00:04:32,670 --> 00:04:37,150
So if you don't have that folder already and RPM creates it.

63
00:04:37,530 --> 00:04:40,070
So in our case, of course, we didn't have any dependencies.

64
00:04:40,350 --> 00:04:44,520
So when we installed that first dependency and RPM creates that folder.

65
00:04:44,730 --> 00:04:47,400
And this is where you'll find the dependencies.

66
00:04:47,730 --> 00:04:53,500
Now notice something interesting where for the Lodish we only have one folder, right.

67
00:04:53,790 --> 00:04:55,640
So we have only one dependency.

68
00:04:56,040 --> 00:05:02,880
But when we need to keep in mind that, of course, there's going to be some packages that have other

69
00:05:02,880 --> 00:05:03,630
dependencies.

70
00:05:04,330 --> 00:05:09,490
And that's why I first installed Laura Bush just to showcase that, yes, once you install dependency,

71
00:05:09,670 --> 00:05:12,400
of course, it is going to be in node modules.

72
00:05:12,730 --> 00:05:19,300
But if you'll try to install a package that is bigger, that uses other dependencies, you'll notice

73
00:05:19,300 --> 00:05:27,540
something pretty cool where if I clear my terminal and if I'm going to run AMPM, I can bootstrap again.

74
00:05:27,790 --> 00:05:29,680
You can use any other package you could want.

75
00:05:29,950 --> 00:05:33,150
This is just to showcase all the packages work.

76
00:05:33,490 --> 00:05:36,110
We won't use the bootstrap in this project.

77
00:05:36,310 --> 00:05:41,110
So once I install and once I refresh, check it out.

78
00:05:41,350 --> 00:05:48,580
Not only have Lodish not only have bootstrap, which I installed, but since Bootstrap is using jaggery

79
00:05:48,820 --> 00:05:52,900
as well as pop paper just now, these are installed as dependencies.

80
00:05:53,110 --> 00:05:58,460
And if you take a look at the dependencies property now, of course we have the bootstrap as well.

81
00:05:58,870 --> 00:06:04,920
And again, the whole point of this video is to showcase why we would need package Jessan.

82
00:06:05,380 --> 00:06:10,330
So we need it because we need to provide information about our project.

83
00:06:10,750 --> 00:06:17,680
And inside there, a very important problem is the dependencies, one, because in there we'll just

84
00:06:17,680 --> 00:06:24,820
store the dependencies which our project is using, and then some packages are actually going to use

85
00:06:25,060 --> 00:06:29,470
more dependencies and they will be automatically installed as well.

86
00:06:29,620 --> 00:06:32,020
In our case, that was bootstrap.

87
00:06:32,410 --> 00:06:40,030
And just to give you a taste of the package, why don't we just navigate to app?

88
00:06:40,440 --> 00:06:45,850
And I'm going to do that below the comments because you probably would need to clean the file and I'll

89
00:06:46,110 --> 00:06:55,540
not the last module, the DP I saved in file by the name of 12 HTP and back in the Objets in order to

90
00:06:55,540 --> 00:06:56,350
start using.

91
00:06:57,250 --> 00:07:04,030
The module in our case, I guess I'm going to go with Lodish first, I would need to set up the variable

92
00:07:04,270 --> 00:07:10,530
and common convention is calling the variable like so and I'll set it equal to require.

93
00:07:10,720 --> 00:07:13,700
And now, of course, we have access to the log.

94
00:07:14,140 --> 00:07:22,270
Now, this is the difference between node packages, like, for example, the SCDP or the file module

95
00:07:22,270 --> 00:07:29,680
or whatever, and the ones that you install, the external ones, external ones you always have to install

96
00:07:29,680 --> 00:07:30,040
first.

97
00:07:30,730 --> 00:07:35,170
If you want to install the dependency, will node won't be able to find it.

98
00:07:35,410 --> 00:07:38,620
So in our case, we did install the dependency Delaroche.

99
00:07:38,830 --> 00:07:40,780
So now of course I can just assign it.

100
00:07:40,780 --> 00:07:41,470
You're the variable.

101
00:07:41,770 --> 00:07:48,790
And since Lodish is utility L'Abri, why don't we test out one of the methods and I'm just going to

102
00:07:48,790 --> 00:07:51,460
go with items and I'll create an array of.

103
00:07:51,460 --> 00:07:54,220
All right, so I'm just going to be an array.

104
00:07:54,250 --> 00:07:58,180
However, the items are going to be arrays itself.

105
00:07:58,510 --> 00:08:00,490
So two, three.

106
00:08:00,910 --> 00:08:03,070
And then we're going to go with four.

107
00:08:03,520 --> 00:08:11,170
And Laura Bush has this method, the flattened DB method that effectively will just put this back as

108
00:08:11,350 --> 00:08:12,610
a flat array.

109
00:08:13,060 --> 00:08:21,340
And the way we set it up, we just go with const and I'll call this new items online since we have access

110
00:08:21,550 --> 00:08:24,260
to everything in this variable.

111
00:08:24,550 --> 00:08:35,230
Now I can simply go with muscaria, dot and own flat and so flatten deep and then will pass in the items.

112
00:08:35,409 --> 00:08:44,560
And now if we constantly log new items and if I go to my terminal and just type node abcess and by the

113
00:08:44,560 --> 00:08:45,390
way, I need to separate.

114
00:08:45,850 --> 00:08:53,200
So let me go back, I'll say node jazz and once we around check it out in a console, I can see of course

115
00:08:53,200 --> 00:08:55,180
the one, two, three, four.

116
00:08:55,480 --> 00:08:58,990
So low rush is the method by the name of flattened beep.

117
00:08:59,230 --> 00:09:02,410
We have access to it because we install it as dependency.

118
00:09:02,680 --> 00:09:05,710
Now of course I can start using it now.

119
00:09:05,740 --> 00:09:11,290
We're not going to use bootstrap in this project because that would be too time consuming.

120
00:09:11,560 --> 00:09:12,880
Bootstrap was just used.

121
00:09:13,300 --> 00:09:18,910
So you can see that some dependencies will have more packages.

122
00:09:19,090 --> 00:09:22,690
So once we start one dependency, there's actually going to be more dependencies.

123
00:09:22,810 --> 00:09:28,480
And hopefully you have a clear understanding of how you would set up package Jassam, how we would install

124
00:09:28,480 --> 00:09:28,960
the package.

125
00:09:29,200 --> 00:09:37,570
And next video I would want to showcase why having packaged Jason is so crucial and so beneficial when

126
00:09:37,600 --> 00:09:42,840
we are starting to share our project with other developers.