Local development is the concept where you install a full stack of server software on your personal computer. A local environment not only creates a sandbox where you can mess around with the site, but it will make the site much faster since there is no Internet access required to load the site. Note the later point may not be 100% true with modern sites. Nowadays there are things like Typekit, and many sites may be connected into various third party APIs required to run the site, for example Chargify. Make sure to setup an environment dedicated for local development in the case of such APIs whenever possible.
If you’ve been developing any time in the past 5 years, you probably already know about local development environments. In the old days there were development servers, where everyone would have a build of the site on the server, but you’d still have to push code up to the server every time you wanted to see a change and you still had some network overhead, usually to a local data center. Good times!
So you figured out how to setup a development stack on your local machine, you can code on the bus and make changes in record time. Just when you thought you knew everything, mobile devices started being able to access TCP/IP networks, and soon enough, you were asked to work on the mobile site. Let’s be frank though, mobile development doesn’t only come into play during development of mobile Websites. Native applications also need to access local environments during development because they often times rely on an HTTP API to do the real work.
Cool stuff, but if you’re like most developers out there, you’ll quickly realize a pretty big snag as soon as you get to the finishing touches of your local setup… You can’t hit your local machine via the name you put in /etc/hosts (or the Windows equivalent). Well don’t worry, that’s what we’re here to discuss!
Most of what I’ve read on the Web suggests using a proxy to route all HTTP traffic from your mobile device to your local machine. Ouch, that sounds painful for a variety of reasons
- You have to enable the proxy every time you want to start testing
- You’ll have to remember to disable the proxy every time you’ve finished testing
- Not all devices let you configure a global HTTP proxy, some may only allow this for the browser or not at all
Who wants to bother turning the proxy on and off both on the local machine and their mobile device every time they work on a mobile site? Not me, I can tell you that. Also, how many devices allow for global HTTP proxy configuration? Some may only allow this in the mobile browser and some devices may have limited mobile browsers, so a proxy might not be an option at all for some devices. What else is there?
Ever heard of DNS? This is what you’re emulating in the first place by creating entries in /etc/hosts to begin with. All you need to get your mobile device to find your local machine is an appropriate DNS entry. Let’s take a look at how to do this.
The hacky way
So you’re at some corporate office that doesn’t have or refuses to edit DNS entries for you on their office / corporate server. It’s ugly, but a sure fire way to circumvent this issue is to create a record on a public DNS server you have access to. Yes, you heard me correctly, you can enter local addresses in a public DNS server. All DNS does is resolve IP addresses based on name. So if your local machine has an address of 192.168.56.28, and you have mydomain.com registered with GoDaddy just create an entry like local-dev.mydomain.com pointed to 192.168.56.28. Then obviously configure the site or API you’re working on to operate under the name dev.mydomain.com. Point your phone’s browser (or the API client in the native app you’re working on) to said domain and viola, you’re developing locally for mobile!
Even though this is a clever solution there are some limitations. Obviously local addresses in a public DNS server isn’t pretty, but it’s not the end of the world either. The other issue, which will likely be more prevalent is the fact that you probably don’t have a static IP on the local network for you local machine. This means you may have to periodically change the entry in the DNS server which can be annoying. Probably not as annoying as messing with the proxy every time you want to code though! Take a look at the next solution for another approach that solves both these issues.
The elegant way
The absolute best way to deal with local dev for mobile in my book is have a local DNS server. I know some readers probably just passed out with fear or screamed in disgust but it’s really not that difficult. It comes down to buying a half-way decent router. I’ve been using a MikroTik router and it works great. If you’re on a budget, you can get the most basic model for $40.
This solution addresses all the issues that came up in the hacky way above.
- No local addresses on a public DNS server
- You can create static IP addresses for you local machine (easily)
And of course you’ll never have to mess with configuration every time you work on the site now. It’s always ready to go!
If you enjoyed this post please consider sharing it!