Web servers for developers

Yo developer! Want sum web servurz?

So you decided to create a static web project. It would be really nice to test it right during development on a server. Let’s take a look around and pick a solution for serving static content.

The list of servers described here is not exhaustive.

Apache, nginx, IIS

Pretty good classic solution. The big advantage for developers is, all these servers are used in production so you can simulate 100%-production on your (virtual — ?) machine. That means you could test all the server features like partial/privileged access without uploading your code to the remote server.

However I’m not sure if this is useful for static content developing. Moreover, all these servers should be installed and configured (!) in not very easy way. You should set up separate config branch (or *.conf-file) for every your web project.

Q: What about Denwer, XAMPP, LAMP solutions?
A: Right, these all-in-one bundles contain all you need for starting the development easy. Sometimes it’s redundant for small and/or static projects.
Just check solutions below.

instant-server

Install the NodeJS and do

npm install -g instant-server

in the console. Right after that you can run instant <port> in your project folder and be able to check the http://localhost:<port>/ in the browser.

Some advantages of this solution:

  • it’s very simple.
  • this server uses hot-reload, so once you changed any file within the project, the page is automatically reloaded in browser. No extra script injection is needed for this feature.
  • Instant-server works fine with browserify/warchify and other project bundlers. Just keep running one terminal instance with instant 8080 and another one with watchify app.js -o static/bundle.js.

Bare in mind, you won’t use this solution in production environment but we’re speaking about the development process, right?

Q: Is this only one NodeJS solution?
A: No, there are lots of them. For example, http-server, local-web-server, you can check also this or that solution or even write your own one.
BTW, first two support CORS, second one supports mime-types customization as well. Just in case you need it 🙂

Webpack

Check the Webpack site for more info about this cool bundling engine. It contains all the the things we formerly wrote grunt/gulp tasks for! It can compile SCSS/SASS, bundle together all the assets (CSS, images, fonts) and of course work with different JS bundling engines.

webpack-dev-server is the development server working like instant but for Webpack projects.

  • It keeps the generated content in memory that makes it very snappy.
  • It produces map files alongside with bundles for debug purposes (contrary to solutions from above, where you should force, for instance, browserify to generate map files).
  • A pretty feature is, you can use same webpack.config.js file for both environments production and development.

The setup of the Webpack looks difficult but spend 2 hours of your life to try it. Believe me, it worth that.

Hope this helps and may the JS force be with you!

Advertisements

One thought on “Web servers for developers

  1. Pingback: ES6 Hello world project scaffolding | codedoc's notes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s