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 should:
Install Node.js
You can find installation instructions here.
Install BrowserSync
Open your terminal 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
External: http://192.168.1.5:3001
------------------------------------
UI: http://localhost:3002
UI External: http://192.168.1.5:3002
------------------------------------
And that is it! Now every time you change HTML, CSS, or your JS files, the page will automatically refresh and you will see new changes!
Also, this is a great way to test how your Rails app looks on phones or tablet. Just type in external http in your phone/tablet browser (of course, you should be connected to the same network as your computer).
Happy coding!
Creating
software solutions
that work
