Let’s talk about Webhooks (Part 2: The Practical)

Photo by Émile Perron on Unsplash

In this part, we are going to discuss a technique of utilizing a webhook (there are several). If you are not familiar with the webhooks then it is recommended that you go through this- Let’s talk about Webhooks (Part 1: Theory).

We are going to use-

1. Flask (a lightweight web framework written in Python),
2. Github Webhook- We will track every new push to the project.
3. ngrok- It allows us to expose our local webserver to the public internet by creating a secure tunnel.

Prerequisites-

1. Make sure that you are running at least Python 2.7 or any newer version.
2. Flask is installed on your environment. If it’s not, then install it via this command via CMD—

CMD Command for installing Flask.

3. The latest version of ngrok.

Creating a Flask application.

The first step involves the creation of a Flask application. For the sake of this tutorial, we are going to create a very basic application that informs us about the type of action that has been performed on our repository on Github.

Flask program to display the message from GitHub.

The first app.route(‘/’) from line 8–10 represents the basic message that a user will get when he will hit our endpoint.

The second app.route(‘/GitHub’) through lines 13–16 is a specific endpoint for GitHub only. It is a custom endpoint that we have created for GitHub specifically. It is made so that it just prints the message that we receive from GitHub.

Now if we run it then we will get a local URL which looks something like this-

Console output of our program.

We can see a URL appearing at the end. Running the URL on any browser will produce the following output-

Calling our flask application using the localhost link.

Please note that the flask application is running on port 5000 in our case.

Now with our flask application ready, we can move over to the next step of making our localhost visible to the world. Every endpoint URL we define in Flask will be valid in our local environment only. To make it available for the public we will use an application known as NGROK.

Creating a tunnel to your local application.

Once you have downloaded the ngrok application, navigate to its folder via CMD and type in the following command —

Ngrok Command to create a tunnel to the localhost.

This will create a tunnel to your PC on port 5000. If you are wondering why only 5000 then it is because our flask application is running on the same port number. Hence traffic from the external world should be redirected to this port only.

Typical NGROK interface.

For endpoint purposes, you can use any of the 2 ‘Forwarding’ links.

Also, it’s worth mentioning that if we place the same URL in the browser we get a similar result like before-

Calling our Flask Application using the ngrok link.

We are now ready for setting up our GitHub project.

Setting the GitHub Project with Webhook Endpoint.

For setting up any GitHub repository we need to navigate to the repository's settings and select the ‘WebHook’ option there. Click on ‘Add webhook’ to set up a new webhook.

Repository Settings.

Paste in the ngrok link followed by ‘\github’ so that our application would know from where the request is coming in.

Adding the endpoint URL.

Click on the ‘Add Webhook’ button at the bottom of the page and you are done with the setup.

To validate our code we can push something to this repository. We will get a response which we can further analyze and use as per our need.

Pushing source code on GitHub and getting a response via WebHook on Console.

So this is the end of simple WebHook implementation. Implement it, embed this in your current project and keep on learning.