Buy @ Amazon

Work around to file protocol in browsers

There are times when you're dabbling with Front-end technology like EmberJS, AngularJS, etc.

You'd wish to load the just crafted web-pages of yours in a browser to see the work in progress state.

What do you do? First attempt is to load the page in the browser with the hardcoded local-disk location. It would be something like file://usr/kartz/frontend_apps/fake_app/test.html

This attempt might most likely fail in many modern browsers, especially if you have included any local javascript, css and similar assets. Are you here and wondering why?

This is due to browser security constraints. The work around to this is to serve this/these kind of files from web server so that the protocol becomes http.

But you don't want to get into the overhead of starting/managing a web server for this. You don't want to copy your file into the web-server  or work in the web-server's app directory.

You want your project source in your own chosen location and wish for some light-weight browser that you can start from your very own working directory of your project and load the files in the browser via http protocol.

If you've python installed in your OS (FYI - Mac comes with python packages), your life becomes easy. Python thankfully has a SimpleHTTPServer module that you can kickstart and get going with your real learning.

Below is the command to start this server:

usr/kartz/frontend_apps/fake_app$ python -m SimpleHTTPServer 8888
where,
-m : run named library module as a script (terminates option list)
8888 : is a port that you want to this HTTP server to listen to

Update: In Python 3.x, this module SimpleHTTPServer, is merged with http.server, thus the above command becomes:
usr/kartz/frontend_apps/fake_app$ python -m http.server 8888 --bind 127.0.0.1

Happy learning!