1
00:00:02,230 --> 00:00:06,126
Now we're basically done with this introduction to express

2
00:00:06,126 --> 00:00:09,590
though, of course, there's way more to learn.

3
00:00:09,590 --> 00:00:14,330
But before we learn more, let's fix one annoyance,

4
00:00:14,330 --> 00:00:18,720
let's make our life as developer a little bit easier.

5
00:00:18,720 --> 00:00:22,750
Remember that we always had to quit a running server

6
00:00:22,750 --> 00:00:26,370
and then restart a new server by repeating

7
00:00:26,370 --> 00:00:29,410
that node app.js command whenever we made

8
00:00:29,410 --> 00:00:33,010
and saved changes in our file, over time this,

9
00:00:33,010 --> 00:00:36,280
can get annoying because if you are developing and you're

10
00:00:36,280 --> 00:00:39,970
making changes all the time to try out new things,

11
00:00:39,970 --> 00:00:44,200
then it can be really cumbersome and well simply annoying to

12
00:00:44,200 --> 00:00:46,840
stop and restart all the time.

13
00:00:46,840 --> 00:00:50,940
And at some point you will forget it and you will wonder why

14
00:00:50,940 --> 00:00:55,290
your website doesn't behave the way you expect it to,

15
00:00:55,290 --> 00:00:59,270
hence manually restarting all the time is something we wanna

16
00:00:59,270 --> 00:01:03,190
avoid here, and thankfully we can avoid it.

17
00:01:03,190 --> 00:01:08,190
We can install an extra package into this project,

18
00:01:08,250 --> 00:01:10,580
which we won't use in our code.

19
00:01:10,580 --> 00:01:13,150
So which doesn't add anything that we need

20
00:01:13,150 --> 00:01:17,270
in our actual website code, but which will allow us

21
00:01:17,270 --> 00:01:21,550
to run this server in a more convenient way

22
00:01:21,550 --> 00:01:24,440
by automatically watching our code files and

23
00:01:24,440 --> 00:01:28,493
restarting the server for us when our code changed.

24
00:01:29,350 --> 00:01:34,350
And for that, we'll again use this NPM install command

25
00:01:34,380 --> 00:01:37,980
here to install a new package and the package

26
00:01:37,980 --> 00:01:39,940
which we do want to install now

27
00:01:39,940 --> 00:01:44,940
is nodemon written like this. If you search for nodemon

28
00:01:46,090 --> 00:01:50,520
you should find its entry on npmjs.com and

29
00:01:50,520 --> 00:01:53,490
just as before for express, you can learn more about

30
00:01:53,490 --> 00:01:55,380
the package there. And in the end,

31
00:01:55,380 --> 00:01:57,890
this is a package, which as I mentioned,

32
00:01:57,890 --> 00:02:01,070
does not offer any functionalities that we use

33
00:02:01,070 --> 00:02:03,999
in our code, but instead it is a package

34
00:02:03,999 --> 00:02:07,310
that will help us during development.

35
00:02:07,310 --> 00:02:11,920
And that is something important to recognize and understand.

36
00:02:11,920 --> 00:02:14,990
In web development and especially also

37
00:02:14,990 --> 00:02:19,990
in node.js development, you very often installed packages

38
00:02:20,720 --> 00:02:24,380
that help you as a developer during development,

39
00:02:24,380 --> 00:02:27,640
just as we're using an IDE with certain extensions,

40
00:02:27,640 --> 00:02:31,180
to have an easier time, we can install our packages,

41
00:02:31,180 --> 00:02:35,291
our tools into our project that offer more support,

42
00:02:35,291 --> 00:02:39,030
and nodemon is one such package, which we can use

43
00:02:39,030 --> 00:02:43,320
and install. Now there's one tiny addition we wanna make on

44
00:02:43,320 --> 00:02:46,410
this NPM install commando, we don't wanna

45
00:02:46,410 --> 00:02:47,870
execute it like this,

46
00:02:47,870 --> 00:02:52,870
but instead you should add dash dash save dash dev after

47
00:02:53,535 --> 00:02:56,683
the nodemon name and after a blank.

48
00:02:58,140 --> 00:03:02,530
This marks this package as a so-called development

49
00:03:02,530 --> 00:03:06,370
dependency, telling note.js that it's not actually

50
00:03:06,370 --> 00:03:10,630
a dependency, a package that we use for our final code,

51
00:03:10,630 --> 00:03:13,513
but a package that we only use during development.

52
00:03:14,570 --> 00:03:17,490
If you now it entered, this package gets downloaded

53
00:03:17,490 --> 00:03:21,530
and installed just as express.JS did.

54
00:03:21,530 --> 00:03:25,740
And hence, you'll see it in the node modules folder.

55
00:03:25,740 --> 00:03:30,033
If we scroll down to N we'll find nodemon there,

56
00:03:31,620 --> 00:03:35,200
and of course we'll also see it in package.json though,

57
00:03:35,200 --> 00:03:39,103
there it's listed under this Devdependencies node,

58
00:03:39,990 --> 00:03:42,550
because it is, as I just mentioned a package,

59
00:03:42,550 --> 00:03:44,993
which we only use during development.

60
00:03:46,470 --> 00:03:48,800
Now, how do we use tho?

61
00:03:48,800 --> 00:03:51,220
Well, with the nodemon installed,

62
00:03:51,220 --> 00:03:54,870
we can basically execute app.js with nodemon instead

63
00:03:54,870 --> 00:03:58,900
of node. And that will then start this server

64
00:03:58,900 --> 00:04:02,810
as it did before. But in addition, it will also watch

65
00:04:02,810 --> 00:04:07,140
this code file and any other code files we might eventually

66
00:04:07,140 --> 00:04:10,380
have in this project and then restart our

67
00:04:10,380 --> 00:04:13,830
server whenever we make changes to our code files,

68
00:04:13,830 --> 00:04:16,839
so to our JavaScript files specifically,

69
00:04:16,839 --> 00:04:18,713
and we save those changes.

70
00:04:19,930 --> 00:04:22,460
Now you could think that you there for now simply need

71
00:04:22,460 --> 00:04:26,800
to run nodemon app.js, but that won't work.

72
00:04:26,800 --> 00:04:28,940
If you try to execute that you get:

73
00:04:28,940 --> 00:04:32,280
command: not found nodemon. The reason for this is

74
00:04:32,280 --> 00:04:34,830
that nodemon was only installed as

75
00:04:34,830 --> 00:04:37,360
a package into this project, not as

76
00:04:37,360 --> 00:04:41,683
a globally available tool on our overall machine.

77
00:04:42,710 --> 00:04:47,530
Node and NPM are such globally available tools because we

78
00:04:47,530 --> 00:04:51,566
installed node.js through an installer on our system.

79
00:04:51,566 --> 00:04:56,566
nodemon is not globally available, but we can still use it,

80
00:04:56,820 --> 00:04:59,070
for this we go back to package.json

81
00:04:59,070 --> 00:05:01,263
and here to these scripts part.

82
00:05:02,320 --> 00:05:06,180
Scripts are a feature that we can use in any note.js

83
00:05:06,180 --> 00:05:10,050
project to automate certain tasks.

84
00:05:10,050 --> 00:05:13,760
And we can add a new script here by adding a comma after

85
00:05:13,760 --> 00:05:16,460
this first script, this test script,

86
00:05:16,460 --> 00:05:18,500
which we can also delete actually,

87
00:05:18,500 --> 00:05:21,670
if we want to, so that we have no script.

88
00:05:21,670 --> 00:05:23,740
And then between double quotes,

89
00:05:23,740 --> 00:05:26,660
we choose any script name of our choice,

90
00:05:26,660 --> 00:05:30,850
though there are a couple of special names that you can use.

91
00:05:30,850 --> 00:05:33,600
For example, the start script name,

92
00:05:33,600 --> 00:05:35,450
which is the name we should use here.

93
00:05:36,820 --> 00:05:40,150
Then we add a colon and then between double quotes,

94
00:05:40,150 --> 00:05:43,453
the command that should be executed by that script.

95
00:05:44,410 --> 00:05:47,610
Now you can write really advanced scripts here,

96
00:05:47,610 --> 00:05:50,330
but that's not the goal right now. Instead here,

97
00:05:50,330 --> 00:05:53,810
we can now write nodemon app.js,

98
00:05:53,810 --> 00:05:58,810
because we will soon execute this script with help of NPM.

99
00:05:59,270 --> 00:06:03,620
And it will then have access to any project specific tools,

100
00:06:03,620 --> 00:06:08,150
which are not accessible in the standard command line to us

101
00:06:08,150 --> 00:06:11,130
and then for nodemon, since we installed it here,

102
00:06:11,130 --> 00:06:13,860
will be available in such a script.

103
00:06:13,860 --> 00:06:16,060
And we can then execute the app.js file

104
00:06:16,060 --> 00:06:18,023
with nodemon like that.

105
00:06:19,630 --> 00:06:21,910
How can we now execute that script?

106
00:06:21,910 --> 00:06:24,620
Well, you need to save package.json,

107
00:06:24,620 --> 00:06:27,550
and then you can open your standard command line.

108
00:06:27,550 --> 00:06:31,210
So it is integrated terminal in the visual studio code

109
00:06:31,210 --> 00:06:33,823
and just run NPM start.

110
00:06:34,930 --> 00:06:38,720
because we set this start script here.

111
00:06:38,720 --> 00:06:40,630
If you use the different name,

112
00:06:40,630 --> 00:06:44,020
it will not be NPM and then your name,

113
00:06:44,020 --> 00:06:47,840
but NPM run and then your script name.

114
00:06:47,840 --> 00:06:51,470
So then you need that run command in addition.

115
00:06:51,470 --> 00:06:54,610
For a start that's not needed because start is a

116
00:06:54,610 --> 00:06:57,620
reserved script name, a special kind of script,

117
00:06:57,620 --> 00:07:01,910
which you can trigger by just running NPM start,

118
00:07:01,910 --> 00:07:05,470
which is basically a short form for NPM run start.

119
00:07:05,470 --> 00:07:06,313
You could say.

120
00:07:07,710 --> 00:07:09,480
So if you're now hit run, NPM start,

121
00:07:09,480 --> 00:07:14,480
you see nodemon executes and we get some log output there.

122
00:07:15,120 --> 00:07:17,650
And now we got our running server again,

123
00:07:17,650 --> 00:07:20,990
but powered by nodemon, which under

124
00:07:20,990 --> 00:07:24,270
the hood still uses node.js, but which will stop

125
00:07:24,270 --> 00:07:27,030
and restart our server whenever one

126
00:07:27,030 --> 00:07:28,703
of our code faults changed.

127
00:07:29,620 --> 00:07:31,990
So if I now go back to local host 3000,

128
00:07:32,950 --> 00:07:35,540
we see that page here.

129
00:07:35,540 --> 00:07:37,860
And if I then for example, go to app.js

130
00:07:39,050 --> 00:07:42,370
and I shrink that a little bit, but I keep it running.

131
00:07:42,370 --> 00:07:46,240
And here on this form, I maybe say

132
00:07:46,240 --> 00:07:49,190
your name colon and a white space.

133
00:07:49,190 --> 00:07:51,590
So I changed his text and therefore

134
00:07:51,590 --> 00:07:54,150
the content of this script file.

135
00:07:54,150 --> 00:07:58,330
Watch what happens down there if I now save that file,

136
00:07:58,330 --> 00:08:02,050
you see it says restarting due to changes.

137
00:08:02,050 --> 00:08:06,140
And now if I reload here in the browser, I see those changes

138
00:08:06,140 --> 00:08:09,780
and we didn't have to restart this manually.

139
00:08:09,780 --> 00:08:12,470
And that's a little extra convenience,

140
00:08:12,470 --> 00:08:14,570
which we definitely wanna use.

141
00:08:14,570 --> 00:08:18,570
And therefore I will actually now stick to nodemon.

142
00:08:18,570 --> 00:08:21,467
And from now on also in the next core sections,

143
00:08:21,467 --> 00:08:25,932
we will be using this nodemon extension with such a script

144
00:08:25,932 --> 00:08:29,360
to start our server during development,

145
00:08:29,360 --> 00:08:31,893
because that will make our life a bit easier.