I hate to touch /etc/hosts myself when a project asks me to do so as part of development setup. Tools like Vagrant use zeroconfig/Bonjour to dispatch a .local hostname, but no one seems to remember the ancient, all-mighty Proxy auto-config.
Proxy auto-config allows you to setup hostname and URL mapping in JavaScript. It’s supported on every OS and browser. To use that to setup your own development hostname, you would first need to write a PAC file:
function FindProxyForURL(url, host) {
if (host === 'calypso.localhost') {
return 'PROXY 127.0.0.1:3000';
}
return "DIRECT";
}
The example above points calypso.localhost to 127.0.0.1, as required by the Calypso project. Next, save this file as a private Gist, and get the raw, private, HTTPS URL.
You can file the place to put that URL in the Proxy setting section of your OS, for example, this is how to do it on macOS. Now, open any browser, the hostname should correctly connect to the IP address specified (Firefox comes with it’s own Proxy setting allowing you to specify a PAC, so if you would like the setting to affect only one browser, use Firefox).
This is the simplest way to use a PAC file. The Wikipedia article lists several other use cases for PAC files.
Important considerations
- Use your own PAC file. I didn't share my PAC file hosting on Gist because you should never trust me nor anyone else for that. PAC file has the potential to redirect all your network traffic.
- Turn off PAC auto-discovery. It rely on the expired WPAD protocol to discover PAC file served on your local subnet, but implementation hardly know the boundary of your local domain (it could by checking the Public Suffix list but that list changes almost monthly). Thankfully the good folks at WPADblock initiative secured a few public hostnames that could be exploited.
I hope you find this trick useful.
