DEV Community

Pandiyan Murugan
Pandiyan Murugan

Posted on • Originally published at

ng-rok – Demo your localhost

Originally posted in

ngrok - tunnel your localhost efficiently

Sometimes you might have to work on an application or API in your local box and wants to demo to your friend or colleague.

And you might be looking for some hosting service or you do a video call to your friend and show.

I feel those are the fancy or expensive solutions.

Most of the time your application will present behind the Firewalls or some other network restrictions.

Why ngrok?

In that case, what’s the best solution to access/share your local resource to an external or internet world.

A most feasible solution is Tunneling

In this blog, we are going to discuss the tool which provides a better tunneling option.


How I came across ngrok?

I was creating apps for Slack and Microsoft Teams. Most of the times I need to develop the API or WebServices from my end.

The UI will be the SDKs or Actual Slack App or Microsoft Teams App.

When the user does particular action in the legacy application, I need to capture that and debug and then prepare my data set based on that.

Its complete black box, right?

Yes - it is.

ngrok is recommended in Slack and Microsoft Bot Framework developer documentation.

ngrok can be used for any purpose other than just API or Web Service.

Tunnelling is the concept here.

Angular UI apps

Sometimes, I do develop some simple angular application and share with my friends for their quick suggestions.

During the development time, I don't have to set up a hosting environment or anything. I simply use ngrok tool and create dynamic tunnels and share it with friends.

The good thing is the URL is dynamic and I don't have to worry about the URL can be leaked to some other person. Once I stopped the tunnel, everything from my local box gets disconnected from the Internet world.

How to use ngrok?


Download ngrok based on your machine requirement and installation.

Unzip to install

On Linux or OSX you can unzip ngrok from a terminal with the following command. On Windows, just double click

unzip /path/to/

Most people like to keep ngrok in their primary user folder or set an alias for easy command-line access.

Connect your account

Running this command will add your authtoken to your ngrok.yml file. Connecting an account will list your open tunnels in the dashboard, give you longer tunnel timeouts, and more. Visit the dashboard to get your auth token.

./ngrok authtoken <YOUR_AUTH_TOKEN>

Start using!

Try it out by running it from the command line:

./ngrok help

To start a HTTP tunnel on port 80, run this next:

./ngrok http 80

Read the documentation to get more ideas on how to use ngrok.

You can check out the official documentation for more advanced commands like Rewriting the Host header, Password protecting your tunnel, Custom subdomain names, etc.

Quick demo

  • Started my angular application in my local box - it's running on the path localhost:4200

Alt Text

  • Opening ngrok and Checking whether it's accessible by running command ngrok help

Alt Text

  • Tunneling the localhost 4200 with the command (proper host header)

    ngrok http 4200 -host-header="localhost:4200"

Alt Text

Now my localhost application can be accessed using the above URLs.

  • Browsing tunneled application

Alt Text

  • The same will capture the last 10 API calls or HTTP transaction happened in the tunnel

Alt Text

  • ngrok also provides a detailed window to inspect all the HTTP introspection which can be accessed in the path


Alt Text


When you are working with any integration related Apps or Environment like Azure, Microsoft Bot Framework, Skype Apps, Slack Bots - this tool will be very handy at the development.

Bookmark this post - and give a try.


Top comments (2)

wobsoriano profile image

Also, if you have npm@5.2.0 or higher, you can run npx localtunnel --port 8000 to avoid installing ngrok

pandiyancool profile image
Pandiyan Murugan

thanks! let me try :)