Hi everyone, and welcome to this lesson on using Nodemon and Babel to improve our
server side development, workflow with Node JS and Express.
Let's start with Nodemon.
Nodemon is a tool that helps developers monitor changes in their source code
and automatically restart the server whenever changes are made.
This eliminates the need to manually stop
and start the server every time a change is made to the code.
This saves time and makes development faster and more efficient.
Let me give you an example of what happens if we don't have Nodemon running.
So we have this simple Express server
running on port 3000 and we want to make a change to the code.
Okay? So let's run nodeserver.
JS Now, I'm going to go to my browser and what I'm going to do is run
the root that's just the root of our project, okay?
And we see hello world appear here.
Now, I'm going to go back to my editor
and I'm going to make this a route of Nata again.
And then I'm going to go to my localhost
environment and I'm going to rerun this and refresh the page.
But I still see hello world here.
And if I try to access the route Nata,
I'm going to get this message here that my server cannot get route Nata.
And this is because I need to restart
the server if I want these changes to be visible to me again.
So simply, if I do this again, node server JS and if I restart my server
and I go back here and I refresh my page, I'm going to see Hello World appear here.
So we don't want to see this happen every time we make a change to our code here.
And that is why we're going to be using Nodemon.
It will monitor the changes automatically and restart the server itself so we can
see the changes immediately without any extra steps.
So to install Nodemon, I would suggest you install it globally.
And I'm going to do this for that, use that global flag and then Nodemon.
And after this completes, we're going to be able to use Nodemon here.
Now, if we try to run Nodemon server JS, okay?
So we're going to see that it's running the port 3000.
If I go here to my browser and then I see the Hello World appear
at this route here, and then I delete Nata and make this route of our
project again and then save this, we see that our server was restarted due
to the changes and it's running on port 3000 again.
And if I go back to my browser and I refresh my page, I'm going to get cannot
get Nata and then if I go to the route, I'm going to get Hello World.
So this is how it's going to simplify our process of making the changes.
Now let's move on to Babel,
which is a tool that helps developers write modern JavaScript code that is
compatible with older browsers and environments.
Babel does this by transpiling modern JavaScript code into a version
of JavaScript that can be run on older browsers.
So to use import instead of required
that we've used here, so that we could use an import such as
Import Express from Express, let's say, let's comment out this code.
We're going to need Babel and we're going
to have to install several packages for this.
And I'm going to explain to you what each of them does.
So what I'm going to do here is close my server.
It crushed because it understood that I was using an import.
And I still can't do this because I don't have Babel running.
So now what we're going to do is install all the dependencies that we need and this
is going to be all the dependencies that we need.
So the first one is Babel node, which allows us to use Babel with Node JS
directly instead of needing to transpile the code first.
The second one is Preset Environment, which determines which Babel plugins are
needed to transpile the code
based on the target environment.
Now we have Babel Runtime coming up
which provides the Runtime helpers
required by the Babel plugins.
And at the end we have Babel Plugin Transform Runtime
which transforms the code to use
the helpers provided by Babel Runtime.
So let's just run this here
and wait for this to complete.
And now that we have Babel changes,
we're going to have to use a new file that's going to be called babelrc.
Okay, so let's create babelrc file
and it's going to have this content inside it.
So you can just copy this and this file
basically tells Babel which presets and plugins to use when transpiling our code.
And after we create this file, the last thing we need to do is go
to the package JSON file and make sure
that Type module is enabled here.
And once we have that, we should be able to just write Nodemon server JS.
This should start our server with no issues as we've seen before when we're
trying to use import so we can get rid of this.
Our servers are restarting on every change, as you see,
and then we can go to our browser, refresh our page, and we're still going
to be seeing our Hello World response appearing here.
That's it for this lesson.
Thank you so much for watching.
Happy coding and I'll see you in the next video.