Live Reloading HTML Webserver

Mar 25, 2019 html ide-and-web-dev-tools

This post is more than 18 months old. Since technology changes too rapidly, this content may be out of date (but that's not always the case). Please remember to verify any technical or programming information with the current release.

Historically, I’ve always created virtual boxes with apache environments with vagrant like this or recently a combined docker image like that. But, as I do more front end work as well, I realized these were pretty heavy weight.

So, at first I decided I would just use the built-in PHP server from the command line using something like:

php -S localhost:8000

Which then would give me a PHP-compatible webserver. A little over kill because I don’t need a back-end processing system. But, hey it works and I was familiar with it. I got pretty spoiled using create react app - with how it sets up auto reloading and things like that. I thought there has to be something equally as cool and easy, without having to create webpack configurations and everything with each quick project I was working on.

Enter live-server, an NPM package that is a live reloading web server for HTML, CSS, Javascript - basically static files. Then, it opens up a web socket to listen for local changes. When local changes happen, it automatically reloads the page. Pretty cool.

To get started, just install it globally.

npm i -g live-server

Then, where ever you have a docroot, you can fire up live-server and it’ll stay active in the foreground. Simply run it like this:

live-server

And you’ll get a web server on http://localhost:8080 by default. There are tons of configuration options so you’re not locked down to just that. Cool and notable features include the fact that it gives a nice directory listing when there is no index file and it can even reload CSS files that changed without reloading the entire html page. Check it out, and save yourself some time and frustration like I did.