0
1
00:00:00,750 --> 00:00:08,130
In the last lesson we looked at how we can use native Node modules that were bundled with Node.js in
1

2
00:00:08,130 --> 00:00:14,610
order to use libraries of code that we didn't write but somebody else wrote in order to execute commonly
2

3
00:00:14,610 --> 00:00:16,850
used bits of functionality.
3

4
00:00:16,860 --> 00:00:24,270
Now, in this lesson, I want to talk about NPM, which is a package manager for external modules, so modules
4

5
00:00:24,270 --> 00:00:28,560
that anybody could build that you could incorporate into your projects.
5

6
00:00:28,560 --> 00:00:36,300
Now, NPM itself actually stands for Node Package Manager, and it's currently the world's largest collection
6

7
00:00:36,720 --> 00:00:38,990
of these packages of code.
7

8
00:00:39,000 --> 00:00:42,300
So why would you want to use a package manager anyways?
8

9
00:00:42,390 --> 00:00:47,660
Well, let's say that you were building a Lego house, and it's a bit of work putting it all together.
9

10
00:00:47,790 --> 00:00:52,020
Now, let's say that you want to have some trees around your Lego house as well.
10

11
00:00:52,020 --> 00:00:58,320
Now you could spend the time and energy figuring out how to put those trees together, or you could simply
11

12
00:00:58,320 --> 00:01:07,740
go onto NPM and find a tree package, and you can simply incorporate it and add it to your project. And it's
12

13
00:01:07,740 --> 00:01:11,190
exactly the same thing with code.
13

14
00:01:11,190 --> 00:01:19,650
The packages on NPM are bits of reusable code that somebody else wrote, and using NPM you can incorporate
14

15
00:01:19,650 --> 00:01:22,300
those packages into your own projects,
15

16
00:01:22,380 --> 00:01:27,830
saving you the time and effort that's required to write those bits of code yourself.
16

17
00:01:28,290 --> 00:01:31,000
Now NPM actually gets bundled with Node,
17

18
00:01:31,080 --> 00:01:34,340
so when we installed node we already installed NPM.
18

19
00:01:34,440 --> 00:01:38,940
Now, I'm going to delete those two files that we created in the last lesson,
19

20
00:01:39,360 --> 00:01:45,870
and I'm also going to split screen my Hyper.js with Atom,
20

21
00:01:46,020 --> 00:01:50,640
so that means that you guys can see both of them on the same screen, which should make it easier to figure
21

22
00:01:50,640 --> 00:01:52,010
out what's going on.
22

23
00:01:52,050 --> 00:01:59,190
Now I'm going to clear my console so that I start off with a clean slate, and, making sure that you're
23

24
00:01:59,340 --> 00:02:03,280
still inside the intro-to-node directory,
24

25
00:02:03,540 --> 00:02:09,240
we’re going to initialize NPM by saying npm init.
25

26
00:02:09,390 --> 00:02:14,760
And when I hit enter you can see that it's going to run through a utility. It’s kind of like the wizard
26

27
00:02:14,760 --> 00:02:18,760
that you get on Windows when it tries to help you set something up.
27

28
00:02:18,780 --> 00:02:24,690
So the first thing it asked me is what do you want to call your package, and they give you a suggestion inside
28

29
00:02:24,690 --> 00:02:28,080
these parentheses. Are you OK with calling it intro-to-node?
29

30
00:02:28,320 --> 00:02:34,410
Which I'm fine with that, so I'll just hit enter. And then it asks me what's the version of your project,
30

31
00:02:34,500 --> 00:02:37,460
and I'm happy with 1.0.0.
31

32
00:02:37,470 --> 00:02:40,250
Now, the next thing is the description of your project.
32

33
00:02:40,290 --> 00:02:51,690
So let's say, “This is a intro to node project.” And then that becomes the description. The entry point will
33

34
00:02:51,690 --> 00:02:58,260
refer to your main Javascript file, and I've called it index.js. That’s their recommended name as
34

35
00:02:58,260 --> 00:03:00,690
well, so I can just hit enter as well.
35

36
00:03:00,750 --> 00:03:01,430
Test command
36

37
00:03:01,440 --> 00:03:02,270
I'm going to ignore,
37

38
00:03:02,280 --> 00:03:08,400
so I'm just going to hit enter. Git repository we also don't have one, but we will talk about it a lot later
38

39
00:03:08,400 --> 00:03:08,770
on,
39

40
00:03:08,910 --> 00:03:13,680
so we're going to skip this as well, so just hit enter. Keywords, hit enter to ignore.
40

41
00:03:13,860 --> 00:03:14,780
And then author,
41

42
00:03:14,780 --> 00:03:16,470
I'll just put my name, or,
42

43
00:03:16,620 --> 00:03:20,010
in your case, you would put your name. And finally license,
43

44
00:03:20,020 --> 00:03:21,200
ISC, that's fine, hit enter.
44

45
00:03:21,230 --> 00:03:28,200
And now it's compiled all of this data together, and you can see that it's got a name, it’s got a version,
45

46
00:03:28,300 --> 00:03:31,350
it’s got a description, and then it asks you, “Is it OK?”
46

47
00:03:31,400 --> 00:03:33,780
And if you hit enter, then that means it's yes,
47

48
00:03:33,960 --> 00:03:35,690
and that's now done.
48

49
00:03:35,700 --> 00:03:40,900
So that process has created this file called package.json.
49

50
00:03:40,980 --> 00:03:48,000
And this is a description of all of your NPM packages so far.
50

51
00:03:48,120 --> 00:03:53,510
Once we start installing external packages, they will also show up in this file.
51

52
00:03:53,610 --> 00:03:54,570
So enough talking.
52

53
00:03:54,570 --> 00:03:58,260
Let's go ahead and install an NPM external module.
53

54
00:03:58,260 --> 00:04:03,960
So if you head over to npmjs.com, then you've got this big search bar where you can search for
54

55
00:04:04,290 --> 00:04:06,270
all the packages that they contain.
55

56
00:04:06,540 --> 00:04:15,180
And, at the time of making this, there are 650,000 NPM packages,
56

57
00:04:15,180 --> 00:04:17,160
so that's a lot to play with.
57

58
00:04:17,160 --> 00:04:23,760
Now, the one that we're going to check out is we're going to look for something that will generate superhero
58

59
00:04:23,760 --> 00:04:25,140
names.
59

60
00:04:25,140 --> 00:04:31,260
So I'm just going to type in ‘superhero names’, and the first package I get is something called ‘superheroes’.
60

61
00:04:31,500 --> 00:04:37,410
And if you click on it, there's a description that tells you how this package works.
61

62
00:04:37,410 --> 00:04:42,890
So, in order to install it, you write ‘npm install superheroes’. In order to use it,
62

63
00:04:42,900 --> 00:04:51,000
you require the module, and then it has a method called .random that will generate as an output a
63

64
00:04:51,000 --> 00:04:57,930
superhero name. And with all of the NPM modules, you can see that there's extensive documentation on what
64

65
00:04:57,930 --> 00:05:03,390
you can do with it, and how you can install it, related modules, and a whole bunch of things.
65

66
00:05:03,430 --> 00:05:05,040
And I'm going to show you how we can use it.
66

67
00:05:05,140 --> 00:05:09,690
So firstly, as with any NPM module, we first have to install it.
67

68
00:05:09,840 --> 00:05:14,770
So, to install it, we just make sure that we're, again, inside the right directory,
68

69
00:05:14,800 --> 00:05:16,690
so our project folder,
69

70
00:05:16,870 --> 00:05:23,590
and then we write ‘npm install’, and then we write the name of the module, which in this case is called
70

71
00:05:23,670 --> 00:05:26,540
superheroes, plural.
71

72
00:05:26,560 --> 00:05:34,240
So, superheroes. And make sure that you spell it exactly the way that you see it over here, including
72

73
00:05:34,240 --> 00:05:37,190
any capitalizations or dashes that they may have.
73

74
00:05:37,540 --> 00:05:45,840
So now if I hit enter, it will go online and it’ll download that module, and you can see that we now, in our package.json,
74

75
00:05:45,880 --> 00:05:48,970
have a dependency.
75

76
00:05:49,000 --> 00:05:54,730
So our project now depends on a module, and that module is called superheroes
76

77
00:05:54,730 --> 00:05:56,900
version 1.0.0.
77

78
00:05:56,950 --> 00:06:00,640
And you can see over here we get a few warnings and a few notices.
78

79
00:06:00,730 --> 00:06:02,330
Don't worry too much about that.
79

80
00:06:02,350 --> 00:06:07,660
Once we learn about GitHub and Git and version control, then we will get rid of these warnings.
80

81
00:06:08,050 --> 00:06:11,950
At the moment it’s not going to affect our project or our code at all,
81

82
00:06:11,950 --> 00:06:13,330
so don't worry.
82

83
00:06:13,330 --> 00:06:20,350
So, now that we've installed our superheroes package, so if we go into index.js, we're now going
83

84
00:06:20,350 --> 00:06:24,800
to delete this code, which was using an internal Node.js module,
84

85
00:06:25,090 --> 00:06:30,060
and we're going to instead require this superheroes module.
85

86
00:06:30,400 --> 00:06:34,650
And you can see they clearly documented this is how you might use it.
86

87
00:06:34,750 --> 00:06:43,930
So we'll create a var called superheroes, and we're going to set it to equal require the module 
87

88
00:06:43,930 --> 00:06:46,660
superheroes.
88

89
00:06:46,660 --> 00:06:55,420
So now that incorporates this module into our current project, and we're able to use it by tapping into
89

90
00:06:55,630 --> 00:07:03,250
this .random function. And all it does is it generates a random superhero name as the output.
90

91
00:07:03,250 --> 00:07:12,010
So let's write ‘superheroes’, which is our superheroes module, . to tap into one of its methods, and the
91

92
00:07:12,010 --> 00:07:14,990
method is called random.
92

93
00:07:15,010 --> 00:07:18,850
Now this as an output generates a random superhero name,
93

94
00:07:18,880 --> 00:07:26,160
so we're going to store that output into a variable, and we're going to call it mySuperheroName.
94

95
00:07:26,170 --> 00:07:35,290
So now we have installed the superhero package, we have included it in our project, and we now are using
95

96
00:07:35,290 --> 00:07:38,220
it to generate a superhero name.
96

97
00:07:38,230 --> 00:07:45,240
Now we should log that superhero name into our command line or our console so that we can see it.
97

98
00:07:45,250 --> 00:07:54,400
So lets simply log mySuperheroName, and lets hit save, and now we can run our code by saying again node
98

99
00:07:54,820 --> 00:07:57,490
index.js.
99

100
00:07:57,550 --> 00:08:02,460
So if I hit enter, you can see we get a name called Free.
100

101
00:08:02,480 --> 00:08:04,100
Its not a very good superhero name.
101

102
00:08:04,240 --> 00:08:05,560
Let's try again.
102

103
00:08:05,560 --> 00:08:06,430
What about the next one?
103

104
00:08:06,430 --> 00:08:08,180
Dragonfly. Oh, I like that.
104

105
00:08:08,260 --> 00:08:13,180
Let's try again. Iron Lad. Hmm, yeah, not feeling it.
105

106
00:08:13,210 --> 00:08:19,900
But in this lesson, you’ve seen how we can go intonations NPM, we can search for packages that might interest us,
106

107
00:08:20,260 --> 00:08:26,170
and very often I will spend a lot of time on here just window shopping, browsing the packages that might
107

108
00:08:26,170 --> 00:08:28,760
inspire my next web project.
108

109
00:08:28,780 --> 00:08:37,150
So the process of incorporating an external package was firstly using npm init in order to initialize
109

110
00:08:37,570 --> 00:08:41,710
a package file, and you can see that this is called package.json.
110

111
00:08:41,720 --> 00:08:48,730
And json is just simply a file format that's used to organize data, and it looks almost a little
111

112
00:08:48,730 --> 00:08:54,790
bit like Javascript objects, where you have a key, and you have a value, and it's just a very simple way
112

113
00:08:54,790 --> 00:08:56,530
of structuring data.
113

114
00:08:56,560 --> 00:09:02,980
And after we initialize this file, we then installed an external package that we wanted, which was called
114

115
00:09:03,150 --> 00:09:08,730
superheroes, and that gets added in as a dependency to our project,
115

116
00:09:08,770 --> 00:09:16,300
so our project now depends on this external package. And it depends on it because we are requiring it
116

117
00:09:16,420 --> 00:09:23,200
inside our project, and then we're using it's random function in order to generate a superhero name.
117

118
00:09:23,500 --> 00:09:30,280
So we literally had to do no work at all in order to have a bit of functionality that will just keep
118

119
00:09:30,280 --> 00:09:36,160
generating new superhero names every single time we run this code.
119

120
00:09:36,190 --> 00:09:39,560
Now as a challenge I want you to do this yourself.
120

121
00:09:39,580 --> 00:09:41,540
So in addition to superheroes.
121

122
00:09:41,740 --> 00:09:48,560
So in addition to superheroes, there's also an NPM package called supervillains, and this allows you
122

123
00:09:48,560 --> 00:09:53,350
to generate supervillain names, which I think is going to be a lot better than the sort of stuff that
123

124
00:09:53,350 --> 00:09:54,970
we're coming up over here.
124

125
00:09:55,150 --> 00:09:56,970
Not looking that great.
125

126
00:09:57,040 --> 00:09:59,630
I'm not very keen on any of these names so far.
126

127
00:09:59,890 --> 00:10:02,580
Maybe we’ll have more luck with the supervillains.
127

128
00:10:02,620 --> 00:10:11,620
So I want you to install this package to our current project, and then I want you to use it to be able
128

129
00:10:11,620 --> 00:10:14,920
to console.log some supervillain names.
129

130
00:10:14,920 --> 00:10:20,130
So pause the video now and complete this challenge.
130

131
00:10:20,170 --> 00:10:20,530
All right.
131

132
00:10:20,530 --> 00:10:27,250
So, after seeing the process of installing an NPM package, I just wanted you to try it out yourself, just
132

133
00:10:27,250 --> 00:10:31,330
so that you can give it a go yourself and see how easy it is.
133

134
00:10:31,330 --> 00:10:38,730
So over here you can see that in order to install, all we had to do is write ‘npm install supervillains’,
134

135
00:10:39,250 --> 00:10:41,940
and we do that inside our command line.
135

136
00:10:41,940 --> 00:10:42,820
So over here,
136

137
00:10:42,820 --> 00:10:49,450
I’ll write ‘npm install supervillains’, making sure that I'm spelling it right.
137

138
00:10:49,680 --> 00:10:54,700
And now it goes onto NPM, fetches the package, and installs it into our project.
138

139
00:10:54,700 --> 00:11:02,740
So now, inside our package.json we now have this dependency listed, and inside our node_modules folder,
139

140
00:11:02,870 --> 00:11:04,860
you can see that there's a whole bunch of things,
140

141
00:11:04,870 --> 00:11:10,220
but we've also got our superhero and supervillain packages.
141

142
00:11:10,330 --> 00:11:16,810
Now the reason why there's so many other packages is because these guys themselves also have dependencies.
142

143
00:11:16,930 --> 00:11:19,780
So our project depends on superheroes.
143

144
00:11:20,020 --> 00:11:27,120
But superheroes will have its own dependencies, and then these packages might have their own dependencies.
144

145
00:11:27,150 --> 00:11:29,690
And it's kind of like Inception.
145

146
00:11:29,800 --> 00:11:36,850
There's just many many layers, and in the end we end up with all of these packages which we have to incorporate
146

147
00:11:36,940 --> 00:11:39,270
in order for all the modules to work.
147

148
00:11:39,610 --> 00:11:45,190
So now, inside our index.js, in order to use this new package,
148

149
00:11:45,250 --> 00:11:47,230
we of course have to require it.
149

150
00:11:47,290 --> 00:11:52,990
So I'm going to do it up here, next to where we've got our superheroes package.
150

151
00:11:53,080 --> 00:11:59,860
So I'm going to say ‘var supervillain = require’, and then the name of the package, which is
151

152
00:11:59,980 --> 00:12:01,390
supervillains.
152

153
00:12:01,570 --> 00:12:04,540
Then I'm going to check their documentation.
153

154
00:12:04,540 --> 00:12:09,920
So, again, it has a method called .random, which generates a random supervillain name.
154

155
00:12:09,970 --> 00:12:23,200
So I can simply write ‘var mySupervillainName = supervillain.random();’.
155

156
00:12:23,690 --> 00:12:30,460
And now, in addition to console logging my superhero name, I'm also going to console.log my supervillain
156

157
00:12:30,460 --> 00:12:31,020
name.
157

158
00:12:31,150 --> 00:12:38,000
So now, if we save this file and we execute it inside our command line, then we can simply say ‘node 
158

159
00:12:38,010 --> 00:12:38,910
index.js’.
159

160
00:12:39,190 --> 00:12:42,400
And if I hit enter I should get two names this time.
160

161
00:12:42,400 --> 00:12:49,570
One is my superhero name, which is kind of naff, and the other one is my supervillain name, which sounds
161

162
00:12:49,660 --> 00:12:51,040
a lot better.
162

163
00:12:51,400 --> 00:12:56,190
For some reason I am a lot more drawn to these supervillain names.
163

164
00:12:56,200 --> 00:13:02,280
Captain Boomerang. The Scorpion. Electrocutioner.
164

165
00:13:02,500 --> 00:13:04,100
Yeah I'm really liking this.
165

166
00:13:04,180 --> 00:13:04,480
All right.
166

167
00:13:04,480 --> 00:13:10,690
So, I hope this lesson was interesting, and we've learned a whole bunch of things in this module, including
167

168
00:13:10,690 --> 00:13:18,610
how to get started using Node, using Node’s native packages, as well as NPMs, external packages, and this
168

169
00:13:18,670 --> 00:13:24,220
really is going to be our superpower that we're going to leverage to build really awesome web sites
169

170
00:13:24,550 --> 00:13:28,830
without having to spend a lot of time and energy and effort ourselves.
170

171
00:13:28,870 --> 00:13:36,100
So, in the next module, we’re going to look at a Node framework that's really really popular, and if you're going
171

172
00:13:36,100 --> 00:13:38,240
to be using Node, you're going to be using it.
172

173
00:13:38,440 --> 00:13:40,050
And it's called Express.
173

174
00:13:40,180 --> 00:13:43,520
So for all of that and more, I’ll see you on the next lesson.