Blog

Browsersync and JRebel for keeping you in flow

By  
Joonas Lehtinen
Joonas Lehtinen
·
On Mar 3, 2015 8:00:00 AM
·

Browsersync is a helpful utility for automatically reloading browser windows when making modifications to your application and also reflecting browser events between multiple browsers. This can be really helpful when testing your application in multiple browsers while developing.

To get Browsersync working with Vaadin, one can use JRebel to automatically redeploy code modifications to server and then have Browsersync to notify listening browsers that they should reload the page. The trick for connecting Browsersync to JRebel is to have it watch ~/.jrebel/javarebel.stats file that is updated by JRebel after each reload. For theme development you might also want to listen for your scss files and let Vaadin handle SASS recompilation on the fly.

Here is how to start Browsersync on OSX for an app deployed to localhost:8080:

browser-sync start --proxy="localhost:8080" --files="$HOME/.jrebel/javarebel.stats"

For a demo, see the video below.

Joonas Lehtinen
Joonas Lehtinen
Joonas is the CPO and co-founder of Vaadin. He has been working with web app development tools and technologies for over 20 years and speaks frequently in Java conferences around the world. Joonas lives is San Jose, CA, with his wife and 10 year old son. You can follow him on Twitter – @joonaslehtinen
Other posts by Joonas Lehtinen