Development with BrowserStack and LiveReload

For an easier experience trying out different markup or style changes and checking its effect in the remote browser on BrowserStack, consider using LiveReload.

  1. Install node.js and npm on your system [Download]
  2. Install LiveReload with: npm install -g livereload
  3. Open a new command prompt with cmd, navigate to your project directory, and start the LiveReload server with livereload .
    Please check the options to see if you require any additional features
  4. Add the following script tag to your layout file or any specific file that you wish to test:
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>');
</script>

5. Open your website in BrowserStack

The LiveReload server watches for file changes in the path specified by you. The script tag you add to your HTML layout connects to the LiveReload server and waits for notifications on file changes. On receiving a notification, it causes a full page refresh.

By default, the LiveReload server listens for changes in files with extensions: html, css, js, png, gif, jpg, php, php5, py, rb, erb, and coffee. See the exts option in LiveReload for details.