Chrome 63 breaks local *.dev domains

I did a complete wipe and reinstall of macOS High Sierra on my aging 2012 mbp, thinking it would solve all my random woes (false). As I was setting up my dev environment, I was baffled when both Safari and Chrome were redirecting all *.dev domain requests to https. Console showed no 301 redirects. Wth? I thought it was something I messed up in Apache config and spent a few hours beating my head against the keyboard to no avail.

Turns out .dev is a TLD owned by Google, and they recently preloaded HSTS rules for the TLD which means you cannot use http with *.dev any more. Fun!

I decided to switch all my dev domains to *.localhost. (I also toyed around with adding self-signed SSL certs for each *.dev domain, with some luck on my home computer and less luck on my work computer. In the end I decided to just go with switching to *.localhost.)

Here’s a quick rundown of things I had to do. Hopefully it helps someone.

I use dnsmasq to avoid having to edit /etc/hosts for every dev domain I work on. This gist has the latest way to do this.

First, add *.localhost to dnsmasq setup:

echo 'address=/.localhost/127.0.0.1' >> $(brew --prefix)/etc/dnsmasq.conf
sudo bash -c 'echo "nameserver 127.0.0.1" > /etc/resolver/localhost'
sudo brew services stop dnsmasq && sudo brew services start dnsmasq

ping foo.localhost for sanity to see if it works. May have to reboot if it doesn’t. I did, but it may have been from other finagling.

I use Homebrew Apache and mod_vhost_alias (good tutorial here) so open up the vhost config with subl /usr/local/etc/httpd/extra/httpd-vhosts.conf and add this block:

<virtualhost>
  ServerAlias localhost *.localhost
  VirtualDocumentRoot /Users/nate/Sites/%1/web/
  UseCanonicalName Off
</virtualhost>

sudo apachectl restart

We use Bedrock to make Wordpress development 17% less painful (note document root above with …/web/). The only thing you need to do is update your local .env file with WP_HOME=http://cfs.localhost. If you use the super handy wp-cli you can run wp search-replace 'cfs.dev' 'cfs.localhost' to update db references.

We have long been using this excellent guide from Grav as a jumping off point to set up our dev environments, which already has an update noting this change from Chrome 63.