Multi device Guard::LiveReload with Chrome Android

000-Guard::LiveReload README.md

Multi device Guard::LiveReload with Chrome Android

1. Copy the following Gemfile, Guardfile, config/environments/development.rb, then bundle
2. Configure your Android devices (see https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=it#reverse-port-forwarding)
3. In Chrome port forwarding settings set two forwards:
   • 8080 => localhost:3000
   • 5729 => localhost:5729
4. Connect as much Android devices as possible (like this)
5. Enjoy!

Useful resources

• Synchronized Cross-device Mobile Testing
• Lightning-Fast Sass Reloading in Rails 3.2

development.rb

# config/environments/development.rb

MyRailsAwesomeApp::Application.configure do
  ...
  # Automatically inject JavaScript needed for LiveReload
  config.middleware.insert_after(ActionDispatch::Static, Rack::LiveReload, live_reload_port: 5729)
end

Gemfile

group :development do
  gem 'guard-livereload', require: false
  gem 'rack-livereload'
  gem 'rb-inotify', require: false # linux
  gem 'rb-fsevent', require: false # os x
end

Guardfile

guard 'livereload', port: '5729' do
  watch(%r{app/views/.+\.(erb|haml|slim)$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{public/.+\.(css|js|html)})
  watch(%r{config/locales/.+\.yml})
  # Rails Assets Pipeline
  watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html|jpg|png))).*}) { |m| "/assets/#{m[3]}" }
end

This is awesome. Thanks