Handy Little Web Servers


The ability to quickly iterate on ideas is important in software, especially frontend development. On thing I see often is developers running their full-blown server-side web application (e.g. Rails, ASP.NET MVC, etc.) just to test small changes in their JavaScript code. This can take a few seconds which can really ruin your flow.

One alternative is to open your files locally, but some browsers restrict what JavaScript can do when accessing file:// URI's so it's usually best to avoid, especially when working with things like AMD modules, Angular "dependency injection" and so on.

Here are two handy utilities I use when all I want to do is focus on the frontend and never fire up my real server application.

http-server

It's a dead-simple HTTP server which will be happy to serve your static content.

npm install -g http-server
cd [your HTML/JS code]
http-server -o

... and stand back in amazement as your default browser opens to http://localhost:8080

Some handy features you can control:

Of course this works best if your JavaScript app can run in "fake" mode with no backing data store. Which brings me to...

json-server

This allows you to create a functional REST endpoint using a flat file.

npm install -g json-server
cd [your fake server directory]
write a fake "db.json" file...
{
	"widgets": [
		{
			"id": 1,
			"name" : "foo"
		},
		{
			"id": 2,
			"name": "bar"
		}
	]
}
json-server db.json

Now your local JavaScript app can hit localhost:3000 and perform real REST operations which get persisted to the flat file...

GET   	/widgets
GET   	/widgets/3
POST  	/widgets
DELETE  /widgets/3

Even better, it supports searching/filtering, programmatic generation of data seed files, downloading seed files, CORS/JSON-P, and more goodies.

Summary

There are many examples of these sorts of tiny web servers out there in pretty much every platform/language. These are from the Node community but I know there are others in .NET, Ruby, Python, etc.

The point is to think twice when you find yourself waiting for your real web application server instance to start up just to test a small UI change.

[ Archive · Home ]