You’ve spent hours working locally on your computer, getting that new website design to look just right. Your CMS is nicely set up with sample content and you want to test it out on a few mobile devices and tablets. Your client also wants to take a look — but you don’t have time to migrate it all to a public server to give them a quick peek.
If you’re a web developer, chances are you’ve been in this situation plenty of times. And you probably spent those times burning a little midnight oil migrating things onto a public-facing server wishing there was an easier way.
To all those tired-eyed web developers out there, I’m here to tell you that an easier way has arrived! In fact, a whole slew of applications and services are available to help make this process easier by providing access to your localhost from the web. The ones I’ll be discussing in this article are:
How is it Possible to Access localhost From Anywhere?
It is possible through secure tunnel services online! These are services that provide you with a tunnel from the internet to your machine.
What that means is that they provide a publicly accessible URL, watch for calls on that URL and forward those calls to your localhost server. All the confusing setup has been done for you — all you need to do is install an application and point it to your localhost.
A Note About Using Virtual Hosts
On my localhost, I’ve got virtual hosts set up. Without having the address from each service below listed as a
ServerAlias, my server would refuse to play nicely. A few hours of confusion ensued. If you’re in the same boat, add a
ServerAlias to your httpd.conf, replacing the ngrok address you see below with the address from the service you’re using:
<VirtualHost *:80> DocumentRoot "/Users/patcat/Web" ServerName mytestsite.test ServerAlias 350c0f8e.ngrok.com </VirtualHost>
ngrok is an application for Windows, Mac OS X, and Linux that creates a tunnel but also allows you to inspect all traffic that goes through the tunnel and replay that traffic for testing.
You can use basic features for free and then sign up to access more advanced features. It works on a pay-what-you-want system, so you decide how much this software is worth! One key advantage to ngrok is that it has no dependencies. You install ngrok and run it. Nothing else is required.
How to use ngrok
Go to ngrok.com, download the archive and extract it to wherever you’d like ngrok to live on your computer.
Open up a command line terminal and go to the folder you extracted ngrok to. Run the following command to create a tunnel to your localhost on port 80:
You’ll see a screen like so:
In the example above, we’ve got traffic to a randomly generated ngrok address of http://3dfab6bf.ngrok.com being forwarded to our localhost on 127.0.0.1:80.
Open that URL on any device with an internet connection and you’ll be accessing your localhost from the web!
One of the more unique offerings ngrok provides is the ability to inspect past traffic. To do that, go to http://localhost:4040/ on your computer. You’ll access a dashboard showing inbound requests. You can click each request on the left and see details on the right for the headers and other data. My favourite use of this is seeing JSON data returned back from requests. The very basic layout of this when loading a simple HTML page looks like this:
You can even replay a request by clicking the “Replay” button on the right. That’ll re-run a request for you over the tunnel.
ngrok’s Advanced Features
If you sign up to ngrok for free, you can use additional features such as:
Custom subdomains (so you don’t need to remember that randomly generated URL!). If you pay a bit to help keep ngrok running, you can reserve a subdomain so others can’t take it. The following allows you to view your localhost at nogophersinmytunnel.ngrok.com:
ngrok -subdomain nogophersinmytunnel 80
Password protection to prevent random members of the public from accessing your site:
ngrok -httpauth "username:password" 80
If you’ve paid a bit of money for ngrok, they’ll allow you to use your own domains, rather than needing to use ngrok.com:
ngrok -hostname "tunnel.yourdomain.com" 80
You can even tunnel to an IP address on your local network that otherwise would not be accessible to the outside world:
Or create a tunnel for other non-HTTP services:
ngrok -proto=tcp 22
There are a bunch of other things you can do, from running multiple tunnels at once to creating a config file to save all these settings for future use.
To read up on all that is possible, see the ngrok’s usage page.
PageKite is a Python-based “dynamic tunnel based reverse proxy” that works on Windows, Mac OS X, Linux, and even Android devices! It is very similar to ngrok but has been around for quite a bit longer and appears quite a bit more battle-tested for a larger set of uses. They’ve even got it working with the Minecraft protocol to allow people to run a Minecraft server on their local machine.
You can sign up for a free trial for a month. After that it has a pay-what-you-want system (a minimum of USD$3 a month, or free if you work on Free Open Source Software). You do need to pay more to get more in this case though, with those paying larger amounts getting a larger quota, a longer term of service, custom subdomains, and so forth.
PageKite doesn’t appear to have a traffic inspector like ngrok but it does have rather incredible features like an Android app that allows you to use the same PageKite tunnelling on your Android device.
They recently deployed a front-end relay server in Australia, so this could potentially provide faster speeds for Aussie developers.
How to use PageKite
Go to PageKite.net and download the version for your OS. For Windows users, you’ll need to make sure you have Python installed first. For Mac OS X and Linux, you can use a simple curl command to install it straight from your command line.
Once downloaded, run this command to run a tunnel to your localhost server. You choose a specific subdomain which you use each time (rather than the random allocation in ngrok). I’ve chosen
pagekite.py 80 quickgetintothetunnel.pagekite.me
It’ll run through and sign you up to the service if you’re not already signed up. Then you’ll have localhost up and running for the world!
Advanced Features of PageKite
A few of the impressive additional features PageKite has are:
No need for a web server. If you don’t have a server running, it has an inbuilt web server that can run your static files like this:
pagekite.py /path/to/folder igotthattunnelvision.pagekite.me
Like ngrok, you can restrict access via password:
pagekite.py 80 terelekkayatuneli.pagekite.me +password/username=password
Or restrict access via IP addresses:
pagekite.py 80 arcadefirecamethroughmywindow.pagekite.me +ip/188.8.131.52=ok +ip/4.5.6=ok
As mentioned above, you can even run all of this on your phone. I installed an Android web server called kWS and then ran Pagekite to expose it to the web:
It’s definitely not something I’ll be doing every day but it’s pretty neat to see that this stuff is now possible solely on a smartphone!
Just like ngrok, PageKite can do multiple tunnels at once, supports having your own domain and setting up a configuration file for your tunnels. For more, check out their Quick start guide and their more comprehensive how-to page.
Forward is a tunneling service that runs on Ruby and works on Windows, Mac, and Linux. It has a stronger focus on using the service to show clients work in progress and so includes features such as setting placeholder pages for when the tunnel is turned off and ensuring robots.txt is off to ask our friendly search engines not to index it.
Forward has a free 30-day trial and then has monthly plans for individuals, small businesses, and larger businesses.
How to use Forward
Sign up for an account at forwardhq.com. When signing up, you provide the initial URL that you’d like to use on the service (similar to PageKite). I set mine up to forward to patcat.fwd.wf. Make sure you’ve got Ruby and Rubygems installed on your computer!
Install the Forward gem. I needed to use sudo for it to work successfully on my Mac:
sudo gem install forward
In order to start a tunnel to your localhost on port 80 you run this command:
It’ll run just like ngrok and PageKite!
Advanced Features of Forward
Much of the advanced features of Forward are similar to ngrok:
You cannot set a totally different subdomain but can set up a subdomain prefix which they call a “project”. For example, I can set platypusestunneltoo-patcat.fwd.wf as my tunnel like so:
forward 80 platypusestunneltoo
You can set it up to allocate certain projects with your own domain, rather than the fwd.wf one:
forward 80 --cname molesdotoo.mydomain.com platypusestunneltoo
Like the others, you can do password protection. However, Forward also has the option to log into your account on forwardhq.com and set a global username and password too which seemed quite useful! For project-specific usernames and passwords, you’d run the following command:
forward 80 --auth username:password
My favourite feature with Forward is that it works very well with virtual hosts, providing a way to create a tunnel to the specific virtual host without needing to adjust your server setup (basically, you don’t need to change your http.conf file like I suggested above… which is nice!):
Forward also has project files to save your settings into, just as ngrok and PageKite did. A full list of their options can be found on their support page.
ProxyLocal appears to be a much smaller-scale tunneling service that runs on Ruby. It is completely free and could be a good budget option for students and those needing a tunneling service very infrequently.
Update: ProxyLocal has since shut down and is recommending ngrok as the replacement service.
It has less features but does the job well. It doesn’t require sign up to run it either, which is pretty quick and convenient!
How to Use ProxyLocal
Install the ProxyLocal gem. Just as with Forward I needed to use sudo for it to install successfully on my Mac:
sudo gem install proxylocal
To get a tunnel to your localhost on port 80 running use the command:
The only other option it provides is custom hostnames. The below command would set our tunnel URL to lightattheendofthe.t.proxylocal.com:
proxylocal 80 --host lightattheendofthe
BrowserStack provides provides automated screenshots and virtual machines to test your website against a range of devices and browsers. If the reason you’re wanting to access localhost is for testing, BrowserStack might be of interest to you.
You can use the above methods to test localhost sites in the BrowserStack virtual machines, however it also has a browser extension for Chrome and Firefox allowing you to provide access to your localhost from their servers.
However, this functionality is only for the BrowserStack services and isn’t accessible to the general public. BrowserStack comes with a free trial, after which it will cost you a monthly fee to use the service. It’d be handy for cases where the sole reason you’re looking to access localhost is to do device testing.
How to use BrowserStack
In the end though, it’ll allow you to test your localhost sites in virtual machines run over the web like so:
My personal favourites after playing around with them all would have to be ngrok and PageKite.
PageKite seems like the most multifaceted solution with a huge amount of potential. It has been developed and extended to fit a range of uses over the years, making it a really impressive application!
ngrok is great too for its simplicity and the traffic inspector. It has more than enough features for most web developers looking to access their localhost from the web.
If you’re working on a computer with an active internet connection, you can now set up access to your localhost from anywhere in only a few minutes! It’s incredibly simple to get started and, as you can see… there’s no shortage of solutions!
Have you used any of these services? Do you have any others you prefer? I’d love to know your thoughts in the comments below!
PatCat is the founder of Dev Diner, a site that explores developing for emerging tech such as virtual and augmented reality, the Internet of Things, artificial intelligence and wearables. He is a SitePoint contributing editor for emerging tech, an instructor at SitePoint Premium and O'Reilly, a Meta Pioneer and freelance developer who loves every opportunity to tinker with something new in a tech demo.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns