how-to-setup-browsersync-with-rails

As mentioned in a previous post, a really awesome tool to test multiple browsers at once is BrowserSync. Using BrowserSync is super easy to setup.

  1. Install node.js and BrowserSync (You can find instructions here)
  2. Start  your rails app

> rails s
  1. Start BrowserSync
  > browser-sync start --proxy localhost:3000 --files "app/assets/stylesheets/*.scss, app/views/*.html.erb"

And that’s it! You should see the follow output in your terminal:

[BS] Proxying: http://localhost:3000
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3001
    External: http://10.0.1.3:3001
 ----------------------------------
          UI: http://localhost:3002
 UI External: http://10.0.1.3:3002
 ----------------------------------
[BS] Watching files...

Then if you open up your access URL (e.g. http://10.0.1.3:3001) on your iPad, iPhone, and Blackberry, you’ll be able to click and scroll through your web app and all the pages will stay synced across devices.

With the options provided in this example, the page will refresh whenever you make a scss or html change in your app. You can customize this to your liking.

Because of the asset pipeline, BrowserSync does a full page reload instead of just injecting the css, however this is still works pretty well. There is a github issue discussing this issue.

Happy coding (and testing of course)!