Now, in the last lesson, we looked at how to use some of the native node modules, but in this lesson 1
we're going to expand our horizons and we're going to learn about the Node Package Manager or otherwise 2
known as NPM in order to get access to the world of open source node packages. 3
So what exactly is the Node Package Manager also known as NPM? 4
Well, it's basically a place which collects modules that people have built for Node and it's created 5
by the GitHub organization and it's a really great place to find code that other people have written 6
where the utilities and tools to help you with writing your Node applications. 7
Now if we think of the native Node modules as the toolbox that we have at home, then the NPM or the 8
Node Package Manager is the place where you'll find all the weird and wonderful tools that you never 9
thought you would need, but then all of a sudden you realize that your bathtub is leaking and you actually 10
need to silicone the edges, which, by the way, is not an easy job. 11
And as a non-professional, you should not take it on. 12
Don't ask me how I know this. NPM is kind of like a community tool library. 13
So there are people who own weird stuff like Sanders and Silicone guns and all sorts of different Clippers, 14
whatever it may be, 15
and together they've put it into a library so that everyone from the neighborhood can share and use 16
these tools. 17
And NPM is kind of like the code equivalent of that. 18
It's open source and you can search to find all the packages that other developers have created, little 19
tools that they've written the code for that they think might be useful for other developers in the 20
future so that you don't have to duplicate the work and to write everything from scratch. 21
So it's our shared code library, if you will. 22
NPM comes pre-bundled with Node, so if you have Node installed, you will also have NPM installed. 23
Let's initialize our first project and see how we can configure our project. 24
Go ahead and download the starting project folder 2.3 NPM, extract it and open it inside VS Code. In 25
the index.js, 26
again, we have a blank file, but the first thing we're going to do to add to this project is to initialize 27
NPM. 28
And to do that we first have to change the directory over to this project folder, 2.3 NPM, and then we're 29
going to use the "npm" command and then we're going to add the word "init". 30
Now you can go ahead and hit Enter and this brings up the initialization utility, which is going to 31
help us create our configuration file, which is called the package.json. 32
It's going to ask us a bunch of questions and we just have to type the answers. 33
So first it wants to know what is the package name? 34
We will call it, "learning-npm," and then it's going to ask us the version which I'll leave as the 35
1.0.0. 36
So just hit Enter. Description: 37
"I'm learning about npm," entry point is the Index.js, test command: 38
we'll leave as empty, git repository: empty, keywords: empty, 39
and maybe put your own name as the author, the license 40
we'll leave it as ISC, 41
and then finally, you can see it's generated our json, which is the configuration file for our project. 42
And then it's asking us whether if this is okay, we can type y for yes and hit Enter. 43
So now if there is a new file that has been created in our NPM folder, and it's the package.json. So 44
this is a way of representing our data, the JavaScript object notation. 45
And you can see it's very similar to the way that JavaScript objects are structured and it's just key/ 46
value pairs describing all of the things that we've entered just now. 47
This is just a configuration file, nothing magical about it. 48
Where the magic comes in is when we start installing and using NPM packages and to install an NPM package, 49
we use the "npm install" command and then we add in the name of the package. 50
So where are these packages? 51
Well, you can find them by going to npm.js 52
and here you can search for the entire world of packages, 53
but you would kind of need to know what it is you want to do. 54
So I want to show you a package that I found earlier, which is called sillyname. 55
And all it is, is just a random name generator so you can give yourself a new name that is pretty silly, 56
like Saltfollower Pickle or Roadtoe Ginger, 57
but we're going to use this silly package in order to learn some really important concepts like how 58
to find a package, how to install the package, and then how to use it. To install any of the NPM packages, 59
you'll see the command over here. 60
So let's copy it, and let's go back to our terminal and paste that command in. 61
Once you've pasted it in, you can see it's actually a shorthand, 62
"npm i" 63
is short for "npm install", and because you'll be using this command very frequently when you're using 64
Node, you can simply shorten it down to npm i. 65
Now in this case we're just installing one NPM package, but if you wanted more packages then you can 66
enter the names of all the packages you want in one go with a space in between and you'll see me doing 67
this in our later projects as well. 68
But in our case, we just want to install this one package and let's go ahead and hit Enter. 69
And once it's installed, if you check the package.json again, you can see it's inserted a new section 70
called "Dependencies". 71
So it's saying now our project, our learning-npm, which is accessed through the Index.js, and now depends 72
on this NPM package called sillyname. 73
And in addition, we've got a folder called node_modules that's downloaded all of this code from the NPM 74
repositories for this sillyname. 75
And you can see the code this creator wrote so that we can use this functionality in our project without 76
having to write all of this code. 77
Pretty neat. 78
Now let's collapse those folders, go back into our index.js and take a look at the documentation to 79
see how we can use this package. As usual on the NPM package homepage, you'll see some examples for 80
how you can use it, and the first thing you can do is to require that package. 81
So let's paste that in 82
at the top. We're creating a variable called generate name that requires this module. 83
Don't worry too much about the var, 84
we're going to come back to that in a minute. 85
The next step is to use the method called generate name that comes from this module. 86
Let's copy this as well and paste it in. 87
Now, in order to actually console.log it, we'll need our console log. 88
And I'm going to say something like, "My name is...." and I'm using the string interpolation from JavaScript 89
with the backticks (``) either side and then the dollar sign ($) and the curly brackets ({}) to insert the sillyname 90
that is generated. 91
Let's add a full stop, and add the closing semicolon, hit Save. 92
Now we are ready. 93
We've completed our project. Going back into our terminal, 94
let's use node to run our index.js. 95
Hit Enter and you can see, "My name is Spot Runner Bison," which is not too bad actually. 96
Waxthunder foot. 97
That is a good name. 98
Now you can see how easy it was to grab a package, download it, insert it into our project, and instantaneously 99
gain this upgrade and be able to use the code that somebody else created for our purposes in our project. 100
In a way, it's kind of like playing with Lego. 101
There's all of these different Lego pieces out there which other people have created or the Node team 102
has created, and all you have to do is just to plug it into your project. 103
And by playing and constructing all of these different Lego packages together, you can actually create 104
something really massive and really impressive, and really useful with not a lot of hard work and writing 105
code from scratch yourself. 106
Now, this is a good point to mention the ECMAScript modules. 107
Remember in the last lesson when we learned about the native node modules and I showed you the File 108
system when we looked at the example code for how to get hold of the package, you can see there is 109
this toggle ESM or CJS. 110
CJS stands for CommonJS and this was the method using, "require" that we used to use to get hold of Node 111
modules, native node modules or even NPM modules. 112
It was always using that "require" keyword. 113
However, since version 12 of Node, we've moved on a little bit, and Node is now enabled to use ECMAScript 114
modules. 115
So instead of using require, we can use the "import" keyword. 116
And this basically provides a standardized way of using JavaScript to be consistent on the front-end 117
and the back-end. 118
It also improves things through tree shaking and a whole bunch of crazy things behind the scenes, which 119
we don't need to get into. 120
But all it means for us is we can use. 121
Use that "import" keyword. In order to upgrade our project 122
to be able to use ECMAScript with Node, we actually need to go into the package.json. 123
Remember I told you that this package.json comes from NPM but effectively acts as a configuration file 124
for our project. 125
So what we can do in here is we can find a location. 126
So I normally like to go below this comma for "main" and we can add in a string which is called, "type". 127
The type of project we're going to use is going to be module-based so that we can use our imports and 128
use ES modules instead of using the default, which as of yet, right now, is the default value, which is 129
CommonJS. 130
So let's change that to module, and let's hit Save, and let me show you how we can convert this line to 131
use the new format. 132
Let's go ahead and write the "import" keyword. 133
And then the next thing we add here is the "method or object" that we want to import, and then we add 134
the "from" keyword and a string in order to specify which package or module we want to get hold of this 135
thing from. 136
So in our case, our package is called sillyname. 137
So that's where it's going to be from. 138
And I like to use this format where I write import (space space) from module, and then now when I go back 139
in here and I look for that generateName function, it gets auto-suggested to me. 140
Whereas if I do it this way, where I write generateName VS Code, doesn't actually know what the name 141
of this method is because we haven't specified the module that it's coming from. 142
This is just a little bit of a tip for when you need to do this. 143
So now we can go ahead and get rid of this line and everything still works as perfect. 144
So now I have a bit of a challenge for you and I want you to bring out the superhero in you. 145
What do I mean? 146
Well, we're going to go and find an NPM package called superheroes. 147
Don't worry if you can't find it, 148
I've linked to it in the course resources, 149
and here we've got a package that will allow us to generate a random superhero name. 150
So your task is to install this package into your project, into that same index.js that we used before 151
to generate the sillyname, 152
but this time I want you to console log something like, "I am..." and then it's your superhero name and maybe 153
an exclamation mark (!) just to make it more dramatic. 154
So that has to come out in the console log using this package. Pause the video and see if you can complete 155
this challenge. 156
All right. 157
So firstly, we're going to need to install this package. 158
So going into our terminal, making sure we're in the right folder, let's install that module and then 159
once that's done, let's check our package.json to make sure that that dependency got added. 160
Perfect. 161
And then let's go back to our code and I'm just going to comment out all the previous code and now I'm 162
going to use the import to get hold of this superheroes package, "import from..." 163
and then remember, it's a string called, "superheroes". 164
It has to be an s, It has to match the name of your package 165
precisely. 166
So very often I like to just paste it in and then we need the superheroes object from that package. 167
"import superheroes from superheroes". 168
And then we're going to use the superheroes.random() 169
method in order to generate a random name. 170
So let's create a const and let's set that to our name. 171
And then we can console.log( 172
"I am..." so and so, which is going to be the name inserted here 173
add an exclamation mark. 174
Close off the line. 175
Now I am done. 176
Let's hit Save. 177
Let's run our code using node. *error* 178
All right. 179
Now this is super important. 180
If you at this point see this error, "SyntaxError: Cannot use import statement outside a module". 181
This is because you might have skipped over the earlier part of this lesson, where we talked about ECMAScript 182
and how to enable it in our project. 183
Remember, you have to go into the package.json and add this extra key-value pair to set the "type" of 184
your project to module-based to allow us to use the ES modules. 185
So let's try this again. 186
Hopefully, 187
now you've added this and now if I go ahead and do node index.js, you can see it now works. 188
I am John Wraith!, I am Gertrude Yorkes!, I am Piledriver!, 189
that's a much better one. 190
All right. 191
So hope you had fun in this lesson. 192
And we learned about NPM packages and how to install and use them. 193
In the next lesson, we're going to be building a project that's going to create a QR code from a URL. 194
So for all of that and more, I'll see you there.