← Blogs

How to use ngrok - webhook integration

What is Ngrok?

Ngrok allows you to expose your localhost via a secure tunnel to the internet. One of the features of Ngrok is testing the webhook payload in your local environment.

What is a webhook?

Webhook is sending real-time information(as JSON or XML) to a specified URL(External system) whenever some event happens. It's more prevalent these days with the latest platforms such as Shopify, Sanity.io & Mailchimp.

For security reasons, Webhook payloads are only exposed to SSL-certified URLs. This is where Ngrok comes into help.

How does it work?

1 - Install Ngrok in your local machine. For Mac run the below command in your terminal:

brew install ngrok/ngrok/ngrok

2 - I suggest signing up for Ngrok so that account-only features can be used.

ngrok authtoken <token>

3 - Start your Ngrok tunnel.

ngrok http 3000

4 - Copy the secure URL from the terminal and paste it into the webhook URL field from which the payload comes. In my case, I'm testing it with Shopify.

5 - Once the product from Shopify gets updated, it sends the payload to your specified Ngrok URL which tunnels the payload into your local environment.

6 - To inspect your payload, go to "http://127.0.0.1:4040/inspect/http" from your browser.

🎉 JSON payload can be mapped to your local database.