Quickshiftin - Clever Crazy Code

Local Development for Mobile Devices

August 10th, 2013

Local Development

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!

Enter Mobile

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!

Contemporary Solutions

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

  1. You have to enable the proxy every time you want to start testing
  2. You’ll have to remember to disable the proxy every time you’ve finished testing
  3. 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?