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.
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.
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
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>