1
00:00:00,150 --> 00:00:00,510
Okay.

2
00:00:00,660 --> 00:00:02,600
So we saw Express or I introduced it.

3
00:00:02,610 --> 00:00:07,380
Now let's get down to work, let's install it and let's make our first simple web app.

4
00:00:07,380 --> 00:00:09,000
And you don't want to get your hopes up too much.

5
00:00:09,000 --> 00:00:15,390
This web app is going to be very, very barebones, basically will be a website you hit enter or you

6
00:00:15,630 --> 00:00:22,020
go to the URL and we just get a single message back saying whatever we want, congrats or hello or something.

7
00:00:22,320 --> 00:00:23,670
So nice and simple.

8
00:00:23,670 --> 00:00:29,340
But the difference between doing that and then responding with, I don't know, a big, beautiful website

9
00:00:29,340 --> 00:00:34,830
with images and big texts and animations isn't that much as far as the code we have to write on the

10
00:00:34,830 --> 00:00:36,930
back end, which is what we're focusing on now.

11
00:00:36,930 --> 00:00:37,920
It's the same idea.

12
00:00:37,920 --> 00:00:42,120
You respond with some some content, what you respond with, well, that's a different story.

13
00:00:43,470 --> 00:00:45,600
So don't run this.

14
00:00:45,600 --> 00:00:51,060
It's a big red red letter say but to install express like we've installed faker or we installed the

15
00:00:51,060 --> 00:00:55,620
MySQL package, you just run NPM install and then the name of the package.

16
00:00:55,770 --> 00:00:58,560
However, rather than doing this, this will work fine.

17
00:00:58,560 --> 00:00:59,580
It will install.

18
00:00:59,580 --> 00:01:02,670
I'm going to show you another way of using NPM.

19
00:01:02,670 --> 00:01:08,280
That's a little bit nicer, a better practice, and it involves running this first command.

20
00:01:08,430 --> 00:01:09,720
What does this do?

21
00:01:10,020 --> 00:01:14,100
NPM and it creates what's known as a package JSON file.

22
00:01:14,430 --> 00:01:17,520
So if that doesn't make any sense to you, don't worry.

23
00:01:17,550 --> 00:01:23,430
Basically, when we make a new project, let's say we're working on a big node project with like a web

24
00:01:23,430 --> 00:01:27,330
app and our web app might have 20 packages involved.

25
00:01:27,330 --> 00:01:31,710
So we're only working with a couple right now, but it could have 20 involved rather than just installing

26
00:01:31,710 --> 00:01:36,360
them individually and leaving no record of what's been installed and what version has been installed.

27
00:01:36,360 --> 00:01:43,560
What we can do is create a package JSON file and it acts as like a log file of everything we install

28
00:01:43,560 --> 00:01:50,370
so that if I send my code to someone else across the world or posted on GitHub, for example, all the

29
00:01:50,370 --> 00:01:56,640
person has to do to run it is take that package JSON and then run a single command and PM install,

30
00:01:56,640 --> 00:02:01,680
which will then go find the package JSON and install every necessary package.

31
00:02:01,830 --> 00:02:03,240
So let me show you an example.

32
00:02:03,450 --> 00:02:07,530
This is actually the GitHub repo for Express JS.

33
00:02:07,530 --> 00:02:13,230
The framework we're about to install, which is itself it's a node package and there's a package JSON

34
00:02:13,230 --> 00:02:14,490
file in it.

35
00:02:14,490 --> 00:02:20,760
And if you look, there's this giant dependency section, these are all different packages that express

36
00:02:20,760 --> 00:02:21,180
needs.

37
00:02:21,180 --> 00:02:26,370
So when we install Express, it goes and installs all of these things as well.

38
00:02:26,370 --> 00:02:28,260
So we don't have to do it right.

39
00:02:28,650 --> 00:02:34,710
If this package JSON wasn't here, we would have to manually install array, flatten and content disposition

40
00:02:34,710 --> 00:02:35,430
and cookie.

41
00:02:35,430 --> 00:02:39,300
Thankfully, we don't even have to worry about what these do, let alone the fact that they exist.

42
00:02:39,570 --> 00:02:42,240
So that's the point of a package JSON.

43
00:02:42,240 --> 00:02:49,350
It's a way of storing not only the packages that are necessary, but then the version because this version

44
00:02:49,350 --> 00:02:59,010
of express might be totally broken if we used 0.6 if that exists or escape HTML 0.0.3 instead of 1.0.3.

45
00:02:59,340 --> 00:03:01,140
So that's all we'll say about it for now.

46
00:03:01,350 --> 00:03:07,680
But to actually create the package JSON, what I'm going to do is first make a brand new folder just

47
00:03:07,680 --> 00:03:09,420
so that we're working in a different folder.

48
00:03:09,420 --> 00:03:12,000
And I'm going to just call this one, join us.

49
00:03:12,950 --> 00:03:15,380
And that's where we'll be building the application.

50
00:03:15,380 --> 00:03:19,010
So everything else we've done up until now hasn't actually been building the app.

51
00:03:19,160 --> 00:03:21,110
So what I'll do is now.

52
00:03:22,350 --> 00:03:24,510
CD into join us.

53
00:03:26,330 --> 00:03:29,540
With the terminal down here, and it should be empty if I type.

54
00:03:29,540 --> 00:03:31,370
LZ, we're now in this directory.

55
00:03:31,370 --> 00:03:38,360
There's nothing there, so we're going to run this npm init command and this will just generate a new

56
00:03:38,360 --> 00:03:39,620
package, start json.

57
00:03:39,620 --> 00:03:44,630
However, it's interactive, so it's going to ask us for a name and what you can do is just hit enter

58
00:03:44,630 --> 00:03:48,230
if you want it to just accept what its the default value is.

59
00:03:48,230 --> 00:03:53,570
But if I hit enter now I'll get a message saying sorry name can no longer contain capital letters.

60
00:03:53,570 --> 00:03:58,550
So let's do join us underscore virgin.

61
00:03:58,550 --> 00:04:00,320
We'll say it's 1.0 of our app.

62
00:04:00,320 --> 00:04:01,910
That's fine description.

63
00:04:02,030 --> 00:04:03,260
We can leave it blank for now.

64
00:04:03,260 --> 00:04:04,100
Entry point.

65
00:04:04,100 --> 00:04:05,990
I like to change to app JS.

66
00:04:06,020 --> 00:04:10,910
This is just the name of the file that we're writing our app in or the main file of our app.

67
00:04:10,910 --> 00:04:13,370
We could have 20 files, but what's the start point?

68
00:04:13,790 --> 00:04:18,709
Index is fine too, but I'm going to do app then I'm just going to hit Enter until we're done.

69
00:04:18,709 --> 00:04:21,649
You could put author in there as well and a license.

70
00:04:21,649 --> 00:04:28,040
Then you can see the basic text it generates for us, the JSON, just the data format and I'll hit enter.

71
00:04:28,550 --> 00:04:30,770
Now I have a package JSON file up here.

72
00:04:32,010 --> 00:04:34,050
And it's ready for us to install things.

73
00:04:34,350 --> 00:04:40,550
So now what I'm going to do is run NPM, Install Express, but not on its own.

74
00:04:40,560 --> 00:04:47,800
I'm going to add dash, dash, save and that will save a record of our install into our package dot

75
00:04:47,850 --> 00:04:48,240
JSON.

76
00:04:48,240 --> 00:04:49,440
So right now it's not here.

77
00:04:49,440 --> 00:04:53,820
But if I do NPM install express dash, dash, save like that.

78
00:04:55,530 --> 00:04:56,430
Takes a moment.

79
00:04:56,820 --> 00:04:57,330
You'll see.

80
00:04:57,330 --> 00:04:59,880
First of all, we have our node modules now inside of join us.

81
00:04:59,880 --> 00:05:02,490
So we installed it in this directory, which is good.

82
00:05:03,450 --> 00:05:10,530
Then in our package JSON, we now have express saying 4.1, 5.2 is our version.

83
00:05:10,530 --> 00:05:19,470
And while we're here, why not also just reinstall NPM install to other packages we need for our app?

84
00:05:19,650 --> 00:05:23,580
The first one is Faker and then the second one is MySQL.

85
00:05:23,610 --> 00:05:29,250
You can just separate them by spaces and add dash, dash, save and then we'll just add both of them

86
00:05:29,250 --> 00:05:30,060
in here too.

87
00:05:30,780 --> 00:05:31,590
Not a dealbreaker.

88
00:05:31,590 --> 00:05:36,090
We already have installed them on this machine, but it's nice to have them in this directory too and

89
00:05:36,090 --> 00:05:39,300
also have records of them in our package json.

90
00:05:39,300 --> 00:05:45,510
So now if I wanted to upload this to GitHub or something and share this with someone, I wouldn't have

91
00:05:45,510 --> 00:05:51,960
to send them the node modules folder and send them the actual express directory and faker in my SQL.

92
00:05:51,990 --> 00:05:57,090
I could ignore that because this is the largest part of our directory structure right now.

93
00:05:57,090 --> 00:06:03,450
This I don't know how many megabytes it is, but it's a lot more than this single file or a single app

94
00:06:03,450 --> 00:06:04,230
JS file.

95
00:06:04,230 --> 00:06:09,840
So it's better to just have our friends or other developers download what they need remotely.

96
00:06:10,080 --> 00:06:13,770
So I just send them this recipe that says, Oh, by the way, you need these three things.

97
00:06:13,770 --> 00:06:16,710
Here's my code, plus the package JSON.

98
00:06:16,710 --> 00:06:21,150
Then they go take package JSON and they install these things.

99
00:06:21,150 --> 00:06:26,430
And the way that you do that, by the way, is running NPM install and you don't add anything afterwards.

100
00:06:26,430 --> 00:06:29,940
It will try and install everything in the nearest package JSON.

101
00:06:30,630 --> 00:06:31,290
All right.

102
00:06:31,290 --> 00:06:33,300
So we have express installed.

103
00:06:33,300 --> 00:06:38,250
We don't have an app yet, not even an app JS file, but we have the structure that we need to create

104
00:06:38,250 --> 00:06:38,820
the app.