polarblau
polarblau

Reputation: 17744

Rails: Refresh browser automatically when view (and related) files change

A lot of my work (in Rails) actually centers around the views, images, SASS/CSS and Coffescript/Javascript files and I'd love to have a solution that refreshes the browser, whenever I make a change to any of this type of files. A little like autotest or watchr but for 'design' tasks.

I've looked at watchr and fs-event, which seem to provide related functionality and look around the web, but I couldn't find any ready solution yet. Did I miss something? Hard to believe that this wouldn't have been done yet — the tools clearly exist.

Assuming that a tool like this really doesn't exist, I'd like to have crack at writing my own solution. So if you have some advice on what to consider, where to have a look at interesting projects etc. — I'd appreciate that as well.

Update An example workflow would look like this:

  1. Start "watcher application" in terminal
  2. Rails server starts if it's not running
  3. Browser window opens automagically pointing to rails server
  4. I go and change a change some HTML in a view
  5. The browser refreshes automatically
  6. I update some CSS
  7. The browser refreshes automatically
  8. I add a new JS file
  9. The browser refreshes automatically

Cheers!

Upvotes: 6

Views: 8652

Answers (5)

tgf
tgf

Reputation: 3266

For Rails 6 or 7 running with Hotwire (default) you can use the hotwire-livereload gem. It watches assets and views and uses ActionCable (websockets) to trigger a refresh over turbo.

Note that #3 (opening a web browser) in your example workflow won't be covered.

Upvotes: 1

rharter
rharter

Reputation: 2495

It's been a while, but I've found something I think is even better than any of these options. With Live.js you don't even need to modify your project, you can just click the bookmarklet and it will automatically update when something changes.

The only downside is that you will get a lot of HEAD requests in your server log, but since I use this when doing style edits that doesn't really bother me. I'd much rather have that then have to modify my project just for a development tool.

Upvotes: 1

Wilhelm
Wilhelm

Reputation: 820

Try Guard::Livereload. It will automatically reload your browser when 'view' files are modified.

For more information (and a demo) see: http://asciicasts.com/episodes/264-guard

Upvotes: 4

Pierre-Luc Simard
Pierre-Luc Simard

Reputation: 2721

From your description I would think that LiveReload would do the trick for you.

You'll need to change the .livereload file to only reload the browser on specific file change but it's all covered in the readme (scroll to the configuration section)

There's also XRefresh that can do pretty much the same stuff but I've never used it.

Upvotes: 10

jmcnevin
jmcnevin

Reputation: 1285

Perhaps you're looking for something like this project?

https://github.com/logankoester/autorefresh

Upvotes: 3

Related Questions