Web development with Vagrant on a local network

24 July 2014

by Michael Birch

How to configure any device that’s on your network to view a development website on a Vagrant box. Making sure LiveReload will work on all devices.

Using xip.io

xip.io works like magic to direct requests from other devices on a local network to the host machine.

Local VM IP Address: 192.168.111.4
Host IP Address: 192.168.1.2

puPHPet.com settings for Apache Virtual Host:

Server Name dev.domainname
Server Alias dev.domainname.192.168.1.2.xip.io

This won’t work yet for other devices on the network, because http://dev.domainname.192.168.1.2.xip.io will be directed to localhost on the host machine. Port forwarding is needed to forward the request to the Vagrant VM.

Port Forwarding

See http://docs.vagrantup.com/v2/networking/forwarded_ports.html

puPHPet.com settings for Local VM Forwarded Ports:

Host port: 7777
Box port: 80

This means that if you visit http://192.168.1.2:7777, the request will be forwarded to the guest: 192.168.111.4

Enter this address in a browser on another machine on your network to view the website: http://dev.domainname.192.168.1.2.xip.io:7777

LiveReload

The request needs to go to your host machine. Make sure to specify the host’s IP address in the script that you include in your HTML:

<script>document.write('<script src="http://192.168.1.2:35729/livereload.js?snipver=1"></' + 'script>')</script>