Share localhost for easier mobile testing

All web developers today should be testing their websites and webapps on mobile devices. I don’t mean simulators or emulators; I mean real-life devices that you hold in your hand. I’d like to share my development workflow to help you understand how I develop on my local server, test changes on devices, and share the current state of my work with others via URLs.

Local Setup and MAMP

All my code is divided into folders, with each folder being a separate “project”. Instead of opening files through file://, I use MAMP. The parent directory for all of these “project” folders is the htdocs/ directory that MAMP uses as the root of my local server. This folder resides in /Applications/MAMP/. Say I’m working on Tipsy, I would view its index.html at localhost:8888/tipsy/, the “tipsy/” folder within “htdocs/”.

Of course, the above only applies to static assets that can be served over a server. Most of the time, you’re writing an app that has a server-side component. I usually use NodeJS, but you could use RoR or Django or something else. For Node, I usually have to fire up a local Express server. I follow some similar steps to accomplish this:

$ cd htdocs/
$ cd mynodeapp/
$ npm start
$ Your webserver is now running on localhost:5000...

Now, I can view the app on localhost:5000, and view my other projects on localhost:8888.

Sharing Localhost with ngrok

When it comes to testing in environments other than my local machine, I use ngrok. It’s free, secure, and open-source. For the longest time, I used localtunnel, but I find ngrok to be more reliable. If I want to view localhost:5000 on my iPhone, I just run ngrok like this:

$ ngrok 5000

Tunnel Status                 online
Version                       0.14/0.8
Protocol                      http
Web Interface                 http://localhost:4040
# Conn                        0
Avg Conn Time                 0.00ms

This is really nice! I get a nice URL ( that points to my localhost port, along with a web interface that shows me the requests and responses flowing through the server. I can even secure these URLs with usernames and passwords for added protection and they are all SSL-encrypted.

Another benefit of ngrok is that the URL persists even when you lose your connection, or your computer goes to sleep.

What’s your development and testing workflow? Share them below, so I can improve mine!

Gadgets featured image is All rights reserved by Peter.liehu.