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 node-livereload 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 Nodemon package which is watching for multiple file types changes.
My directory Structure:
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
npm install nodemon now you have to add a script in
"start": "nodemon server.js -e ejs,js,css,html,jpg,png,scss"
Description: You can give whatever name instead of start, after that you write Nodemon then your main server file name, -e 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.
Now you run
yarn start or
npm run start according to whatever package manager you use.
By default, Nodemon will watch for all subdirectories from your root directory. You can specify a particular directory if you want to.
Live Reload Frontend along with node server:
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.
To do this we are going to use livereload package. Fire up the terminal and run
npm install livereload.
Now inside your main server file In my case I have
server.js Inside this file, we have to
require livereload package and then
reload(your_server_var); function. After that, we have to put a script tag inside our main view file. I'm using
ejs template engine and my driver file is
Run your server open
localhost:PORT_NO ex. localhost:5000 Now your server and frontend is synced together with livereload so every time you change something in backend your server will restart and livereload will listen for this event and will reload your browser.
Your feedbacks are more than welcome 😃