dev domain extension for local development with Vagrant

I like using a dev domain extension for some of my websites in local development. When doing local development using Vagrant, you often have to configure specific IP addresses for your website or service. For example, if I configure my Vagrant host URL to be 192.168.xx.yy I would have to visit that link in the browser. That's inconvenient to type—I'd rather type a real domain name, one similar to my production site. For this website, I've made my local dev domain host tinaciousdesign.dev.

1. Find your vagrant URL

This can be found in your Vagrantfile. Mine looks like this:

Vagrant.configure("2") do |config|
  # ...
  config.vm.network "private_network", ip: "192.168.xx.yy"
  # ...
end

2. Point your Vagrant URL to your dev domain

You can do so by modifying the hosts file found at /etc/hosts. You'll need root privileges to modify this file:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1    localhost
255.255.255.255    broadcasthost
::1             localhost

192.168.xx.yy   tinaciousdesign.dev

3. Visit your new domain

Now go to your browser and visit your new URL with the dev domain extension. You should see it load your Vagrant website. As of the most recent version of Chrome, this no longer works without configuring SSL. For now, visit your site in Firefox or Safari. Stay tuned for another blog post about that.