Howto: Livereload on mobiles & tablets

While developing responsive pages, it’s nice to be able to check the pages on a mobile device.

On a mac, this is easy. Just go to System Preferences > Network and check the IP address. Then add :4567 (the port that the Middleman server is using) to it and direct the mobile browser there.

If your computer is behind a DHCP router, the IP address will only be useful as long as the mobile is on the same network – but that’s usually the case when developing.

I don’t expect it to be any harder on Windows or Linux, but someone else has to contribute the details.

If using Middleman-Livereload, you need to add the ip number to the configuration. In config.rb:

activate :livereload do |livereload|
  livereload.host = Socket.ip_address_list.detect{|intf| intf.ipv4_private?}.ip_address
end

This gives live reload on iPhone and iPad. I have not tested Android.

(If you need the external IP address instead, there are some code for that here: http://stackoverflow.com/questions/5029427/ruby-get-local-ip-nix )

This is fantastic! It’s really nice to have this set up during development. For iOS hardware you may not have at your desk, Apple’s xCode (free to install) has the iOS simulator app buried deep in it’s hierarchy. You can go to:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications

and just drag the iOS Simulator application to the dock. No need to have xCode running. You can then point the iOS Safari browser at localhost. The Hardware > Device menu allows you to choose all recent iPhones and iPads and adjusts the screen size accordingly.