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… ;)