LearnQuick Tip: Use bit.ly for Local Development URLs

Treehouse
writes on March 31, 2011

Share with your friends










Submit

Recently I’ve been working on a new Master Class for Think Vitamin Membership on the topic of responsive design. One of the major goals of responsive design is cross-browser compatibility, so as you might expect, I’m teaching a project that works across a broad spectrum of browsers and devices, including 5 different mobile browsers.

Five different mobile phones, all rendering the same webpage.

When testing for mobile devices, I will usually connect the device to the local Wi-Fi network, then enter in the IP address of my local computer with the path to the project. So for example, my local development URL looked like this when I started:

http://10.0.1.35/~nick/RWD/Web/

We recently purchased several unlocked handsets for all of our testing needs, because it’s always best to test directly on the target hardware whenever possible. However, typing this long URL into 5 different phones on a bunch of tiny keyboards is a pain. Instead, I decided to use bit.ly to shorten my local development path. Using this trick, I was able to create manageable URLs, like this:

http://j.mp/nickrwd

I’m betting someone has already thought to do this, but I’ve never heard of it before, so hopefully the next time you have to develop mobile websites this will come in handy. If you have any mobile development tips of your own, please share!

21 Responses to “Quick Tip: Use bit.ly for Local Development URLs”

  1. That’s a great idea… will use this!

  2. Create a html file on your development server.

    Bookmark it on all the devices. Update this page with links to stuff you want to test.

    This means you only need to type in an address a few times and then you just click the bookmark and then the link to test.

  3. Locally, if you use MAMP or MAMP pro (http://mamp.info/), you can use whatever you want as the url so it can be a lot shorter…as long as your mobile device is in the same network. You can map also map multiple URLs with the Pro version to different projects. Ultimately you can just edit your hosts file…/private/etc/hosts, but it’s much easier to manage with MAMP, there’s a lot more features and there’s a free version.

    If you want external access to your mobile projects, you can use DYN DNS. to map a domain to your local project…that way you can allow external clients or yourself not on your network to access your WebApp…even if you have a dynamic IP address.

  4. Usually I just use a hosts file to map domain.dev, but in your case I’d use a local DNS server.

  5. I wonder if anyone knows a way to edit the local router’s hosts file so that all the devices on the network can see the local dev workstation via a short URL? Been trying to figure this out for a while.

  6. Got a better Idea for you Nick. Create a QR code for the URL and scan it. No fiddly typing at all!

  7. Thanks for the tips. I will try using bit.ly and see if this will work for me.

  8. I found a simple Snow Leopard DNS server software (http://cutedgesystems.com/software/DNSEnablerSnow). Run it on my Mini and then point the router to it as a DNS server. Now all mobile devices on the local network can see my development machine as a short URL. I’m geekely overjoyed. Thanks Ivan and Nick.

  9. kate welsh on April 1, 2011 at 9:37 am said:

    This is a great and useful info.

  10. A really Great idea! I never tough about this

  11. Why not just save a bookmark on the device?

    • If you’re only testing 1 URL, that works. We’re constantly testing different projects on different machines though, so there would still be lots of typing for us to initially save bookmarks.

  12. I would probably use one of the following, depending on the scenario:

    1. The Chrome to Phone extension, works well if I only need to do testing on Android devices
    2. QR Codes, I made a simple bookmarklet that outputs a QR code from the current URL
    3. Have a page bookmarked or set as home page that just lists various links

    The bookmarklet if anyone is interested:

    javascript:(function(){location.href=’http://api.qrserver.com/v1/create-qr-code/?size=240×240&data=’+encodeURI(location.href)})();

  13. I always use Google’s “Chrome to Phone” extension, so fast, (only for Android), but works great !
    https://chrome.google.com/extensions/detail/oadboiipflhobonjjffjbfekfjcgkhco?utm_campaign=en&utm_source=en-ha-na-us-sk-ext-ctp&utm_medium=ha

    srry for the doublepost, hit it again by accident..

Leave a Reply

Learn to code with Treehouse

Start your 14 day free trial today and get access to hundreds of video courses in web development, design and business!

Learn more