Instructor: In this video, let's take a look
at the two types of packages that we can install
with npm, and also the two type of installs that there are.
So the two types of packages that we can install
are simple dependencies or development dependencies.
Now simple, or regular dependencies, are simply packages
that contain some code that we will include in our own code.
So code upon which we built our own application,
and that's why we actually call them dependencies,
because our project and our code depend on them
to work correctly.
For example, Express, which is, again,
the Node framework that we're gonna be using
later in the course,
that'll be a dependency.
So let's now install our very first dependency
just to show you how it works.
And the package that we're gonna install is called Slugify,
which is a small tool that we can use
to make more readable URLs out of names.
For example, like product names in the case
of our node form example.
So in order to install a simple dependency in npm,
all we have to do is say npm install,
and then the name of the package,
which is simply Slugify.
In previous versions, you would also have to say
dash dash save, like this,
but right now that's no longer necessary.
So if you just specify npm install slugify,
it'll then install this package as a regular dependency.
And watch what happens to our package.json file
once that installation is done.
So we'll hit return now, and let's see what happens.
And actually, that was really fast
and it installed our package right away,
and then created this new field here called dependencies,
and put our first dependency, Slugify, right in there.
It also then has the version of the package,
but we're gonna talk a bit more about that later
in this section.
This is our first dependency,
and again, this is just a regular dependency.
And we will use Slugify right in the next video,
so just to get a sense of how we use these
third party dependencies in our code.
But right now, what I want to show you
is that besides these regular dependencies,
we also have development dependencies.
And these are usually just tools for development,
for example like a code bundler like Webpack,
or a debugger tool or a testing library.
So these are development dependencies.
They are not needed for production,
so our code does not really depend on them,
we simply use them to develop our applications.
So let's now install a dev dependency,
which is just a short name for development dependency,
and the tool that we're gonna install
is called nodemon.
So npm install nodemon, like this,
and then what we have to do to specify
that this is a development dependency is to say save dev,
and so this will then add an entry to this package.json
in the dev dependencies.
So let's actually take a look at that
once this is done installing.
Now nodemon is a very nice tool that helps us develop
Node JS applications by automatically restarting
the Node application whenever we change some files
in our working directory.
So remember that in the project,
I was actually closing down the server all the time
and then restarting it each time
that I was changing the code.
But with this tool, that's no longer necessary.
So it will automatically restart the server each time
that we do a change.
So it's now done installing,
and it created a new field called dev dependencies,
and then of course added nodemon in there.
And so our project now basically knows
that we depend on this tool here to develop our application,
and this package here to actually build our code base.
So these are the two types of packages.
Now let's also talk about the two types of installs
of these packages,
because right now all we did was to install
these packages locally,
so they only work in this project
and we can actually see that right here
in our project folder
because npm created this new folder
called node modules for us.
It has all the dependencies of our project.
But now you might ask, well we only specified
Slugify and nodemon,
so what are all of these packages doing here?
Well, that's simply because they in turn
are dependencies of our dependencies.
If, for example, Slugify needs one of these packages,
well, then npm will install these dependencies as well.
And so we end up with all of these dependencies here
in our project.
So these are for local modules,
so Slugify and nodemon, again,
we just installed them locally in our project folder
and they're not gonna work anywhere else.
But with npm, we can also have global installs,
and global installs will then be available anywhere,
not just our project folder,
but in every folder across your entire machine.
So a package should be installed globally
when it provides an executable command that you can run
from the command line interface.
And nodemon, for example, is one tool like that.
So I use nodemon in all Node projects that I work on,
and so I have nodemon installed as a global dependency
because that way I don't have to install it each time
that I'm creating a new project.
I can simply use it in a new project
because it's already installed globally.
So let's now actually do that.
Clear the console here,
and then install it globally.
So npm install,
and there's actually a shorthand for install.
It actually is enough to just write i, like this.
That's actually usually how I do it.
So npm i nodemon, and then flag global.
Hit return now,
and so now it is being installed globally.
But it actually gives us this error,
and if you're on a Mac and did it like this,
then it will also give you an error
simply because you don't have the permissions
to install this package.
If you're on a Mac, it doesn't work,
and I believe on Windows it should work,
at least that's the experience that I have,
but if you're on a Mac, you have actually put sudo
in front of it and then put in your password
basically just to give it permission.
Well in my case I have Touch ID,
but if you don't have that,
you can use your user account password.
Anyway, now that works, and we can now start using nodemon
on this project.
So let me actually show you how it works.
So before to run our app, we did it like this.
We wrote node and then index.js.
What I did here now was actually an autocomplete,
and I think I hadn't talked to you about that
at this point,
so let me go ahead and delete this.
So I started typing the i here,
and since there is no other file which starts with an i,
I can now hit tab,
and so it will automatically complete
the rest of the filename for me.
We used to do it like this, then hit return,
and then whenever we wanted to do some change,
we would have to exit it like this,
and restart everything again.
But that's no longer the case because now we have nodemon.
So all we have to do is to instead of writing node,
we write nodemon and then index.js.
Okay, and so now it's watching every file
with every extension.
If we go now back to our file here,
we don't even need to change anything,
all I have to do is to give it a save
and take a look at what happens down here in the console.
So I'll save it now,
and you see restarting due to changes.
Now it start again, node index.js.
So you see that behind the scenes,
it is actually still running the original command
that we used to do, so node index.js,
and so nodemon is basically just a wrapper
around that node command
simply to make our lives a bit easier.
This is an extremely, extremely handy tool
for us to work with Node,
and for rest of the course, I will always be using nodemon
instead of the node command.
And now just to finish, there's one more small thing
that I wanted to show you here.
So let's say we didn't install nodemon globally.
Well, how would we then use our dev dependency here locally?
So the local nodemon that we have installed.
Well, we couldn't simply run it from the command line
because the local dependencies, they don't work like that.
We cannot simply use them right away in the command line,
but what we can do is to specify an npm script
and we do that here in this script field.
When we did npm in it,
it actually put this one script here for us,
which is for testing,
and then simply said that we don't have any test specified.
So that is just like a placeholder for us now,
which we can replace now with start,
and then nodemon index.js.
And this nodemon that I'm using here
will actually be the nodemon
coming from the dev dependencies.
Instead of writing the command down here in the command line
like I did here,
I will simply put the same thing into an npm script.
The script is called start in this case,
and now we will be able to run that.
So let me finish this one here.
So this is how we run an npm script,
npm run and start,
and indeed it gives us the command here nodemon index.js,
and now everything works the exact same way as before.
Right?
And this has nothing to do with the fact
that we installed nodemon globally before,
it simply works like this because, again,
nodemon is our dev dependency right here in the npm script.
We can then write something
like a command line interface instruction
that it's gonna use that local dependency
and not the global one.
Again, this would've worked just fine
without nodemon installed globally.
This is how you specify npm script,
and we will do a bunch more throughout this course
and we can give them all sorts of names.
Start is kind of a default one for development.
So actually for start,
we don't even have to write npm run start,
but writing npm start is actually enough
to trigger this special command.
So you see again, it works just fine like this.
Perfect.
So in this video, you learned the difference
between regular dependencies and development dependencies,
and then you also learned that you can install them
either locally or globally,
or you can also install them in both places, right?
But actually, usually the global dependencies
that we install are usually always development tools
because they are the ones who make more sense
to install like that, again because they usually provide us
like a nice command line interface program.
In the next video, we will then use this dependency
that we installed here actually in our code
so that you learn actually how to include
a third party module into your code.