Coding | Atom | Refresh browser automatically with nodemon

Hi everyone, in this tutorial

I’m going to show you how to install nodemon.

Nodemon will automatically restart the server whenever you make any changes and save.

So you don’t have to repeatedly terminate your server and restart it again.

Terminate the server and restart it again.

So with that let’s begin.

[Logo animation]

First of all, make sure you have installed Node.js and with it,

Installed npm, node package manager

Then, on google or your preferred search engine, type in nodemon

NODEMON

Click on nodemon - npm

You will be directed to npm webpage where nodemon can be downloaded.

Over here, under readme you can learn what it is, who wrote it, how to install it and how to use it.

On the right panel, it says to install type in npm i nodemon.

That is npm i nodemon

So,

Let’s launch Atom with a project folder and launch terminal tab inside Atom.

If atom doesn’t automatically launch Terminal-tab,

You can press Cmd Shift T to launch it.

and If you have not installed it, you can watch my previous video on how to install it.

Once you’re all set up let’s make some changes to our app.js

To see how we refresh it without nodemon.

And then we will install nodemon and see how it’s being refreshed automatically.

Let’s add in a new route in our app.js

app.get

bracket

And

contact

[Music]

Function

[Music]

req and res

Curly bracket

Semi colon

res.send opening and closing bracket

Let’s insert some HTML

H1

H1 and Contacts

Alright, then press Cmd S to save.

Then we need to open up Chrome to check if the browser updates automatically.

Let’s go to contact directory

Contact and it says cannot get

Because we haven’t restart our server.

So let’s stop and restart our server.

Ctrl C to stop our server and use node app.js to restart our server.

So the problem with this method is that every time you make changes to your file,

you will need to terminate and restart your server.

This is where nodemon steps in. It watches for changes on your file and when you save, it restarts the server.

Let’s install it nodemon.

And type in npm spacebar i spacebar and nodemon

Nodemon and press enter.

Let it roll.

and once it has finish installing it will show a version number at the bottom.

And currently it is at version 2.0.2

Now let’s test out our new npm package.

Let’s add a new directory again.

adding in a similar route except the content is different.

Change the route to /resume.

Small letter.

And then change the title to resume.

Save. Cmd S.

Next, just as confirmation let’s check the list of installed package in package.json.

Let’s look for nodemon 2.0.2

And yes, it’s been listed. So it should automatically update all changes.

Next, let’s test it out. Nodemon app.js

[Music]

Once you press enter it should say server started on port 3000.

Then we go to

/resume directory. It should display our resume title.

/resume directory.

And there we have it.

So now after installing nodemon, we don’t have to terminate our server to view any updates.

Let’s say when I add a new directory called nodemon.

Update the same same.

Save

And nodemon will automatically restart the server.

Then we go to the browser and type in this newly created route.

without terminating our server.