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.

  1. Thanks for showing me ngrok. So great for what it does. Lately, I have been using modulus to push my projects, but this is better since I don’t have to zip and push changes every time. Now, if I were using something like Heroku, which has automation with Git, I wouldn’t need ngrok. But I do, and I am thankful for this post!

  2. If your doing dev on your macbook and just want to see things on your iphone: .local:5000/ . This assumes both are on same wifi network. . Thanks for the article though, ngrok seems a lot better than localtunnel so far.

  3. I think you might be on to something in keeping your sites in subdirectories of the htdocs folder. I currently keep them all in client folders in the ‘sites’ directory and use name-based resolution (i.e. but that’s a pain when sharing across networks/the internet as obviously those names don’t resolve. I think I’ll give your way a go.

Leave a Reply

Your email address will not be published. Required fields are marked *