Menu
Can someone help me understand the difference between npm packages nodemon and live-server as they both reload the server and listen for changes?
427
They serve two different purposes.
Nodemon will restart a Node application when file changes in a directory are detected.
Live-server on the other hand, will refresh your browser when changes are detected to any supported file types (e.g. HTML, JS, CSS). It also enables Ajax requests when you are working locally — these don't normally work with the file:// protocol.
Nodemon
To see this in action, let's create a simple Node server.
First, create a my-app directory, change into it, create a package.json file and a file named server.js. On a 'nix system, like so:
mkdir my-app
cd my-app
npm init -y
touch server.js
Then in server.js add:
const http = require('http');
const server = http.createServer(function (request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.end("Hello, World!\n");
});
server.listen(8000);
console.log("Server running at http://127.0.0.1:8000/");
Now, if you run node server.js, and visit http://127.0.0.1:8000/ in your browser, you will see a "Hello, World!" message.
If you edit server.js, for example to change the message to "Goodbye, World!", then refresh your browser, you will still see the ooriginal "Hello, World!" message.
To see the changes, you have to stop the application (with Ctrl + C), then restart it (with node server.js), then refresh your browser.
What nodemon does, is to wrap your Node application to automate this step of manually stopping and restarting the application.
Install it as a dev dependency:
npm i -D nodemon
And start your application like so:
./node_modules/.bin/nodemon server.js
Now when you make changes to server.js, nodemon will detect this automatically, meaning that all you need to is refresh your browser to see them — you avoid the stop/starting of the application.
Live-server
What live-server does on the other hand is quite different. You should install it globally:
npm install -g live-server
then when you start it in a directory, it will attempt to serve up an index.html file if one exists (otherwise it will display the directory's contents).
Staying in the my-app directory, create an index.html file:
touch index.html
Then add the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style></style>
</head>
<body>
<p>Hello, World!</p>
<script></script>
</body>
</html>
Start live-server, by entering live-server in a terminal window and http://127.0.0.1:8080 should open in your browser.
Now try changing the message in the HTML file, or adding some styles or some JavaScript. When you make any of these changes and save, the browser will refresh and you will see these changes in your page.
This in itself is very practical, but nothing you couldn't do by refreshing the browser manually. Where a package like this becomes indispensable is when you make an Ajax request, include a file without using a protocol, or do anything else that would be blocked by the browser's security policy if you were to open an HTML file directly.
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
