Mobile Web Development with Tunnlr

If you are into mobile web development, you may want to check out Tunnlr. What is Tunnlr? If you are into Rails or Facebook development, you may already be hipped to Tunnlr. But for those of us who weren’t, it is a port forwarding service. Why would you want to use it for mobile web development? Well, Tunnlr allows you to make your unpublished website visible publicly temporarily. Why would you want to do that? Here are a few reasons why:

  1. To test show your site to someone who is remote
  2. To test your site at 3G speed
  3. To interactively debug your site from a phone

Tunnlr will assign you a publicly visible URL, which points to your dev box. This can be a great way to allow others to see it. Simply send your Tunnlr URL to people you would like to see your site.  Tunnlr isn’t free, but it is available at the reasonable fee of $5 a month after a 90 day trial.

How Does It Work?

To quote the Tunnlr website:

Tunnlr uses SSH remote tunneling. It securely connects a port on your local machine to an open port on our public server. Once you start your Tunnlr client, the web server on your local machine will be available to the rest of the world through your special Tunnlr URL.

Tunnlr uses public-key cryptography to secure the communication between their server and your machine. So you will need to generate a public/private key pair. I recommend creating it before getting started.

Create a Public/Private Key Pair

  • Check the ssh directory of your machine to be sure that you don’t already have a key pair
    • from Terminal, ls ~/.ssh
    • You will be looking for two identically named files, one without an extension and the other with a .pub extension, for example: identity and identity.pub
    • In the above example, identity.pub would be your public key – this is the key that you will give to Tunnlr. The other is your private key. NEVER GIVE IT OUT.
  • If you need to create a key pair:
    • ssh-keygen -t dsa
    • You will be prompted for a key name, if you don’t enter one, it will use, id_dsa, by default. You also be asked for a passphrase, you can simply press enter and skip entering. Two files will be created: id_dsa and id_dsa.pub. Your public key will be id_dsa.pub.
  • Copy the public key to the clipboard:
    • cat id_dsa.pub | pbcopy
Sign Up

  • Go to http://tunnlr.com and click the “Sign Up” tab
  • Click the “Single” link and fill out the form

  • You will be sent a verification email, once you respond you will have access to Tunnlr via your own URL. Be sure to use this URL when you login.
  • Go to your Tunnlr URL address and log in
  • Your home page will show your Tunnlr URL
  • Copy your public key into the text area labelled, “Authorized Keys”
  • Click the “Save” button
  • Near the bottom of the web page, click the link “How do I manually start a tunnel? (+)”
  • The ssh command line will be displayed, copy it for the next part

Start the Tunnel

ssh is the Mac’s built-in implementation of OpenSSH. There is no graphical interface for ssh, so you will have to use terminal to configure it. The exact command line for your tunnel may be different than mine, so be sure to copy the command line exactly as it appeared on screen from the previous section. In my case, I want Tunnlr to talk to my Mac’s web server, so I use port 80.



Working with a PC Virtual Machine

Most of my backend servers use Microsoft’s ASP.NET MVC framework. On my Mac, I use Parallels 7 to create a PC virtual machine. In order to talk to the PC virtual machine, you just need to use its ip address instead of the four zeros above. My test website is running on port 8200 on ip address 192.168.1.91, so the command line is:

When you are through testing your website just stop ssh by typing ctrl-C. If you would like to be more secure you can kill the tunnel on Tunnlr by simply clicking the “Kill Old Tunnels” button below Tools on the right hand side.

Summary

If everything worked-out right you should be able to hit your website from any device connected to the Internet. Remember the tunnel is only open while ssh is running on your Mac. If you close the terminal or control-C the program, the connection is terminated.

References

http://tunnlr.com

Advertisements

37 thoughts on “Mobile Web Development with Tunnlr

  1. Thanks for the kind words. I will keep cranking out posts about one a week, so be sure to follow me on Twitter @therockncoder. I usually announce new posts there first.

    Like

  2. I'm glad you enjoyed the post and thanks for spreading the word. I normally do about a post a week and announce them on Twitter first @therockncoder, so be sure to follow.

    Like

  3. It is really awesome for me to see you and your excellent handwork again. Every part of your perform look excellent. Getting excited about studying more from you!Very exciting publish. I would like discuss here some awesome information about Facebook Development or my space or fb or fb program i wish you would like them.

    Like

  4. I always like to know some important things. Website is an major importance in today’s business world This is exactly what I was looking. Thank you for sharing such useful information about web design. So I adhere to this site for collecting some important and useful article for post and sharing with some of my friends.) website design company bangladesh

    Like

  5. Great post . It takes me almost half an hour to read the whole post. Definitely this one of the informative and useful post to me. Thanks for the share and plz visit my site Web Design Company Elesoftech is a leading offshare web development,mobile application, iphone application.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s