Preface
The specific instructions in this guide will be tailored toward Mac OS X. With that said, however, you should be able to accomplish this on all major Operating Systems (Mac, Windows, Linux). This guide is also tailored towards those using Vagrant for local development. It is certainly possible to use other local development tools and still achieve the same sort of outcome. If you are using another tool, such as MAMP/WAMP/XAMP, or Desktop Server, keep in mind that you will likely have to research specific solutions for your tool of choice.Requirements
Before we begin, you’re going to need a few things. The Setup section below will give further details about how to install everything. If you already have Vagrant and VVV set up and running, feel free to skip ahead. Here is exactly what you need:- VirtualBox
- Vagrant
- Varying Vagrant Vagrants (aka “VVV”)
Setup
VVV provides great instructions for installing everything you need. Follow their instructions to download VirtualBox, Vagrant, and VVV itself, but make sure that you stop before going on to step 4. You'll want to read through the sections below regarding customization before you continue.Customizing VVV
The default configuration of VVV sets up a private network. While that’s fine for most purposes, that isn’t the best solution if we want to be able to use other devices to get to the virtual machine. That means we need to provide our own configuration to override the defaults. There are three ways to go about doing this, but only two of them are recommended:- Create a file named
Customfilein thevvvdirectory. - Create a file named
Vagrantfilein your home directory:~/.vagrant.d/Vagrantfile - Modify the
Vagrantfilein thevvvdirectory (bad idea, avoid this at all costs).
Use Customfile
VVV Provides a way for you to Customize your VVV setup, without needing to modify theVagrantfiledirectly. Navigate to your vvv folder, and use your text editor of choice to create a file named Customfile. Here’s what you should put inside of it:
# Set up with a Public network
config.vm.network :public_networkUse a Vagrantfile in your home directory
When you use Vagrant, there is a primaryVagrantfile for your project that determines how a virtual machine is configured. As it turns out, that is not the only Vagrantfile that is parsed by Vagrant. According to the documentation, Vagrant will actually read multiple Vagrantfiles when it runs. We can use this to our advantage and set up a global file that has defaults for all instances of Vagrant on our system.
When you installed Vagrant, it created a folder in your home directory named .vagrant.d. This directory is hidden by default (due to the leading period). If you’re using Finder, you can navigate to this directory by going to the “Go” menu, then to “Go to Folder…”. In the dialog that opens, enter ~/.vagrant.d/ and click the “Go” button. If you’re using the terminal, you can just cd ~/.vagrant.d/.
Using your text editor of choice, create a file named Vagrantfile. Here’s what you should put into that file:
# -*- mode: ruby -*-
# vi: set ft=ruby :
Vagrant.configure(2) do |config|
# Set up with a Public network
config.vm.network :public_network
endModify the Vagrantfile in the VVV directory
Don’t do this. Really. It makes your life harder. If you insist on doing things this way, you’ll have to figure it out on your own!Vagrant Up
Now that we have our modifications in place, it’s time to continue with the first Vagrant Up instructions from above, and that means running thevagrant up command from the Terminal. If all goes well, you should be prompted for the network interface shortly after you run the command. Here are the options that I had for my computer:
==> default: Available bridged network interfaces:
1) en0: Wi-Fi (AirPort)
2) en1: Thunderbolt 1
3) en2: Thunderbolt 2
4) p2p0
5) awdl0
6) bridge0
7) en3: Display Ethernet
==> default: When choosing an interface, it is usually the one that is
==> default: being used to connect to the internet.
default: Which interface should the network bridge to?Connecting to the Vagrant
We first need to ensure that we can access the vagrant locally before we test across other sites on the network. We also need to determine the IP address that was assigned to the vagrant instance. From thevvv directory, execute the following command in the terminal:
vagrant sshifconfig, which should look something like this:
vagrant@vvv:~$ ifconfig
eth0 Link encap:Ethernet HWaddr 08:00:27:ba:88:2f
inet addr:10.0.2.15 Bcast:10.0.2.255 Mask:255.255.255.0
inet6 addr: fe80::a00:27ff:feba:882f/64 Scope:Link
UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1
RX packets:431255 errors:0 dropped:0 overruns:0 frame:0
TX packets:128287 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 txqueuelen:1000
RX bytes:450247791 (450.2 MB) TX bytes:9859085 (9.8 MB)
eth1 Link encap:Ethernet HWaddr 08:00:27:88:59:d1
inet addr:192.168.50.4 Bcast:192.168.50.255 Mask:255.255.255.0
inet6 addr: fe80::a00:27ff:fe88:59d1/64 Scope:Link
UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1
RX packets:79 errors:0 dropped:0 overruns:0 frame:0
TX packets:8 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 txqueuelen:1000
RX bytes:15848 (15.8 KB) TX bytes:648 (648.0 B)
eth2 Link encap:Ethernet HWaddr 08:00:27:e8:27:93
inet addr:10.1.10.145 Bcast:10.1.10.255 Mask:255.255.255.0
inet6 addr: 2603:301d:f05:6700:a00:27ff:fee8:2793/64 Scope:Global
inet6 addr: fe80::a00:27ff:fee8:2793/64 Scope:Link
UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1
RX packets:703 errors:0 dropped:0 overruns:0 frame:0
TX packets:9 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 txqueuelen:1000
RX bytes:103352 (103.3 KB) TX bytes:1270 (1.2 KB)
lo Link encap:Local Loopback
inet addr:127.0.0.1 Mask:255.0.0.0
inet6 addr: ::1/128 Scope:Host
UP LOOPBACK RUNNING MTU:65536 Metric:1
RX packets:93 errors:0 dropped:0 overruns:0 frame:0
TX packets:93 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 txqueuelen:0
RX bytes:9088 (9.0 KB) TX bytes:9088 (9.0 KB)
10.1.10.*. The last number is going to be unique to each device on the network.
I also know that the default IP address for VVV is 192.168.50.4. Because the default is still running, and we have merely added a network interface, I know to ignore that IP address. I can also ignore the 127.0.0.1 IP address, because that is always an internal address to each computer.
With that knowledge, I’m left with two IP addresses to choose from: 10.0.2.15 and 10.1.10.145. Since I know how my router is configured, I’m going to go with the second address and ignore the one that starts with 10.0.*. To confirm the address is the one that I want, I should be able to enter that IP address directly in the web browser on my phone. If it’s the right address, then you should see the VVV landing page, which looks like this:
Accessing your site by Domain Name
While getting to the VVV landing page using the IP address is pretty nifty, you will quickly realize that it isn’t very useful. The links won’t work properly, because your phone doesn’t know how to resolve the domain names to the correct IP. Enter a service called xip.io (pronounced ZIP-ee-oh), that just so happens to be built into VVV. As described on their website, xip.io works this way:xip.io runs a custom DNS server on the public Internet. When your computer looks up a xip.io domain, the xip.io DNS server extracts the IP address from the domain and sends it back in the response.That might be confusing, so let’s use an example. In order to use xip.io to access my local sites, I need to know 2 things:
- The IP address of the vagrant. In the previous section, I determined that my example is using the IP
10.1.10.145. - The domain name of the website. I’m going to use the first one listed on the VVV landing page, “local.wordpress.dev”.
.dev portion of “local.wordpress.dev”. I’m then going to replace that with .<ip address>.xip.io. Using my actual IP address, that looks like local.wordpress.10.1.10.145.xip.io. Now I can enter that into my mobile phone’s browser, and get to the right place:
