Exposing a local web service for development to the internet using ngrok

The need to have a local service available in the internet

In this post I take a look at ngrok a tool for exposing a http-based deployment to an address available in the internet. This comes in handy for example when developing webhooks or in general applications that subscribe to events e.g. a Slack app .
Using tools like ngrok lets you test your local changes during development faster than having them to deploy to some environment available in the internet.

Using ngrok to accept traffic on a public address

Ngrok works by registering your local deployment with the ngrok service which exposes it with an artificial address to the internet.

                                                                              +-----+
                                                                              |      +
+--------+                       +--------+                               +---+      ++
|        | http://127.0.0.1:3000 | ngrok  | http://4cdd6bdaee0f.ngrok.io  |           +-+ +
| local  +<----------------------+        +<----------------------------+-+               |
|        |                       | cloud  |                             |     internet    |
+--------+                       +--------+                             +-+               |
                                                                          |      +----+   +-+
                                                                          +------+    |     |
                                                                                      +-----+

Basic setup

In order to use ngrok the following steps:

• Create an account
• Download the ngrok executable
• Register your local machine using your authtoken ./ngrok authtoken <YOUR_TOKEN>. The token can be found in the Authentication menu of your account
• Expose a local port ngrok http 3000

After running the commands above the address from which your local deployment is accessible is displayed in the console. For example:

(Ctrl+C to quit)
                       
Session Status                online                                                                                          
Account                       tom1299 (Plan: Free)                                                                            
Version                       2.3.35                                                                                          
Region                        United States (us)                                                                              
Web Interface                 http://127.0.0.1:4040                                                                           
Forwarding                    http://4cdd6bdaee0f.ngrok.io -> http://localhost:3000                                           
Forwarding                    https://4cdd6bdaee0f.ngrok.io -> http://localhost:3000

There is one important thing in the output; The user is currently on a Free plan which means that the address https://4cdd6bdaee0f.ngrok.io changes everytime the ngrok process is restarted. This can be inconvenient since web hooks need to be updated with the new url. Usage of permanent urls is part of one of the paid plans.

Using the inspector

A nice addition is the inspector. Opening the address http://localhost:4040 opens a web interface that allows you to monitor incoming requests and responses.

Data privacy

As of this writing the operators of ngrok claim that no data that goes through their cloud service is stored :

ngrok does not log or store any data transmitted through your tunneled connections.

Though some metadata about connections is stored for debugging purposes.

Alternatives

One alternative I found for ngrok is localtunnel . The tool does not even require creating an account.
As with ngrok, everytime localtunnel is started a new url is used

Conclusion

Ngork offers a way to quickly test local deployments without directly exposing them to the internet. The only drawback is that a paid plan is needed for permanent addresses.

Back to Home