DEV Community

loading...

Exposing localhost server to the internet in one minute

levivm profile image Levi Velázquez ・2 min read

Sometimes, we found a situation due to multiple reasons, where we need to expose our local server to internet, maybe we need to show our website to a client and doesn't have enough time for deploying, others, we need to test it out a webhook from a third service and we don't want to create a new deployment just for testing purpose.

So, let's go for it.

ngrok

There services that offer you to set up a tunnel between their servers and your local machine. There are several of them, nevertheless, my recommendation is ngrok.

It has a freemium model, it fits the most basic requirements.

How it works

We download and run a program(ngrok), specifying which port is our local server listening to. ngrok will connect to their external cloud service, creating a public endpoint redirecting all the traffic from it to your server. That's it, simple.

Download and setup

  1. Download it from official site
  2. Unzip /path/to/ngrok.zip into any folder
  3. Start an HTTP tunnel in any port you want. Let's do it on 80
$ ./ngrok http 80 # this command should be run from where ngrok was unzipped
Enter fullscreen mode Exit fullscreen mode
...........
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://82330e5b.ngrok.io -> localhost:80
Forwarding                    https://82330e5b.ngrok.io -> localhost:80
...........

Enter fullscreen mode Exit fullscreen mode

That's it. We just need to run our web server in port 80 and starting to receive traffic.

If you want to test it out. You may send a request using curl to our public ngrok domain, http://82330e5b.ngrok.io or just open it in a browser. Additionally, ngrok allows https connections, this is a great feature when we are testing external services needing a secure connection.

Note: remember you need to have your local server running on port 80 (for this example).

$ curl -v http://82330e5b.ngrok.io
Enter fullscreen mode Exit fullscreen mode

You can check all requests details using built-in dashboard for ngrok at http://localhost:4040

Dashboard

That's all. For some people, it could look like a trivial task, but for beginners, this is a starting point.

If you like it, spread the word.

Disclosure: This is for testing purpose, if you are handling sensitive data, avoid using this method because all your traffic is going to pass through a third service.

Discussion (15)

pic
Editor guide
Collapse
gansai9 profile image
GSP

We also have alternatives like: localtunnel (localtunnel.github.io/www/)

Collapse
karmablackshaw profile image
KarmaBlackshaw

This always returns a prompt when I connect to the API :(

Collapse
levivm profile image
Levi Velázquez Author

Oh nice , thx, it looks pretty cool

Collapse
nikoheikkila profile image
Niko Heikkilä

I've been using ngrok for some time now, and your post made me realize it features a built-in dashboard! Up until now I've fiddled with dockerized RequestBin for capturing webhook data. Thanks for the tip!

Collapse
damengrandom profile image
Dameng

Thanks for sharing (^_^) and it works great for react app

Collapse
levivm profile image
Collapse
anurbol profile image
Collapse
levivm profile image
Levi Velázquez Author

ur welcome :) hope you use it.

Collapse
rrsr profile image
RAJ RAJESHWAR SINGH RATHORE • Edited

I have used it in past and it works like a charm. Just a mention 😀

Collapse
eldersam profile image
Elder Samuel

Very Good! I've been looking for a tool like this for a long time. In the free version you can make up to 40 connections / requests per minute, which is enough for you to test your application.

Collapse
dotnetcrunchh profile image
DotNetCrunch

localhost.run is also a good alternative just if you want to expose your localhost over the internet.

Collapse
levivm profile image
Levi Velázquez Author

yep, absolutely.

Collapse
cerw profile image
Petr Cervenka

valet share -> ngrok

Collapse
levivm profile image
Levi Velázquez Author

I will take a look.