Auto Reload Html Pages using lite-server by johnpapa | With video tutorial

Don’t you just hate it when you sit down to write some front-end code and end up refreshing your browser over and over again to see the changes? Well, there’s a very easy solution to this problem. You can integrate auto-reload in your project in less than 4 minutes!

So let’s jump right into it…

Step 1. First, let’s start by creating the directory for my project, and moving into that directory.

$ mkdir myProj
$ cd myProj

Step 2. Next, we need something to write our HTML code on. For that, let’s create the good-old index.html file!

$ touch index.html

Step 3. Now let’s create the package.json file so that we could build and start using our npm dependencies. We are writing — yes to keep default npm settings.

$ npm init --yes

Step 4. Here’s that step that we’ve been waiting for. Let’s install lite-server! To install lite-server, start by typing the following in your terminal: 
(Remember: we are typing — save-dev to save it in our dev dependencies.)

$ npm install lite-server --save-dev

Step 5: Finally, to serve your Front-end project, type following in your terminal.

$ npm run lite

And that’s it!

Here’s a video tutorial to make your life even easier! You’re welcome… ;)

This tutorial is about a package called lite-server by johnpapa. It allows you to reload your html pages in the browser once you made any change in the code of that project.

Important links: Fahad A Chaudhry | John Papa | lite-server