Setting up BrowserSync with Rails


Have you ever worked on some front end stuff and you had to refresh your web page every time you do some changes? Well, BrowserSync does that for you! To enable it in your rails app, you shoud:

Install Node.js

You can find installation instructions here.

Install BrowserSync

Open your teriminal and type the following command:

npm install -g browser-sync
Start BrowserSync in your rails app

Go to your rails app root folder and start your rails server, then write the following command in new terminal tab:

browser-sync start --proxy localhost:3000 --files           "app/assets/stylesheets/**/*.scss, app/assets/javascripts/**/*.js, app/views/**/*.html.erb"

Of course, change this command accordingly to suit your needs. After that, you should get the following output:

[BS] Proxying: http://localhost:3000
[BS] Access URLs:
Local: http://localhost:3001
UI: http://localhost:3002
UI External:

And that is all! Now every time you change html, css, or your js files, page will automatically refresh and you will see new changes! Also, this is a great way to test how how your rails app look on your phones or tablets! Just type in external http in your phone/tablet browser (of course, you should be connected on the same network as your computer)!

Happy coding!