Tunneling using Ngrok - What, Why, and How to?
Tags: beginners, tunneling, ngrok, networking
Published: 2020-09-24 22:24:02

---
title: Tunneling using Ngrok - What, Why, and How to?
published: true
date: 2020-09-24 15:10:05 UTC
tags: beginner,Tunneling, Ngrok, networking 
canonical_url: https://blog.sabarish.tech/tunneling-using-ngrok-what-why-and-how-to
---

Hello everyone. Today we'll be looking at what `ngrok` is, why as a developer you would need it, and how to install, configure, and use `ngrok`.

Before diving into the content of this article, let me tell you a scenario that you would have faced. 

> Suppose you want to demo your developed application with your colleagues or your team-mates or to anyone you want to receive feedback from. If you were like me and didn't know about `ngrok` before,
- You would have asked the person to either swing by your desk or took your laptop to them to demo it.
- You might have pushed your changes to a Github repository, asked them to clone it in their local machine and view it.
- You would have deployed it and shared the link to access the deployment.


 *What if there is an alternative to this? This is where **Ngrok** comes into play.*

---

## What is Ngrok?

[Ngrok](https://ngrok.com/) is an application developed by [Alan Shreeve](https://github.com/inconshreveable), enables developers to expose their local development servers to the internet. It basically creates a tunnel to your local development server and generates two random subdomains on ngrok.com - one `http` and another with `https`. With these generated addresses, you can view the locally developed application from anywhere through the Internet provided that the development server is kept running. 

They provide various tunnel servers around the world and locations and even the `ngrok` server software can be self-hosted on a VPS or dedicated server. They provide a free and few paid plans with some additional features to each plan like - Custom domain, Google Apps SSO, Whitelabel Domains and much [more](https://www.ngrok.com/pricing).

## Why do you need `ngrok`?
Other than just demoing developed applications, `ngrok` can also be used for :-
- Running a personal service of your own on the cloud.
- Testing out mobile apps that have a local backend server.
- Building and testing out webhooks.

 We covered the **What** and the **Why**. Now let's move on to the **How**

## How to use `ngrok`?

Using `ngrok` is so simple. Before you start tunnelling your local servers using `ngrok`, 

1. Setup and installation
2. Configuring `ngrok`
3. Launching the tunnel

### 1. Setup and installation
 
To start using `ngrok`, we have to [signup](https://dashboard.ngrok.com/signup) an account on `ngrok`.
After you signup, it takes you to the dashboard. Your dashboard must look something like this.

![dashboard.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1600949637840/0PC5V20uh.png)

Download the correct package according to your operating system. The steps to install are mentioned there but I am going to put it down for you as well.

**For Windows** :-
 Download the zip and extract the executable file and run it.

To access `ngrok` from anywhere on your command prompt, 

1. Move executable file ngrok.exe to C:\Windows\system32\ngrok.exe
2. Add Environment Variables via UI (search for "Edit the environment variables for your account" in the search bar next to windows logo => double click on Path under Users Variables for yourusername => Click New => add your path C:\Windows\system32\ngrok.exe => click OK.
3. Restart your bash and you should be able to run "ngrok http 80" command.

**For Mac / Linux** :-
Run the below command on your terminal.
```
unzip /path/to/ngrok.zip
```
Either move the file to /usr/local/bin or add the path to `ngrok` to `.bashrc` or `.zshrc` according to the shell you're using.

### 2. Configuring `ngrok`

> Remove the `./` and run the following commands if you're doing this on Command Prompt on Windows.

The next step is to authenticate the client you have installed on your system with your `ngrok` account.

Run the following command on your terminal / prompt :-

```
./ngrok authtoken YOUR_AUTH_TOKEN
```
YOUR_AUTH_TOKEN is the token that is displayed on the dashboard. This saves the auth_token of your account to a .yml file in your local machine.

### 3. Launching the tunnel
This is the last step to launch your local development server to the internet via `ngrok` tunnel without deployment. 
Type in the below command :-

```
./ngrok http 80
```
Here `80` is the port number where your local server is running. You would have to change it to the `PORT NUMBER` of the local server you are running.  Make sure the development server for the application you want to tunnel is up and running.

For example,

```
./ngrok http 3000
```
or
```
./ngrok http 5000
```
By running this command, your terminal / prompt should look something like this.
![prompt.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1600949243434/-WM_0jASg.png)
This shows the randomly generated subdomains where your application is accessible. Additionally, you also get to use the local dashboard at port `4040`, where you can see all the requests being made through the generated subdomains.

![local dashboard.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1600949817015/RfUZAbbOP.png)

### That is it!! You have successfully launched a `ngrok` tunnel for your application

In the free plan, you can only have one session. You can close your session by giving `Ctrl + C` or killing the `ngrok` process.

I hope you got a clear idea on what `ngrok` is, why it is needed and how to tunnel your local application through `ngrok`.  Let me know if it helped you in the comments :)

---

### References: 

Still curious on how `ngrok` does it for you? Check out these resources.

- [ngrok site](https://www.ngrok.com/product)
- [A blog about ngrok on Pubnub](https://www.pubnub.com/learn/glossary/what-is-ngrok/)
- [Developer documentation on ngrok](https://github.com/inconshreveable/ngrok/blob/master/docs/DEVELOPMENT.md)
- [Twilio blog on setting up Ngrok on Windows](https://www.twilio.com/blog/2014/03/configure-windows-for-local-webhook-testing-using-ngrok.html)