How to test Webhooks on your localhost
Tags: webdev, wehbooks, tunneling, localhost
Published: 2022-05-19 12:22:56

There comes a time when you need to work with third party apps such as: `Stripe`, `Paypal`, `Hubspot`, and etc, that can send you webhook calls to your application. In order to receive those webhook calls you need to provide your application URL and set it up in their webhook section.

If you are developing your application on localhost then most probably your URL might look like this:

- http://127.0.0.1:80
- http://sample-app.test

with these URLs which only works on localhost and can not be exposed to the outside world and that's why these URLs can not be used for setting up webhooks. 

In order to receive webhook calls on your localhost you will need to create a tunnel in order to expose your application to the outside world and similarly receive request from outside as well.

In order to achieve that, there are multiple tools that can help you with that such as [ngrok](https://ngrok.com/) or [expose](https://expose.dev/) 

In this tutorial we will use [ngrok](https://ngrok.com/) to setup tunnel and will use `http://sample-app.test` as example localhost application.

Following are the steps:

## Install the ngrok Agent

For MacOS:

```
brew install ngrok/ngrok/ngrok
```

For Linux:

```
curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \
      sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && \
      echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | \
      sudo tee /etc/apt/sources.list.d/ngrok.list && \
      sudo apt update && sudo apt install ngrok
```

For Windows, use Chocolatey:

```
choco install ngrok
```

If you prefer to install the ngrok agent yourself, visit the [ngrok Download page](https://ngrok.com/download) for instructions and links.

After the installation you can confirm the installation via the following command:

```
ngrok
```
and you should see:

```
NAME:
   ngrok - tunnel local ports to public URLs and inspect traffic

DESCRIPTION:
    ngrok exposes local networked services behinds NATs and firewalls to the
    public internet over a secure tunnel. Share local websites, build/test
    webhook consumers and self-host personal services.
    Detailed help for each command is available with 'ngrok help <command>'.
    Open http://localhost:4040 for ngrok's web interface to inspect traffic.

EXAMPLES:
    ngrok http 80                    # secure public URL for port 80 web server
    ngrok http -subdomain=baz 8080   # port 8080 available at baz.ngrok.io
    ngrok http foo.dev:80            # tunnel to host:port instead of localhost
    ngrok http https://localhost     # expose a local https server
    ngrok tcp 22                     # tunnel arbitrary TCP traffic to port 22
    ngrok tls -hostname=foo.com 443  # TLS traffic for foo.com to port 443
    ngrok start foo bar baz          # start tunnels from the configuration file

VERSION:
   2.3.40

AUTHOR:
  inconshreveable - <alan@ngrok.com>

COMMANDS:
   authtoken	save authtoken to configuration file
   credits	prints author and licensing information
   http		start an HTTP tunnel
   start	start tunnels by name from the configuration file
   tcp		start a TCP tunnel
   tls		start a TLS tunnel
   update	update ngrok to the latest version
   version	print the version string
   help		Shows a list of commands or help for one command
```

## Start ngrok

Now you can create tunnel to your localhost `sample-app.test` via `ngrok`, use the following command:

```
ngrok http 127.0.0.1:80 -host-header=sample-app.test
```
and you should see the following:

```
ngrok                                                                                                                                                                                                

Session Status                online
Account                       inconshreveable (Plan: Free)
Version                       3.0.0
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://3795-124-182-24-15.ngrok.io -> http://127.0.0.1:80
Forwarding                    https://3795-124-182-24-15.ngrok.io -> http://127.0.0.1:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00
```

Now, you should be able to use either `http` (http://3795-124-182-24-15.ngrok.io) or `https` (https://3795-124-182-24-15.ngrok.io) version of the `ngrok` URL, which is now pointing to your localhost `sample-app.test`. This allows to you to share your localhost application with outside world or configure webhooks to receive their calls.

Use the follwoing URL: http://127.0.0.1:4040 to see the incoming calls to your application. This also provides you away to replay the request calls and see their information as well.

Happy coding!