Introduction

Every programmer should know about Git and how to use it. It’s essential for developers to keep track changes on projects especially if you’re not working on it alone. There are many Git platforms out there, but one of the most used Git platform is Github.

As a team of developers, we want to know everything about our projects. We want to know who pushed changes, who created a new branch, and so on. For this we can use Github Webhook events so that Github can notify us when there are changes in our projects.

Great! so what’s the problem? The problem is, Github webhook events are global events and you cannot set things up to trigger only for specific branch, users, etc. So we cannot do things like, if push events happens on “dev” branch then send it to endpoint A, if happens to “staging” branch send it to endpoint B and so forth. You’ll need to make a custom service that had a logic to forward the requests based on something to other endpoints. This is very time consuming and not worth the effort to be honest. You’ll need to create a dedicated service for this and who knows in the future what other rules or changes you’ll need to create

So in this post, I’m going to show you how you can handle Github webhook forwarding to specific endpoints without needing to waste time creating new routing service yourself! If you follow along, you will notice that you will be able to do this with any webhook requests and destination endpoints based on your own needs.

What will we do?

So for the tutorial, I’ll try to forward Github events to different Discord channel bots based on branch name.

There are three main steps to do this:

1. Create Discord channel bots
2. Setup Treehook URL
3. Setup Github webhook events

Create Discord Channel Bots

Note: If you already know how to do this, you can skip this part.

We’ll first go to Discord and create a server and three channels for Dev, Staging, and Master branch

Next we’ll create our bots, one for each channel

Copy all the Discord webhook URLs and store it somewhere because we’ll need it later.https://discord.com/api/webhooks/1294498450444128267/XrcauaTY7QCuBRGH8eo1rm6TAGz5ll_AeMKOcF0L7C9XoQ4_2ncjU1E9vvSVcHfh_pIY

Note: The bot will disappear if you select the channel that the bot is not assigned to after clicking “Save Changes”. But it will appear again if you got to the integrations tab in the correct channel

After creating our bots for each channel, it’s done for Discord part. Next we’ll go to treehook.dev to create our webhook redirection rules.

Setup Treehook URL

To redirect our Github webhook URL to the correct bot, we’ll need to setup a universal webhook URL which we will create using Treehook.

So Treehook is essentially a webhook management platform which main feature allows users to transform and redirect webhook requests to the correct endpoint dynamically. It avoids the need for users change webhook/callback URL everytime stakeholders/QA/developers wanted to test in different environments at the same time, making a bottleneck in development cycle. It also avoids developers to waste time creating redirecting service like for this chat bot example for instance. You can also see the logs of your webhook request redirects and retry it if you need to

You’ll need to go to https://treehook.dev and signup if you don’t already have an account and login. It’s free to try it out. After logging in, you’ll need to create a new project and Treehook URL and activate it.

Then, we’ll need to set the rules and endpoints for our Treehook URL. We’ll set the rules for dev, staging, and master branch. The rules can be set to anything based on the webhook body or request. In this case we’ll use the ref body field for reference.

Next, we’ll need to transform the request so that it matches what discord bot can consume. For this example, we’ll use the minimum json to send message.

{
"content-type": "application/json"
}{
"content": "{{$header.x-github-event}} event triggered to branch {{$body.ref}} by {{$body.sender.login}}"
}

You can insert the texts dynamically using “{{$body.path.to.field}}” to replace insert from body content or “{{$header.path.to.header}}” to insert from header content.

We then need to copy our Treehook URL and paste it on our github webhook settings

Setup Github Webhook Events

Next step is to setup our Github webhook push event. We’ll need to change the content-type to “application/json” so it’s easier to handle

Now we’ll push some commits to the branches

That’s it! We’ve just handled our Github requests to different Discord bots based on branch name. You can customise this based on your needs, maybe by user name, events, and other available data sent by our webhook requests.

Conclusion

I hope this post helps you handle github events based on branch name since Github do not have this kind of setup built in. Creating your own service to route webhook requests and transforming it to another request will take a lot of time and effort. Treehook can help you avoid this kind of hassle.

Cheers!