Preview
Video Player
00:00
00:00
Installing Packages
5:58There are two ways to install an npm package. When a package is frequently used, it may be helpful to install it in a location where it is accessible to multiple projects. When a project relies on a package it's best to install the package in that project.
Now that we've learned about what NPM is,
it's time to try using it.
0:00
There are two ways we'll learn to install
packages today, globally and locally.
0:06
Similar to how scope works with
JavaScript variables, global and
0:11
local refer to different levels of access.
0:16
In this case,
access to packages can be global or local,
0:19
depending on which tags we use,
along with the NPM install command.
0:23
If a package is needed for
a project to run,
0:28
it should normally be installed locally.
0:31
When we want a package to be available for
all of our programs,
0:34
it's best to install it globally.
0:37
Command line utilities or
apps can work for many projects and
0:39
can be helpful to install globally.
0:44
Nodemon is a project for
0:47
restarting your projects
automatically when changes are saved.
0:48
When creating multiple projects nodemon
is a great package to install globally.
0:53
However, if you have a project
that depends on nodemon to run,
0:58
its best to install nodemon locally.
1:02
By default npm installs packages locally,
in the current directory.
1:04
To install globally,
we can use the command npm
1:10
install followed by the package name,
in the -g flag.
1:14
The -g flag tells npm that we want
to install the package globally.
1:19
Web servers are software programs
that can deliver web page content.
1:24
One example of a command line
utility you might find useful
1:29
is the http-server package.
1:34
http-server makes it easy to start
a web server on your computer.
1:37
The installation notes for
1:43
this package show that we can install
it globally with the --global flag.
1:44
This is the same as the -g flag we'll use.
1:49
I'm going to install http-server globally,
and
1:53
you can follow along in your
own terminal or command line.
1:56
Make sure you've downloaded the project
files associated with this video,
1:59
and they are in your Downloads folder.
2:04
Because I'm installing globally,
I don't need to navigate to any folder.
2:06
I can just start a new terminal session.
2:10
I'll type npm install-g,
2:13
http-server.
2:19
Now that it's been installed, I'm going to
use http-server to start up a web server,
2:26
so I can preview the static
site in our Downloads folder.
2:32
We'll change directories
using cd into Downloads,
2:36
then will type http-server,
2:42
followed by the folder name,
which is taskApp.
2:45
Now, we'll copy this address,
Paste it in the browser.
2:54
This gives us a live
preview of our site and
3:04
shows that we have successfully
installed http-server globally.
3:06
[SOUND] There are other times when we want
packages located inside of our projects so
3:11
that our projects have access to them.
3:17
In these cases,
we can install packages locally.
3:19
Let's practice installing a package
locally by creating a project with
3:23
the Express framework.
3:27
Express is a fast web framework for node.
3:28
As I mentioned earlier,
3:32
we can use it to build out the skeleton
of a site's front and back end.
3:33
To install it locally, we must navigate to
a Projects directory in the command line.
3:37
There we can use the npm install command.
3:43
In the new terminal window,
3:46
I'll create a project directory
with the make dir command.
3:48
I'll mimic Kayak app.
3:52
I'll type mkdir kayakApp.
3:54
Now, I'll change into that directory.
4:01
Before we do anything else, I'll open
my project in Visual Studio code.
4:08
I'm using the code
command I have installed,
4:13
which you could learn more
about in the Teacher's Notes.
4:15
You can also navigate to the folder using
your computer's Finder or Explorer.
4:18
Before we install any packages locally,
we'll need to use a command and
4:23
create a special file that I'll
explain more in the next video.
4:27
Type npm init, -y and press Enter.
4:31
You should now have a file
named package.json, and
4:38
you'll be able to install packages.
4:42
We purposely want to install
a version that isn't the latest.
4:44
Let's open up our code to
keep track of the changes.
4:48
You can navigate to the code and
open it with your preferred editor, or
4:51
use the code command.
4:56
This way, we can keep track of
changes that happened when we install.
4:58
Let's type npm install
5:03
express@4.15.1.
5:08
The @ symbol allows us to select
a specific version of Express to install.
5:13
When we hit Enter and the installation
completes, changes occur in our directory.
5:18
We have a folder called node modules that
npm creates to store all of the package
5:24
files for our project.
5:29
Every time we add a new package,
5:33
a folder containing its code is
created in the node modules directory.
5:35
This can cause an application
to have many files and
5:39
take up more space than
smaller applications.
5:42
When we upload code to GitHub,
5:45
we don't want to have to manage all of
this additional code and take up memory.
5:47
In the next video, we'll learn more about
how we can prevent our node modules folder
5:52
from being uploaded.
5:56