Tip : Embedded webserver for quick frontend development

Building prototypes is one of the common trick to win projects in IT industry. One of the common prototypes we build are set of html files with navigation and some AJAX way of loading components. Because of the browser security, its not possible to do it via Ajax. Also its not correct to ask client to deploy these files on a server and check. Especially when you are trying to win the project this is not the option. Our prototype should be up and running with one click and ready to be to be explored with out any extra installation. Following are the two tricks you can use.

Option 1 : Opening the browser with Cross origin requests allowed for local files

By default browser treats each file location as new domain so you can’t get another html (any other resource) via ajax. But if you are building the prototype with some javascript framework like jquery, angular , it will fail as many components like modal window loads the content via ajax. So we will start the browser with an option to allow file access from files.
Use following script in windows. It closes all chromes instances first and then fires new chrome instance with proper settings. You can have it in .bat file and pack it with html files.
taskkill /F /IM chrome.exe
"\chrome.exe" --disable-web-security -–allow-file-access-from-files &

Option 2 : Embedded webserver

I wasn’t happy with first option. Then I was thinking of building something which will take my files and makes them available via http. But after looking for existing options I found Mongose (https://github.com/valenok/mongoose). A very light weight one click webserver. You just download the exe for windows which is 300kb size and keep it in the same folder as your html files. With a double click it will start a webserver with current folder as docroot. Simple lighter and easy to distribute. I feel ideal for distributing small prototypes also even to host a small static website.

Advertisements

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