Thursday, August 16, 2012

Automatically reload HTML, CSS and Javascript files in browser when editing



When designing web applications or webpages, the early stages require very frequent modifications: alter the source code, check in the browser, go back and refine it. However, the switching (ALT+TAB), reloading (CTRL+R), switching back again (ALT+TAB) breaks the smooth workflow.

Refresh on edit: to solve this problem, there is a really short (233 lines) Javascript tool/library called LiveJS, that is able to constantly check for changes of any referenced files and if it finds something, it will reload the page automatically from the server (obviously it’s only useful for development and on localhost).

The script only supports server-client environment, you cannot use local filesystem for checking changes.

To fire up a webserver, you have plenty of options in increasing complexity:

Use python to create a simple HTTP server for the current directory:

$ python -m SimpleHTTPServer 8080

Or use the Chrome Engine based NodeJS platform to run this script and create a server.

As a last resort, use the built-in Apache, IIS, or IIS Express.

No comments:

Post a Comment