Webhooks are an inter-application notification mechanism. For example, GitHub can notify an application via an HTTP request after each commit on a repository. The notified application can thus operate immediately after the commit. Here is the GitHub screen to add a webhook:
The problem of webhooks is that the external service (here GitHub) can only request an URL accessible via the internet (public address). During development, the developer's computer rarely has a public address. In this configuration it is therefore difficult to test the integration with the external application. This is where ngrok comes in 😃
Ngrok creates a tunnel between the development workstation and the ngrok servers. Once the tunnel is created, we obtain a public URL of the type
sample.ngrok.com which ultimately points to our machine. We can use this URL to test the integration with an external service.
#How to use ngrok?
First you have to create a free account on their site. This provides the authentication token needed to use the application:
Then, you can save the token on your computer:
ngrok.exe authtoken <token>
Then, you can launch the tool specifying the protocol to use (HTTP in our case) and the port of the application on your machine:
ngrok.exe http 4242
If all goes well you should see something like this:
You can now open the inspection interface at
http://localhost:4040. This console displays all HTTP requests and also allows you to replay them as needed (convenient for the dev).
That's it, it remains only to use the public URL provided by ngrok (here
http://859ca31a.ngrok.io) to access the site.
For more advanced needs, there is a paid version of ngrok. It allows for example to reserve a subdomain, but for simple tests the free version is sufficient.
Ngrok allows you to expose your machine on the internet in 2 minutes. This is very useful for testing webhooks, but it also has other uses. For example, you can test a mobile application that uses web services hosted on your dev machine. With a little imagination you will probably find other use cases.
Do you have a question or a suggestion about this post? Contact me!