Cross browser testing is a key part of modern web development. Anything we can do to make it easier and faster will benefit our development process.
Today we’re going to look at strategies for domain name and DNS configuration in your local development environment to make cross platform and cross browser testing easier.
Use .dev
First, use .dev for the TLD for local development sites. For QAtab, I have both blog.qatab.dev and www.qatab.dev setup as Virtual Hosts in my local Apache and I’ve edited /etc/hosts so that they both point to 127.0.0.1. This makes it easy to access multiple development sites locally without having to edit my Apache configuration each time – but it only works for my local browsers. We need a solution for VM browsers and other devices on the network.
Setup a Static IP
In order to route local traffic to your development system, you need a static IP. Since we’re only looking for a local setup and you’re probably running DHCP on a router, the easiest solution is to configure a static IP address for your system’s MAC address.
The means of configuring the IP address based on MAC address this will vary from router-to-router but it’s a straightforward process and your particular router should have documentation on the process. Doing this on your router via MAC address ensures that you won’t have a bad, static IP address if you connect to some other network and it won’t get allocated by the DHCP server to some other computer.
Make a note of the IP address you choose because we’ll need it later.
Setup a Local DNS Server
This is the only somewhat tricky part. I was able to setup a DNS server on my NAS by following some directions I found online. You might be able to run a DNS server on your router or setup a basic Linux server with DNS on your network to handle it.
After you have your DNS server setup, you need to add routes to your local IP address for your development hostnames:
[gist id=”8687632″]
Configuring Devices to use Local DNS
We’ve got a local DNS setup, with entries for our development host. Now we need to update the other systems/devices on the network to use them.
There are two options here:
- Configure devices and VMs individually
- Configure your router to serve your local DNS server IP in DHCP setup
When you are first getting setup, I recommend doing individual devices. Once you’ve got that working and are happy with the configuration of your local DNS server, then you can change your DHCP settings and any new devices you bring onto your network will automatically be able to access your local development sites.
Once you’ve configured a device, simply open a web browser there and access your development site. If everything is done correctly, it should come up and you’ll be able to browse it just as if you were on your development system.
Some Notes on Cross Browser Testing with this Setup
Now that you’ve got a robust setup that will make it easier to test sites in your development environment on multiple devices/platforms, there are a few things to keep in mind:
- This will only work on your local (home/home office) network. It will not work in a coffee shop or your local co-working space.
- You will need to type the fully qualified URLs with protocol (http://www.qatab.dev) into your browser or it will be interpreted as a search.
- Unless you’ve configured SSL for your local development server, the https protocol won’t be available.
- If you’ve configured your router to serve your local DNS IP, any device on your network will be able to access your development sites. Keep this in mind if you’re developing any super secret stuff.