Grunt - Synchronised Testing Between Browsers/Devices

Today I discovered how easy it is to synchronise testing between browsers/devices when using grunt server.

UPDATE: It has been pointed out to me that I should make it clear that grunt server is part of Yeoman’s Gruntfile. If you’ve set up your project not using Yeoman then this command might be different.

When you run grunt server from the root directory of your project it watches for changes to your site files and refreshes the browser window automatically (using the grunt task grunt-contrib-watch).

If you used Yeoman to scaffold your project (Yeoman installs Bower and Grunt in one neat package, you should definitely check it out) it would have created a Gruntfile for you with all the necessary code to get the live reload task up-and-running. There’s only one thing you need to change, and that’s the hostname option. Find the connect section and if the hostname is set to localhost change it to 0.0.0.0.

Next, run grunt server and a browser window should open showing you your dev site. The url will be something like localhost:9000 (9000 being the port).

Then, on your command line run ifconfig (Update: it has been pointed out to me that `ifconfig` is for OS X - on Windows I believe it should be `ipconfig`) and make a note of your computer’s internal IP address. It will be something like 192.168.100.36 (the last two numbers in the sequence could be anything).

Finally, open the device you want to synchronise to (such as your iPhone), and enter the internal IP address of your computer followed by the port number – it should look something like this: 192.168.100.36:9000

Now when you make changes to your project files you should see both browser windows update together.

There is one caveat - I think the portable device must be on the same network as the computer, which shouldn’t be an issue if they’re both connected to the same WiFi network.

11 notes

  1. jacksonfdam reblogged this from mpkb
  2. mpkb posted this