How to Share Your Local Development Server using Ngrok

Photo by NASA on Unsplash

How to Share Your Local Development Server using Ngrok

·

2 min read

Mostly we use our localhost as a server when developing a web application. But on some occasions, we may want to share our local server so that it can be accessed globally. This can be done in some ways. In this article, we will use ngrok for our objective.

First, visit ngrok and register your account. Once your account is created, log in and go to the Setup & Installation page from your dashboard. There is clear guidance there you can follow to get running.

Download ngrok for your platform, e.g., Linux, Mac, Windows. Then unpack it to a custom location. For example, I use the following command in Linux.

cd ~/Downloads
tar zxvf ngrok-stable-linux-amd64.tgz

In the above comment, ngrok is unpacked in ~/Downloads directory. However, you can unpack it anywhere. You can also move it to a directory that is available in your registeredPATH. For me, I prefer to move it to /usr/local/bin (in Linux).

sudo mv ngrok /usr/local/bin

Now I can use ngrok command from anywhere. To get the help about ngrok command, you can use

ngrok help

or check the documentation.

Next, you have to add authentication information so that your localhost can connect to your account. As displayed on the Setup & Installation page, execute the following command.

ngrok authtoken <your token>

This will create ngrok configuration filengrok.yml in ~/.ngrok2/ directory.

Now we are ready to share our localhost (HTTP tunnel forwarding) using the following command.

ngrok http <port>

Make sure that your local server is running with the specified port. If the tunnel forwarding is successful, it will show you the http and https addresses for your server, more or less would be like the following.

Session Status                online
Account                       <yourusername> (Plan: Free)
Version                       2.3.40
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://xxx-999-999-999-999.ngrok.io -> http://localhost:3000
Forwarding                    https://xxx-999-999-999-999.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              13      0       0.11    0.04    5.01    6.96

You can share the address, and it can be accessed globally. In the above case, the address is

https://xxx-999-999-999-999.ngrok.io