web-server

A quick and simple web server for local dev

Matthew Nuzum —  — Leave a comment

Have you ever been doing a little web development and needed a web server for local testing? This usually happens to me when I’m doing Javascript and want to use a little Ajax. Much of what you do will work fine with the classic file:/// protocol, but sometimes that just won’t cut it.

Yeah, we can always use MAMP or XAMP or maybe you have a web server (IIS, Apache or Nginx) installed locally. Then you have to either move your files to the web root or configure it to point to your project folder, then remember how to start it (edit that config file). I just found a simpler way…

If you have NPM installed (You probably do if you have Node.js installed), then run this:

npm install -g http-server

Wait for that to install (it’s a small package) and then, using your terminal, go to the folder you want to be the root of the web server and type:

http-server

You’ll see a message like this:

Starting up http-server, serving ./ on: http://0.0.0.0:8080

Visit http://localhost:8080 to see your website. By default, if you have an index.html file in this folder, you’ll see that served. Otherwise, you’ll see a directory listing for your project. (Yes, a beautiful, good old-fashioned directory listing)

If you have a folder called ‘public’ in the folder you’re in, then instead of using the current folder as the root of your site it will use the public folder.

Do you get PHP support? Nope. Ruby support? Nope. Java support? Nope. It’s just plain HTML. You can use Angular, Backbone, jQuery, Ember, any client-side web development tools you like.

You do have a lot of options though.

The most important option to be aware of is that this http-server will send cache-control headers with an expiration of 3,600 seconds by default. This will be very frustrating to you when you change a file, save it, and yet the changes don’t appear in the browser.

To disable caching, use -c-1 which means: set the cache (-c) to -1 second. If you want cache control headers but 3,600 is not right, just include a different number than -1. -c60 is a 60 second cache. By the way, if you forget to change the cache timeout and want to see your changes right away you can always do shift+reload to force a cache refresh in most browsers.

You can also change the port. 8080 is so Java-esque in my opinion. use the -p option. For example:

http-server -p 1337

Use a different file extension than .html with -e. For example:

http-server -e htm

Disable logging with -s (this one seems a little weird to me because its hard to tell if it’s working).

Use -o to open a web browser tab when you launch the server.

You can see full docs and instructions at the github page for http-server.

Photo credit: kewl

If it helped, please share!Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Matthew Nuzum

Posts Twitter Facebook

Web guy, big thinker, loves to talk and write. Front end web, mobile and UX developer for John Deere ISG. My projects: @dsmwebgeeks @tekrs @squaretap ✝