DEV Community

Cover image for Testing integrations between third-party webhook and local applications using Ngrok
Renoir dos Reis
Renoir dos Reis

Posted on

Testing integrations between third-party webhook and local applications using Ngrok

Introduction

It may sound silly, but ever since I started developing web applications I've always found it a pain in the ass to inspect and debug integrations between my app and third-party webhooks - in addition to the hassle of replicating events, I've never relied on testing "hypothetical" scenarios - thinking that I even started an open source project that tried to solve this problem, whose name is called Hookathon that had the objective of inspecting and redirecting requests to local environments through a client / package installed in the project, finally replicating the requests stored in a bucket in the desired project, but we do not dedicate what is necessary to maintain the project in good health.

The tool

The good news that it's not necessary, there is a solution that solves all these problems in an efficient, free way, this is Ngrok, a product created by Alan Shreve -- which has worked on giants like Microsoft and Twilio. Alan wrote about the creation of Ngrok and an article on his blog he describes the product as:

"Ngrok is a tunneling, reverse proxy that establishes secure tunnels from a public endpoint to a locally running network service while capturing all traffic for inspection and replay. It is an open-source project on GitHub."

Let's get started:

Well, now that you know a little bit about the tool and why i found it let's demonstrate how to expose a local environment to allow third-party services to submit requests to local environments via Webhook is very simple and the two solutions that I'm going to present have been tested and work with the following scenarios :

  • Scenario 1: A PHP project using PHP 7.2.6 Development Server
  • Scenario 2: A Laravel (PHP) project using Laravel Development Server (php artisan serve)
  • Scenario 3: A Laravel (PHP) project using Laravel Homestead

To do this just follow the steps:

  1. Access the Ngrok website
  2. Register or Login
  3. Download the client based on your OS
  4. Authenticate the client downloaded following the instructions that appear on the same page you've downloaded it.

For the first two scenarios just run the following command

ngrok http <host>:<port>

ex: ngrok http 127.0.0.0.1:666

For the third scenario (if you are using a domain to access the homestead Ex: homestead.test you must rewrite the host-header. But don't worry, to achieve it just increment the command above to something like)

ngrok http <homestead_host_ip>:<port> -host-header=<homestead_domain>

example: ngrok http 192.168.10.10:80 -host-header=homestead.test

Voilà, now just point the URL generated by Ngrok in Webhook that you want to test and enjoy this wonderful solution.

Have any questions about Ngrok, how it works and what else is recommended? Check the "How it works" page of the official website. If you are even more NERD and like to read the documentation before you start using it, follow the link to the official documentation.

Credits

This article uses the following sources as a basis:

Top comments (3)

Collapse
 
ben profile image
Ben Halpern

Solid writeup

Collapse
 
renoirtech profile image
Renoir dos Reis

Thanks Ben! It's a pleasure to contribute to The Practical Dev, hope to write more soon!

Collapse
 
ben profile image
Ben Halpern

Awesome!