WEBVTT

1
00:00:00.320 --> 00:00:05.100
Hi everyone, and welcome to this lesson
on using Nodemon and Babel to improve our

2
00:00:05.130 --> 00:00:09.300
server side development,
workflow with Node JS and Express.

3
00:00:09.330 --> 00:00:11.140
Let's start with Nodemon.

4
00:00:11.170 --> 00:00:15.580
Nodemon is a tool that helps developers
monitor changes in their source code

5
00:00:15.610 --> 00:00:19.340
and automatically restart the server
whenever changes are made.

6
00:00:19.370 --> 00:00:21.860
This eliminates the need to manually stop

7
00:00:21.890 --> 00:00:25.700
and start the server every time
a change is made to the code.

8
00:00:25.730 --> 00:00:29.580
This saves time and makes development
faster and more efficient.

9
00:00:29.600 --> 00:00:33.860
Let me give you an example of what happens
if we don't have Nodemon running.

10
00:00:33.890 --> 00:00:36.740
So we have this simple Express server

11
00:00:36.770 --> 00:00:41.580
running on port 3000 and we want
to make a change to the code.

12
00:00:41.600 --> 00:00:45.580
Okay?
So let's run nodeserver.

13
00:00:45.610 --> 00:00:52.980
JS Now, I'm going to go to my browser
and what I'm going to do is run

14
00:00:53.010 --> 00:00:57.300
the root that's just the root
of our project, okay?

15
00:00:57.330 --> 00:01:00.060
And we see hello world appear here.

16
00:01:00.080 --> 00:01:01.940
Now, I'm going to go back to my editor

17
00:01:01.970 --> 00:01:06.290
and I'm going to make this
a route of Nata again.

18
00:01:06.320 --> 00:01:09.410
And then I'm going to go to my localhost

19
00:01:09.440 --> 00:01:12.850
environment and I'm going to rerun
this and refresh the page.

20
00:01:12.880 --> 00:01:14.850
But I still see hello world here.

21
00:01:14.880 --> 00:01:17.540
And if I try to access the route Nata,

22
00:01:17.570 --> 00:01:24.060
I'm going to get this message here
that my server cannot get route Nata.

23
00:01:24.090 --> 00:01:26.850
And this is because I need to restart

24
00:01:26.880 --> 00:01:31.100
the server if I want these changes
to be visible to me again.

25
00:01:31.130 --> 00:01:36.540
So simply, if I do this again,
node server JS and if I restart my server

26
00:01:36.570 --> 00:01:42.740
and I go back here and I refresh my page,
I'm going to see Hello World appear here.

27
00:01:42.770 --> 00:01:49.490
So we don't want to see this happen every
time we make a change to our code here.

28
00:01:49.520 --> 00:01:53.140
And that is why we're
going to be using Nodemon.

29
00:01:53.170 --> 00:01:57.920
It will monitor the changes automatically
and restart the server itself so we can

30
00:01:57.950 --> 00:02:01.020
see the changes immediately
without any extra steps.

31
00:02:01.050 --> 00:02:05.490
So to install Nodemon, I would
suggest you install it globally.

32
00:02:05.520 --> 00:02:12.220
And I'm going to do this for that,
use that global flag and then Nodemon.

33
00:02:12.250 --> 00:02:17.940
And after this completes, we're going
to be able to use Nodemon here.

34
00:02:17.970 --> 00:02:25.700
Now, if we try to run
Nodemon server JS, okay?

35
00:02:25.730 --> 00:02:30.780
So we're going to see that it's
running the port 3000.

36
00:02:30.810 --> 00:02:36.580
If I go here to my browser
and then I see the Hello World appear

37
00:02:36.610 --> 00:02:43.580
at this route here, and then I
delete Nata and make this route of our

38
00:02:43.610 --> 00:02:50.240
project again and then save this,
we see that our server was restarted due

39
00:02:50.270 --> 00:02:54.300
to the changes and it's
running on port 3000 again.

40
00:02:54.330 --> 00:03:00.220
And if I go back to my browser and I
refresh my page, I'm going to get cannot

41
00:03:00.250 --> 00:03:06.780
get Nata and then if I go to the route,
I'm going to get Hello World.

42
00:03:06.810 --> 00:03:12.260
So this is how it's going to simplify
our process of making the changes.

43
00:03:12.290 --> 00:03:15.140
Now let's move on to Babel,

44
00:03:15.170 --> 00:03:19.300
which is a tool that helps developers
write modern JavaScript code that is

45
00:03:19.330 --> 00:03:22.500
compatible with older
browsers and environments.

46
00:03:22.530 --> 00:03:26.980
Babel does this by transpiling modern
JavaScript code into a version

47
00:03:27.010 --> 00:03:30.980
of JavaScript that can
be run on older browsers.

48
00:03:31.010 --> 00:03:35.860
So to use import instead of required

49
00:03:35.890 --> 00:03:39.780
that we've used here,
so that we could use an import such as

50
00:03:39.810 --> 00:03:46.420
Import Express from Express, let's say,
let's comment out this code.

51
00:03:46.450 --> 00:03:49.720
We're going to need Babel and we're going

52
00:03:49.750 --> 00:03:52.300
to have to install several
packages for this.

53
00:03:52.330 --> 00:03:55.660
And I'm going to explain
to you what each of them does.

54
00:03:55.690 --> 00:03:59.900
So what I'm going to do
here is close my server.

55
00:03:59.930 --> 00:04:04.220
It crushed because it understood
that I was using an import.

56
00:04:04.240 --> 00:04:06.860
And I still can't do this because
I don't have Babel running.

57
00:04:06.890 --> 00:04:13.260
So now what we're going to do is install
all the dependencies that we need and this

58
00:04:13.290 --> 00:04:16.180
is going to be all
the dependencies that we need.

59
00:04:16.210 --> 00:04:21.460
So the first one is Babel node,
which allows us to use Babel with Node JS

60
00:04:21.480 --> 00:04:24.700
directly instead of needing
to transpile the code first.

61
00:04:24.720 --> 00:04:30.400
The second one is Preset Environment,
which determines which Babel plugins are

62
00:04:30.420 --> 00:04:32.567
needed to transpile the code

63
00:04:32.767 --> 00:04:35.020
based on the target environment.

64
00:04:35.040 --> 00:04:37.660
Now we have Babel Runtime coming up

65
00:04:37.690 --> 00:04:40.012
which provides the Runtime helpers

66
00:04:40.212 --> 00:04:42.060
required by the Babel plugins.

67
00:04:42.090 --> 00:04:46.500
And at the end we have
Babel Plugin Transform Runtime

68
00:04:46.530 --> 00:04:48.692
which transforms the code to use

69
00:04:48.892 --> 00:04:51.260
the helpers provided by Babel Runtime.

70
00:04:51.280 --> 00:04:53.791
So let's just run this here

71
00:04:53.991 --> 00:04:56.580
and wait for this to complete.

72
00:04:56.600 --> 00:04:59.380
And now that we have Babel changes,

73
00:04:59.410 --> 00:05:05.820
we're going to have to use a new file
that's going to be called babelrc.

74
00:05:05.840 --> 00:05:15.320
Okay, so let's create babelrc file

75
00:05:15.440 --> 00:05:20.240
and it's going to have
this content inside it.

76
00:05:20.270 --> 00:05:23.740
So you can just copy this and this file

77
00:05:23.770 --> 00:05:29.420
basically tells Babel which presets and
plugins to use when transpiling our code.

78
00:05:29.450 --> 00:05:33.420
And after we create this file,
the last thing we need to do is go

79
00:05:33.450 --> 00:05:37.580
to the package JSON file and make sure

80
00:05:37.600 --> 00:05:48.660
that Type module is enabled here.

81
00:05:48.690 --> 00:05:54.900
And once we have that, we should be
able to just write Nodemon server JS.

82
00:05:54.920 --> 00:06:01.220
This should start our server with no
issues as we've seen before when we're

83
00:06:01.250 --> 00:06:05.300
trying to use import so
we can get rid of this.

84
00:06:05.330 --> 00:06:08.940
Our servers are restarting on every
change, as you see,

85
00:06:08.970 --> 00:06:13.580
and then we can go to our browser,
refresh our page, and we're still going

86
00:06:13.600 --> 00:06:17.900
to be seeing our Hello World
response appearing here.

87
00:06:17.920 --> 00:06:19.260
That's it for this lesson.

88
00:06:19.290 --> 00:06:20.940
Thank you so much for watching.

89
00:06:20.960 --> 00:06:23.120
Happy coding and I'll see
you in the next video.