How To live-reload 🔄 Node-js server along with Hot🥵Reloading
Tags: javascript, node, livereload, express
Published: 2020-08-10 07:16:13

---
cover_image: https://rajeshroyal.com/wp-content/uploads/2020/08/hot-reload-node-server-with-nodemon-live-reload-browser-index.ejs-file-terminal-running-yarn-start-command.jpg
title: How To live-reload 🔄 Node-js server along with Hot🥵Reloading
published: true
date: 2020-08-10 02:10:31 UTC
tags: javascript,node,livereload,express
canonical_url: https://rajeshroyal.com/how-to-live-reload-node-js-server-along-with-hot-reloading-nodemon-livereload-ejs/
---

So you know how to hot reload node js server, but if you are wondering how to reload browser along with the node server you land on the right place.

We will use <a href="https://www.npmjs.com/package/livereload" target="_blank" rel="noopener noreferrer">node-livereload</a> npm package to reload our browser automatically once our server restart.

To restart my server every time I make any changes in the backend I'm using <a href="https://nodemon.io/" target="_blank" rel="noopener noreferrer">Nodemon</a> package which is watching for multiple file types changes.

<strong>My directory Structure: </strong>

<img class="alignnone wp-image-1275 size-full" src="https://rajeshroyal.com/wp-content/uploads/2020/08/directory-structure-node-js-application-using-nodemon-in-vs-code.jpg" alt="directory structure node js application using nodemon in vs code" width="438" height="413" />

If you don't familiar with Nodemon or how to restart node server on changes you can find details on the internet. Search Term: ["How to restart node server on file changes with Nodemon"].

I will give you a quick overview.

First, you have to install Nodemon package, run <code>npm install nodemon</code> now you have to add a script in <code>package.json</code> file.
<div>
<div><code>"start": "nodemon server.js -e ejs,js,css,html,jpg,png,scss"</code></div>
<div></div>
<div>Screenshot:</div>
<div><img class="alignnone size-full wp-image-1276" src="https://rajeshroyal.com/wp-content/uploads/2020/08/node-js-server-hot-reload-with-nodemon-package-json-file-watch-filetypes-changes.jpg" alt="node js server hot reload with nodemon package json file watch filetypes changes" width="841" height="247" /></div>
</div>
<div></div>
<div><strong>Description: </strong>You can give whatever name instead of <strong>start,</strong> after that you write <strong>N</strong><strong>odemon</strong> then your main <strong>server file name, -e </strong>is used to tell Nodemon what file type Nodemon have to watch for changes. Let's say you want Nodemon to watch for HTML file types and any time you make changes in HTML files of your server directory Nodemon should restart the server.</div>
<div>

Now you run <code>yarn start</code> or <code>npm run start</code> according to whatever package manager you use.

</div>
<div><img class="alignnone size-full wp-image-1278" src="https://rajeshroyal.com/wp-content/uploads/2020/08/node-js-node-server-running-with-nodemon-windows-console-watching-file-types.jpg" alt="node js node server running with nodemon windows console watching file types" width="866" height="272" /></div>
<div></div>
<div></div>
<div>By default, Nodemon will watch for all subdirectories from your root directory. You can specify a particular directory if you want to.</div>
<div></div>
<h2>Live Reload Frontend along with node server:</h2>
<div></div>
<div>Now we know how to restart or hot reload server every time we change something in the backend. But in this post, we are talking about reloading our Frontend/browser along with the server every time we made changes in the backend.</div>
<div></div>
<div>To do this we are going to use <strong>livereload</strong> package. Fire up the terminal and run <code>npm install livereload.</code></div>
<div>Now inside your main server file In my case I have <code>server.js</code> Inside this file, we have to <code>require livereload</code> package and then <code>reload(your_server_var);</code> function. After that, we have to put a script tag inside our main view file. I'm using <code>ejs template engine</code> and my driver file is <code>index.ejs</code>.</div>
<div></div>
<div>
<div>
<div><code>&lt;script src="/reload/reload.js"&gt;&lt;/script&gt;</code></div>
</div>
</div>
<div></div>
<div></div>
<div></div>
<div><img class="alignnone size-full wp-image-1281" src="https://rajeshroyal.com/wp-content/uploads/2020/08/hot-reload-node-server-with-nodemon-live-reload-browser-index.ejs-file-terminal-running-yarn-start-command.jpg" alt="hot reload node server with nodemon live reload browser index.ejs file terminal running yarn start command" width="1896" height="665" /></div>
<div></div>
<div>Run your server open <code>localhost:PORT_NO ex. localhost:5000</code> Now your server and frontend is synced together with <strong>livereload</strong> so every time you change something in backend your server will restart and <strong>livereload</strong> will listen for this event and will reload your browser.</div>
<div></div>
<div>

Your feedbacks are more than welcome 😃

<strong>Sources:</strong>

</div>
<ul>
 	<li><a href="https://www.youtube.com/watch?v=XgM_t9K_plw" target="_blank" rel="noopener noreferrer">Youtube video</a></li>
 	<li><a href="https://www.npmjs.com/package/livereload" target="_blank" rel="noopener noreferrer">livereload</a></li>
 	<li><a href="https://nodemon.io" target="_blank" rel="noopener noreferrer">Nodemon</a></li>
</ul>