3 Web Servers for Frontend Developers

Sunday, Sep 10 2017 in javascript

Ever needed to quickly start a web server to check a few scripts you’ve been developing locally?

Front-end developers don‘t need long complex set up: they can create an HTML file, include some JavaScript and open the file in the browser. But loading files directly from disk causes a few issues: absolute URLs like /mystyle.css don’t load correctly. And requesting any kind of assets via Ajax calls will fail in Chrome because of cross-origin security policies (scripts aren‘t allowed o load files from your local hard drive).

Here‘s three zero-configuration web servers that you can start on your local machine to run quick tests and experiments.

The classic: Python HTTP server

If you‘re on any Mac or Linux machine, then you’ve got Python installed. The web server that comes with the standard Python distribution has been an eternal favourite with web developers because you can serve the current directory with a single command:

python -m SimpleHTTPServer 8000

With Python 3 version, use this instead:

python3 -m http.server 8000

You’ll see Python print the port and you‘re good to go::

Serving HTTP on 0.0.0.0 port 8000 

Open your browser and navigate to localhost:8000 to explore your web pages.

Chrome is your home

For those web developers who live inside Chrome, Web Server for Chrome embeds a web server inside your favourite web browser.

You’ll need to install Web Server for Chrome from the Chrome Extension Manager. The UI is definitely more confusing than a single Python command, it runs wherever desktop Chrome runs, which practically any machine you would think of doing web development on, so it might be easier to set up if you are on a Windows machine without Python installed.

Self-contained: Caddy

If you’d like your web server to come in single binary you can install on Linux, Mac OS and Windows, try Caddy. It‘s open source and written in Go; you can download pre-compiled binaries for your system from the official website. Once you have the caddy executable on your machine, go to the directory you want to serve and run

caddy 

then navigate to localhost:2015. When I tried it, Caddy complained about a low file descriptor limit for production web server, I was fine with that, since I only wanted to run it for development.

If you’d like to integrate the web server into your development environment further, take a look at my React book. You’ll learn how to set up a development server with automatic page reloads that integrates with asset compilation using webpack.