1
00:00:00,860 --> 00:00:06,044
Now that we've learned about what NPM is,
it's time to try using it.

2
00:00:06,044 --> 00:00:11,997
There are two ways we'll learn to install
packages today, globally and locally.

3
00:00:11,997 --> 00:00:16,217
Similar to how scope works with
JavaScript variables, global and

4
00:00:16,217 --> 00:00:19,015
local refer to different levels of access.

5
00:00:19,015 --> 00:00:23,081
In this case,
access to packages can be global or local,

6
00:00:23,081 --> 00:00:28,010
depending on which tags we use,
along with the NPM install command.

7
00:00:28,010 --> 00:00:31,006
If a package is needed for
a project to run,

8
00:00:31,006 --> 00:00:34,010
it should normally be installed locally.

9
00:00:34,010 --> 00:00:37,714
When we want a package to be available for
all of our programs,

10
00:00:37,714 --> 00:00:39,860
it's best to install it globally.

11
00:00:39,860 --> 00:00:44,358
Command line utilities or
apps can work for many projects and

12
00:00:44,358 --> 00:00:47,100
can be helpful to install globally.

13
00:00:47,100 --> 00:00:48,668
Nodemon is a project for

14
00:00:48,668 --> 00:00:53,070
restarting your projects
automatically when changes are saved.

15
00:00:53,070 --> 00:00:58,643
When creating multiple projects nodemon
is a great package to install globally.

16
00:00:58,643 --> 00:01:02,406
However, if you have a project
that depends on nodemon to run,

17
00:01:02,406 --> 00:01:04,690
its best to install nodemon locally.

18
00:01:04,690 --> 00:01:10,455
By default npm installs packages locally,
in the current directory.

19
00:01:10,455 --> 00:01:14,455
To install globally,
we can use the command npm

20
00:01:14,455 --> 00:01:19,162
install followed by the package name,
in the -g flag.

21
00:01:19,162 --> 00:01:24,533
The -g flag tells npm that we want
to install the package globally.

22
00:01:24,533 --> 00:01:29,776
Web servers are software programs
that can deliver web page content.

23
00:01:29,776 --> 00:01:34,632
One example of a command line
utility you might find useful

24
00:01:34,632 --> 00:01:37,216
is the http-server package.

25
00:01:37,216 --> 00:01:43,159
http-server makes it easy to start
a web server on your computer.

26
00:01:43,159 --> 00:01:44,841
The installation notes for

27
00:01:44,841 --> 00:01:49,530
this package show that we can install
it globally with the --global flag.

28
00:01:49,530 --> 00:01:53,230
This is the same as the -g flag we'll use.

29
00:01:53,230 --> 00:01:56,287
I'm going to install http-server globally,
and

30
00:01:56,287 --> 00:01:59,779
you can follow along in your
own terminal or command line.

31
00:01:59,779 --> 00:02:04,278
Make sure you've downloaded the project
files associated with this video,

32
00:02:04,278 --> 00:02:06,569
and they are in your Downloads folder.

33
00:02:06,569 --> 00:02:10,470
Because I'm installing globally,
I don't need to navigate to any folder.

34
00:02:10,470 --> 00:02:13,802
I can just start a new terminal session.

35
00:02:13,802 --> 00:02:19,311
I'll type npm install-g,

36
00:02:19,311 --> 00:02:22,529
http-server.

37
00:02:26,795 --> 00:02:32,441
Now that it's been installed, I'm going to
use http-server to start up a web server,

38
00:02:32,441 --> 00:02:36,120
so I can preview the static
site in our Downloads folder.

39
00:02:36,120 --> 00:02:42,060
We'll change directories
using cd into Downloads,

40
00:02:42,060 --> 00:02:45,492
then will type http-server,

41
00:02:45,492 --> 00:02:50,910
followed by the folder name,
which is taskApp.

42
00:02:54,860 --> 00:03:04,160
Now, we'll copy this address,
Paste it in the browser.

43
00:03:04,160 --> 00:03:06,985
This gives us a live
preview of our site and

44
00:03:06,985 --> 00:03:11,684
shows that we have successfully
installed http-server globally.

45
00:03:11,684 --> 00:03:17,137
[SOUND] There are other times when we want
packages located inside of our projects so

46
00:03:17,137 --> 00:03:19,755
that our projects have access to them.

47
00:03:19,755 --> 00:03:23,339
In these cases,
we can install packages locally.

48
00:03:23,339 --> 00:03:27,336
Let's practice installing a package
locally by creating a project with

49
00:03:27,336 --> 00:03:28,720
the Express framework.

50
00:03:28,720 --> 00:03:32,111
Express is a fast web framework for node.

51
00:03:32,111 --> 00:03:33,583
As I mentioned earlier,

52
00:03:33,583 --> 00:03:37,655
we can use it to build out the skeleton
of a site's front and back end.

53
00:03:37,655 --> 00:03:43,145
To install it locally, we must navigate to
a Projects directory in the command line.

54
00:03:43,145 --> 00:03:46,030
There we can use the npm install command.

55
00:03:46,030 --> 00:03:48,022
In the new terminal window,

56
00:03:48,022 --> 00:03:52,260
I'll create a project directory
with the make dir command.

57
00:03:52,260 --> 00:03:54,040
I'll mimic Kayak app.

58
00:03:54,040 --> 00:04:01,330
I'll type mkdir kayakApp.

59
00:04:01,330 --> 00:04:03,630
Now, I'll change into that directory.

60
00:04:08,309 --> 00:04:13,359
Before we do anything else, I'll open
my project in Visual Studio code.

61
00:04:13,359 --> 00:04:15,727
I'm using the code
command I have installed,

62
00:04:15,727 --> 00:04:18,714
which you could learn more
about in the Teacher's Notes.

63
00:04:18,714 --> 00:04:23,610
You can also navigate to the folder using
your computer's Finder or Explorer.

64
00:04:23,610 --> 00:04:27,927
Before we install any packages locally,
we'll need to use a command and

65
00:04:27,927 --> 00:04:31,770
create a special file that I'll
explain more in the next video.

66
00:04:31,770 --> 00:04:35,950
Type npm init, -y and press Enter.

67
00:04:38,929 --> 00:04:42,128
You should now have a file
named package.json, and

68
00:04:42,128 --> 00:04:44,462
you'll be able to install packages.

69
00:04:44,462 --> 00:04:48,470
We purposely want to install
a version that isn't the latest.

70
00:04:48,470 --> 00:04:51,940
Let's open up our code to
keep track of the changes.

71
00:04:51,940 --> 00:04:56,527
You can navigate to the code and
open it with your preferred editor, or

72
00:04:56,527 --> 00:04:58,021
use the code command.

73
00:04:58,021 --> 00:05:03,651
This way, we can keep track of
changes that happened when we install.

74
00:05:03,651 --> 00:05:08,057
Let's type npm install

75
00:05:08,057 --> 00:05:13,126
express@4.15.1.

76
00:05:13,126 --> 00:05:18,360
The @ symbol allows us to select
a specific version of Express to install.

77
00:05:18,360 --> 00:05:24,701
When we hit Enter and the installation
completes, changes occur in our directory.

78
00:05:24,701 --> 00:05:29,387
We have a folder called node modules that
npm creates to store all of the package

79
00:05:29,387 --> 00:05:30,809
files for our project.

80
00:05:33,710 --> 00:05:35,469
Every time we add a new package,

81
00:05:35,469 --> 00:05:39,393
a folder containing its code is
created in the node modules directory.

82
00:05:39,393 --> 00:05:42,647
This can cause an application
to have many files and

83
00:05:42,647 --> 00:05:45,682
take up more space than
smaller applications.

84
00:05:45,682 --> 00:05:47,482
When we upload code to GitHub,

85
00:05:47,482 --> 00:05:52,070
we don't want to have to manage all of
this additional code and take up memory.

86
00:05:52,070 --> 00:05:56,614
In the next video, we'll learn more about
how we can prevent our node modules folder

87
00:05:56,614 --> 00:05:57,840
from being uploaded.