Get Notified Via Sms When An Action Occurs On A Github Repo

Github webhooks provide a way for users to get notified of events that occur in their repository. In this quick guide, we are going to build a simple application that sends an SMS when a new issue is created on your Github repository.
To continue with this guide, You are expected to:

• Have a basic knowledge of NodeJS/creating web servers,
• Have a Github Account,
• Have a Hookdeck Account,
• Have a Twilio Account

1. Create a web server
   The first step in setting up our demo application is to have a web server that will receive incoming webhook notifications. Add the following line of code to create a simple webserver. The webserver will parse the request body Github sends when a new issue is created & generate a simple message string that will be sent to your phone via SMS.
   

       const express = require("express");
       const app = express();
       const bodyParser = require("body-parser");
   
       app.use(bodyParser.json());
       app.post("/webhook", async (req, res) => {
         const ghPayload = req.body;
         const msgString = `Hey ${ghPayload.repository.owner.login}! A new issue has been ${ghPayload.action} within your repo ${ghPayload.repository.html_url}`;
         res.sendStatus(200);
       });
       app.listen(3000, () => console.log("App is running on port 3000!"));
   

2. Publish Server
   
   We are going to be using Ngrok to get the local server live on the web! Install Ngrok by running the following command npm install ngrok -g. Next, Go ahead and publish the webserver by running the following command ngrok http 3000. You would be given a URL, copy this URL & keep it safe as we would be using it in the next step.

3. Manage Webhook Connections with Hookdeck.
   
   Webhook connections could get messy real easy. Hookdeck is a webhook infrastructure that helps in managing webhook connections. In our case, Hookdeck will sit between Github and our local webserver ensuring we receive all our webhook notifications. To get started, head over to https://hookdeck.io and log in. Once on the Hookdeck dashboard, go ahead and create a new connection. Use the Ngrok URL gotten above with “/webhook” appended to it as the destination URL. After creating a new connection, Hookdeck provides you with a URL, copy & keep the Hookdeck URL safe.

4. Create A Github Webhook
   
   Head over to the Github repository you would like to keep track of and head over to the settings tab. In the settings tab, Select webhook >>> Add webhook. Fill the menu with the appropriate values. The value of the Payload URL will be the URL hookdeck provided us with in the above step. Next select ONLY the Issue event, this will ensure we get notifications when events related to issues occur with your repository.

5. Integrate Our WebServer with Twilio
   We would be using Twilio to send the message string we created up above to your mobile device. To get started, create an env file within your project directory and paste the following lines of code, replacing the values with your Twilio credentials gotten from the console.
   

      TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxx
      TWILIO_AUTH_TOKEN=xxxxxxxxx
   

   Run the following command to install dotenv, an NPM package for working with environment variables npm install dotenv ! Initialize the dotenv module by adding the following line of code to your project file.
   require("dotenv").config()
   With our environment variables loaded into the project, we are ready to start working with Twilio, After Installing the Twilio SDK for NodeJS, Initialize Twilio by adding the following lines of code.
   

   const accountSid = process.env.TWILIO_ACCOUNT_SID;
   const authToken = process.env.TWILIO_AUTH_TOKEN;
   const client = require("twilio")(accountSid, authToken);
   

Next, we have to invoke the create method available via the SDK and pass in the necessary parameters needed for sending an SMS. The function handler would look similar to this:

    app.post("/webhook", async (req, res) => {
      const ghPayload = req.body;
      const msgString = `Hey ${ghPayload.repository.owner.login}! A new issue has been ${ghPayload.action} within your repo ${ghPayload.repository.html_url}`;
      res.sendStatus(200);
      client.messages
        .create({
          body: msgString,
          from: "[phone]",
          to: "+234xxxxxxx",
        })
        .then((message) => console.log(message.sid));
    });

You can test this demo application by creating an issue in the Github repo, You should get an SMS message. If you visit your Hookdeck.io dashboard, You’ll be able to see the full payload sent from Github. At this point, You should have gained basic knowledge on how to use Github webhooks.