LocalTunnel: Access your local web server on the internet

If you are a web developer, here is an interesting article for you. At some stage of the development, you might want to share / demo your web application to people outside your local network. This is a common problem in the life of a web developer. There are many ways to expose the contents on your local web server to the external world. Some of the commonly used techniques include: Port forwarding, SSH reverse tunnelling, etc. LocalTunnel is a free service that lets you share your local web server in an easy way.

LocalTunnel is a Ruby program which works on the basis of SSH reverse tunnelling. It connects to a remote host that has Gateway ports enabled. The remote host service is available for free at http://localtunnel.com. After installing LocalTunnel, localtunnel command facilitates the connection between local server and the remote host. 

How to use?

• LocalTunnel can be installed using RubyGems. sudo gem install localtunnel.
• Start your local development server. It can run on any port.
• Run the localtunnel command passing the local port number. When the command is executed for the first time, you need to pass the SSH public key. More details here.  localtunnel –k ~/.ssh/id_rsa.pub 8888
• If the command was successfully executed, it will show the URL to access the dev server. Note: The URL is valid only for this session. Share it with your friends. And, you are done.

LocalTunnel is hosted on github under MIT license.

-- Varun

JavaScript Remote Debugging

Mobile browsers are becoming more powerful day-by-day and you can do almost everything you do on your desktop browser. Many mobile app developers have already started moving towards mobile web app instead of native app. Apps are being built using HTML5 and rich JS libraries. However, one of the major concerns for the developers is the lack of developer tools. The reasons are quite obvious – real estate needed to show the debugger, non-developer friendly environment. The solution to this problem is remote debugging. I have been using JSConsole for this purpose. It comes handy when we want to inspect DOM of the webpage. I stumbled upon “Aardwolf” yesterday and it seems to be a better alternative for JSConsole when it comes to JavaScript debugging. Aardwolf is powered by Node.js.

Features:

• Breakpoints
• Call Stack
• Exception reporting
• JS Console remoting

How does it work?

Aardwolf is a Node application which listens on two ports – One for the debugger UI (8000), another one for the JS file server (8500). It has a code rewriter which rewrites the JS files to be debugged (dynamically). The rewritten JS files are served by the JS file server. The application to be debugged should consume JS files from the above mentioned JS server (rather than the original JS files). This will help establishing connection and adding hooks for debugging. Once the connection is established, we can add breakpoints and debug the JavaScript file.  

How to set up Aardwolf?

• Check out the Aardwolf source code from here or here.
• Create a file ‘config/config.local.js’ within the checked out location. Add the following lines to it:

var config = require('../config/config.defaults.js');
config.serverHost = 'ip-or-hostname-of-your-computer';
config.jsFileServerBaseDir = '/path/to/www/root';

• Start the server by running “node app.js” (Make sure that Node.js is installed on your machine)
• Add the debug library to your web app. Also, all the JS files to be debugged should be served from the JS file server.
  

  <script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/aardwolf.js"></script>
  <script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/some-script.js"></script>
  <script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/some-other-script.js"></script>

  
  
• After the server starts up, open http://localhost:8000 in your desktop browser. The debugger UI should appear.
• Open the web app on your phone and wait for the page to load. The debugger UI will show “Mobile device connected” once the connection is established.
• You can set the breakpoints and view the call stacks on the right pane.

The source code is available on github as well as on bitbucket. The project is available under the MIT license. Aardwolf does not seem to be good at inspecting DOM elements. We can employ both JSConsole and Aardwolf to make our debugging job easier. Happy debugging!!

-- Varun

New sharing option “Comment-Only” in Google Docs

Google has just updated Google Docs with a much needed feature – New sharing option “Comment-Only”. This feature will be rolled out in the coming weeks. In the current version of Google Docs, we need to give edit permission for the collaborator to add comments. With the new “Comment-Only” permission, we can build better workflow system around Google Docs. The reviewer of the doc can only do the job of reviewing. I was planning to write a Google app script to implement a similar functionality with Google Docs Spreadsheet. “Comment-Only” permission can be mixed with the access permission for the doc.

-- Varun

Google DevFests India 2011

Google has been organizing many developer events across the globe to meet the developers and understand their expectations. DevFest is one such event which provides a great opportunity to learn more about Google technologies and developer products. Developer advocates and engineers from Google will be present at the event. This will be an useful forum for the developers to interact with Google engineers. The event is open to all. There are only limited seats. Register here.

Event  : Google DevFest 2011

Venue : The Lalit Ashok Bangalore
Date    : Sep 15, 2011 08:30 - 17:00

Venue : HICC and Novotel, Hyderabad
Date    : Sep 17, 2011 08:30 - 17:00

More details here.

-- Varun

Old British ArtCar

Old Car, originally uploaded by vermegrigio.Via Flickr:Camden, London, UK.August 2011Shooted by Nikon Coolpix S620