Forem: Oluwatobi

Tools I Use in my Webhook Development Workflow

Oluwatobi — Thu, 06 May 2021 16:44:26 +0000

Working with webhooks differs from working with the traditional, forward facing HTTP API’s. When working with webhooks, you are required to verify incoming webhooks and provide an HTTPS secure endpoint URL even during development. In this quick guide, I’ll break down some of the tools I use during various stages of working with webhooks for a better development workflow.

Local tunneling

Local tunnels proxy external requests to a port on your local machine, making the web service running locally on your machine accessible over the internet. Local tunnels are useful when working with webhooks, as most API providers require that a publicly accessible/HTTPS secure URL is provided when registering a webhook.

Hookdeck CLI The Hookdeck CLI can be used to forward webhooks to your local server. The Hookdeck CLI is completely free, and offers unlimited and permanent URL’s unlike other local tunneling solutions in the market. One of my favourite features of the Hookdeck CLI is the replay feature. Your webhook history is preserved across sessions and can be replayed/used for testing. Something else that’s convenient is receiving permanent URLs. To get started with using the Hookdeck CLI for receiving incoming webhooks on your local machine, check out this guide.
Ngrok.io Ngrok is a local tunneling service that exposes local servers behind NATs and firewalls to the public internet over secure tunnels. Ngrok has a lot of great features, such as authenticated access, reserved and custom domains. Personally, when working with Ngrok, I use a node wrapper around Ngrok published on NPM. If you have node installed on your computer, you might find the NPM package more convenient, depending on your needs. Learn how to set up .
Localtunnel.github.io Localtunnel is an open-source alternative to Ngrok that can be installed via NPM. With Localtunnel, you can clone the repository on GitHub and host your own local tunnel server.

Webhook debugging

Webhook debugging is an important step in the webhook development workflow. It entails detecting and removing bugs related to your webhooks. This can be done by inspecting HTTP requests. Webhook debugging tools can be used to examine webhook payloads to detect any configuration errors. A good debugging tool should be able to show you the full details of the webhook request, the request payload and headers.

Requestbin.com According to their website, Requestbin makes it easy to inspect webhook events in a human, friendly way or via REST API’s. This tool comes in handy whenever I need to inspect incoming requests, or view the payloads and headers.
Hookdeck.com Hookdeck is a SaaS offering that has features for debugging webhook payloads. I use Hookdeck to inspect webhook payloads as it provides a nice and clear interface for viewing webhook payloads. Using Hookdeck, you also get the ability to retry failed webhook events.
Hookbin.com Hookbin is a free alternative to Requestbin! Hookbin provides functionality for parsing, collecting & viewing HTTP requests. Hookbin provides SSL secured endpoints, private endpoints and supports multiple content types.

Webhook infrastructures

Webhook infrastructures are systems used for managing webhook connections and working with webhooks. Typically, webhook infrastructures should provide functionality for queuing, monitoring and retrying webhooks.

Hookdeck.com Hookdeck focuses on webhook reliability. It provides auto-scaling, throttled delivery, monitoring and webhook replay, making sure developers are never losing their webhooks. Hookdeck isn’t platform specific, so I added all my webhooks onto Hookdeck which makes it easy to manage them from one place.

In Conclusion

These are some of my favourite tools for working with webhooks.
What are your favourite tools for working with webhooks? Leave a comment below.

Doing More With Dev.to Webhooks

Oluwatobi — Tue, 04 May 2021 12:25:56 +0000

I love reading and publishing articles on Dev.to! Recently, I discovered the Dev.to API has webhook offerings. I built an integration to automatically notify colleagues within a Slack workspace whenever I make updates to an already published article. This integration saves time and ensures my colleagues and friends are up to date with all the articles I publish. In this short post, I will show you how to build a similar service, leveraging on Dev.to & Slack webhooks.

In this guide, we will be:

Building a web server to receive webhooks
Subscribing to Dev.to API to send us webhooks
Updating our web server to trigger a Slack notification when we receive Dev.to webhooks
Deploying our integration in production

Building A Web Server

The first step in building out this service is to spin up a web server. The web server we build will receive webhooks from Dev.to and post notifications to Slack. To start, create an index.js file to hold the code for our web server. Within the index.js file, add the following lines of code:

    const express = require("express");
    const app = express();
    const bodyParser = require("body-parser");

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));

    app.post("/webhooks", async (req, res) => {
      console.log(req.body)
      res.status(200).send("ok")
    });

    app.listen(3000, () => console.log(`App is running on port 3000`));

The above snippet is code for a basic NodeJS server that runs on port 3000. As we move along in this guide, we will build on the server to cater for more functionalities required by the service we are building out.

Next, we run our server using a local tunneling solution so that we can have an HTTPS secured URL even while in development mode. There are various local tunneling tools such as Ngrok & the Hookdeck CLI which could be used to proxy external requests to our server. In this guide, we will be using the Hookdeck CLI as the local tunnelling solution. To learn more about how the Hookdeck CLI can improve your development webflow, check out this guide I wrote

To tunnel the above server using the Hookdeck CLI:

Install Hookdeck CLI on your local machine
Run the hookdeck listen 3000 command in your terminal to make Hookdeck CLI listen for incoming connections
Choose the “Create a New Source” option to create a new connection source
Respond to the terminal prompt with a desired source label and specify “/webhooks” as the path webhooks should be forwarded to

After following these steps, The Hookdeck CLI will provide you with a webhook URL printed in the terminal. Keep this URL handy because we will be using it in the next step when we set up Dev.to webhooks.

Setting Up Dev.to Webhooks

In this section, we will configure Dev.to webhooks to send notifications to the webhook URL from above whenever the article_updated event is triggered. To register a Dev.to webhook, we will need to make an authenticated POST request to the /webhooks endpoint of the Dev.to API.

To get your Dev.to API key:

Head over to your Dev.to Account & Navigate to settings
In the "DEV API Keys" section create a new key by adding a description and clicking on "Generate API Key”

Right after generating the API key, copy it and keep it safe. It will be used when making the HTTP request to Dev.to.

The payload of the request to Dev.to will contain the target URL that will receive webhook notifications. The other field to be included in the payload is the event array which will contain the list of events that should trigger the webhook. You can use any tool of your choice, like Postman or CURL to make a POST request to the API.

{
  "webhook_endpoint": {
    "target_url": "Hookdeck-cli-provided-URL",
    "source": "DEV",
    "events": [
      "article_updated"
    ]
  }
}

A sample JSON payload for the creation of a new Dev.to webhook will look similar to the above snippet.

After making a POST request to the Dev.to API for the creation of a webhook, whenever the article_update event is triggered, the web server we created up above will receive notifications, as seen below:

Sending Notifications To Slack

In the previous section, we configured Dev.to webhooks to send notifications to our server whenever an article is updated. In this section, we would add more logic to our server such that it sends a message to a specified workspace whenever a Dev.to webhook notification is received.
Before moving further, we need to set up Slack incoming webhooks. After setting up Slack incoming webhooks, we will receive a URL which we will make POST requests to, whenever we need to send a message to a Slack workspace.

We will set up Slack incoming webhooks in the following steps:

Create a new Slack app in the workspace you would like to send messages on
Select the incoming webhooks menu from your newly created app homepage & toggle it on
Scroll down the incoming webhooks page and click on the “Add New Webhook to Workspace” button
Pick a channel with the workspace that will receive the updates, then click “Authorize”
Copy the incoming URL

With Slack set up, we can then go and update the /webhooks route from up above, such that the logic for making a POST request to the Slack incoming URL is included. Head to the NodeJS project directory and run the command npm i request to install “request,” the NPM package that will help us in making HTTP requests. Next, update your index.js file by adding the following lines of code:

    const express = require("express");
    const app = express();
    const request = require("request");


    app.post("/webhooks", async (req, res) => {
      res.status(200).send("ok")
    //MAKE POST REQUEST TO SLACK
      const options = {
            method: "POST",
            url:
              "https://hooks.slack.com/services/T01XXXXXX/B01XXXXXX/XXXXXX",
            headers: {
              "Content-type": "application/json",
            },
            body: JSON.stringify({
              text: `Hey! Toby Just made an update to an article published on dev.to! You should check it out`,
            }),
      };

      request(options, function (error, response) {
        if (error) throw new Error(error);
        console.log(response);
      });
    });
    app.listen(3000, () => console.log(`App is running on port 3000`));

As seen in the snippet above, we make a POST request to the Slack incoming URL in order to send a message to a workspace right when an article is updated. At this point, when an article-update event is triggered, you should receive a notification like this on Slack:

Getting Ready For Production
Great! Now that we have the integration running in development, it’s time to deploy it to production. First, we need to deploy our web server to a proper hosting service like Heroku. We will deploy the server to Heroku in the following steps:

Log in to the Heroku dashboard
Create a new Heroku application
Initialize a git repository for your project if it doesn't exist
Push the changes to the Heroku server by running the git push heroku master
Copy and save the URL address provided by Heroku

To learn more about deploying to Heroku, check this guide.

After deploying the service to Heroku, we will be deploying the service on Hookdeck to monitor the webhooks and manage error handling. We will set up our service to use Hookdeck in the following steps:

Head over to the Hookdeck dashboard and create a new connection
Add the URL of the server from up above as the destination URL of the connection

To learn more about setting up Hookdeck, check out the comprehensive guide we wrote on setting up Hookdeck.

After setting up Hookdeck, we need to replace the Dev.to request URL with that of our new Hookdeck connection to ensure that Dev.to webhook notifications are sent to Hookdeck. We will update the Dev.to webhooks in the following steps:

Copy the URL of your Hookdeck connection
Make a POST request to the Dev.to webhook endpoint, include the Hookdeck connection URL in the payload as seen below:

    {
      "webhook_endpoint": {
        "target_url": "https://events.hookdeck.com/e/src_FyjvCbbZ4GOBxxxxxxxx",
        "source": "DEV",
        "events": [
          "article_updated"
        ]
      }
    }

You are set up in production to safely receive webhooks from Dev.to! We will trigger the test to ensure everything works just fine, even in production.

Conclusion

Congratulations, you can now keep colleagues and friends in your workspace up to date with access to the latest articles you have written using Dev.to webhooks!
Interested to learn more? Follow Hookdeck where I'll be sharing tutorials and guide about webhooks!
Try Hookdeck For Free. Receive, monitor and manage all your webhooks from a single place. We handle the complexity so you can focus on building your product.

Local Webhook Development Using Hookdeck CLI

Oluwatobi — Thu, 29 Apr 2021 22:47:01 +0000

For many developers, working with webhooks can be stressful. Typically, developers need to set up a local tunneling solution for proxying external requests to their local server, and also set up a tool for inspecting webhook payloads. The lack of proper tooling for working with webhooks in a development environment inspired us to build the Hookdeck CLI.

The Hookdeck CLI is a command line interface which provides functionality for proxying external requests to a port on your local machine and inspecting webhook payloads. Although it uses a different approach and philosophy, the Hookdeck CLI is a replacement for Ngrok and alternative HTTPS tunnel solutions. Using the Hookdeck CLI requires minimal setup, allowing developers to focus on more important parts of their webhook development workflows.

In this guide, we’ll learn how to use Hookdeck CLI to develop and test webhook integrations locally. We’ll also take a step by step approach and integrate with Dev.to webhook offering as an example.

After reading this, you will learn how to:

Set up Hookdeck CLI
Receive events on Localhost
Inspect payloads on Hookdeck Dashboard

Setting Up The Local Server

To illustrate how the Hookdeck CLI simplifies local webhook development, we will integrate with Dev.to webhooks. The integration will consist of a simple server that receives webhook notifications when a specified event is triggered and prints out the notification to the console. To get started, initialize a NodeJs project and add the following lines of code in the newly created index.js file:

    const express = require("express");
    const app = express();

    app.post("/webhook", async (req, res) => {
      console.log(req.body)
      res.status(200).send("ok")
    });

    app.listen(3000, () => console.log(`App is running on port 3000`));

The simple server we just created will receive notifications from Dev.to and print the notifications to the console once we have registered Dev.to webhooks.

When registering our Dev.to webhook, we are required to provide a target URL which will receive webhook notifications. Since we are in a development mode, we will use the Hookdeck CLI to proxy external requests to our server and generate a target URL.

Working With The Hookdeck CLI

Installation
Before we can get to exploring the various rich features of the Hookdeck CLI, we need to install it onto our local computers. The method of installation will differ slightly based on the operating system your machine runs on. Various installation methods include:

MacOS Installation
- The Hookdeck CLI can be installed on MacOS using Homebrew. Homebrew is a package manager for MacOS. Run the following command to install the Hookdeck CLI on your Mac: $ brew install hookdeck/hookdeck/hookdeck
Windows Installation
- On a Windows machine, the Hookdeck CLI can be installed via the scoop package manager by running the following command: $ scoop bucket add hookdeck https://github.com/hookdeck/scoop-hookdeck-cli.git $ scoop install hookdeck
Linux Installation
- Installing the Hookdeck CLI on a Linux machine requires a few more steps than other operating systems. To Install Hookdeck CLI on the Linux distro of choice:
  1. Download the latest Linux tar.gz file from https://github.com/hookdeck/hookdeck-cli/releases/latest
  2. Unzip the file: tar -xvf hookdeck_X.X.X_linux_x86_64.tar.gz
  3. Navigate to the unzipped directory
  4. Run the executable: ./hookdeck

After following the steps relevant to your operating system, the Hookdeck CLI should be installed on your local machine. To test that the CLI was installed correctly, you can run the following command:

$ hookdeck version

If you have correctly installed the Hookdeck CLI, you should see the version of Hookdeck CLI you installed printed out. At the time of writing this, the latest Hookdeck version is 0.2.

Start a session
With the Hookdeck CLI installed, we need to configure it to listen for new connections and incoming requests so that our local server will be able to receive webhook notifications. Before you are able to listen for incoming requests, you need to log in to your Hookdeck account. To log in, run the $ hookdeck login command. You will be prompted to press the “Enter” key, and will then be directed to your browser where you will be authenticated and authorized to interact with the other features of the Hookdeck CLI. You can also run the $ hookdeck login command with the -i flag if you would like to manually provide an API key to authenticate.

To start a forwarding session, run the following command: hookdeck listen 3000. Notice how we use the exact port our local server runs on as an argument when running the Hookdeck “listen” command. After running this command, you will be prompted to choose an existing source or create a new source. Choose the “Create New Source” option and fill in the prompt with your source label, Devto webhooks.

The next question in the CLI prompt requires that we specify the path on our local server where webhooks should be forwarded to, which based on the server created above is the /webhook route. Fill the prompt asking for the connection label with a friendly alias for your soon to be created connection. Keep the URL provided by Hookdeck handy, as we will use it when registering our Dev.to webhook.

Awesome! We now have the Hookdeck CLI set up and listening for incoming requests.

In an event where you get stuck down the line run any of the following commands to access the Hookdeck CLI help menu:

$ hookdeck --help
$ hookdeck -h

Registering Dev.to webhooks
Now that we have successfully set up the Hookdeck CLI to listen and forward requests to our local server, we can go ahead and register the Dev.to webhook. To register Dev.to webhooks, we need to make a POST HTTP request to the /webhook route of the Dev.to API. The payload of the request to Dev.to will contain a target URL field, whose value will be the URL of our Hookdeck connection. A sample payload for the POST request to the Dev.to webhook should look similar to the JSON object below:

    {
      "webhook_endpoint": {
        "target_url": "https://events.hookdeck.com/e/src_5UbKi..."
        "source": "DEV",
        "events": [
          "article_updated"
        ]
      }
    }

After making the POST request to the Dev.to API, an output like this can be seen printed to your terminal whenever the article_update event is triggered:

Inspecting payloads
Aside from proxying external requests to a port on our local machine, The Hookdeck CLI is very useful for inspecting webhook payloads. We will be inspecting payloads received from Dev.to webhooks in the steps below:

Copy the inspect URL Hookdeck provides, after starting a “listen” session.
Visit the URL in the browser to view and inspect the webhook payload. The output of the payload on the Hookdeck dashboard should look similar to the image below, which makes visible the body of the webhook notification sent by Dev.to as well as the headers.

In Conclusion

We have learned how to set up Hookdeck CLI, proxy external requests to our local server, and inspect payloads. The Hookdeck CLI helps makes the entire process of working with webhooks locally seamless.
Interested to learn more? Follow Hookdeck where I'll be sharing tutorials and guide about webhooks!
Try Hookdeck For Free. Receive, monitor and manage all your webhooks from a single place. We handle the complexity so you can focus on building your product.

Glossary

Source — A Source represents an API sending you a webhook, such as Shopify, Stripe, Github, etc. Each source is assigned a unique Webhook URL that can be provided to the sender.
A Destination represents an endpoint on your own server. Hookdeck will be forwarding all webhooks received to that URL with an HTTP POST request containing the original data from the sender along with additional Hookdeck metadata.

Automating CI/CD with webhooks: Vercel Deploys Via SMS

Oluwatobi — Sat, 17 Apr 2021 01:41:44 +0000

In an earlier article on this blog, I taught you how to leverage the power of webhooks to automate Netlify deploys. In this tutorial, you can follow along as we tackle Vercel,a deployment and collaboration platform for frontend developers that is similar to Netlify. I will show you how to build a service that triggers Vercel deploys via SMS so that once an SMS with a specific keyword is received, the Vercel build is triggered. In order to do this, we will be connecting Twilio webhooks with Vercel’s webhook equivalent, deploy hooks.

After reading this post, you will learn how to :

Configure Vercel deploy Hooks
Configure Twilio webhooks

We have written a couple of articles on the basics of working with Twilio webhooks - I suggest you check them out before continuing with this post.

Configuring Vercel’s Deploy Hooks

To start building this service, we need to configure Vercel’s deploy hooks. Once this is done, you will be provided with a URL that triggers Vercel builds when it receives an HTTP request.
First, head over to your Vercel dashboard and select the project that you would like to set up automatic deploys for. Navigate to the Settings page of your project, and select the “Git” menu item. Scroll to the “Deploy Hooks” section, write a suitable name for your deploy hook in the menu, and select a branch to be deployed from the dropdown menu. After filling the form, click the “Create Hook” button. If everything goes well, you should receive a URL, which is your deploy hook trigger. It is important to note that Vercel deploy hooks are only available for projects connected to a Git repository.

Creating A Server

In this section, you will learn how to set up a server that makes an HTTP request to the trigger URL, once it has received a webhook notification from Twilio’s webhooks. Start by initializing a new NodeJS project, and add the following lines of code to the root file of your project:

    const express = require("express");
    const app = express();
    const request = require("request");
    const bodyParser = require("body-parser");

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));

    const TriggerDeploy = () => {
        const options = {
          method: "POST",
          url:
           "https://api.vercel.com/v1/integrations/deploy/xxxxxxx",
          headers: {
           "Content-type": "application/json",
          }
        }
        request(options, function (error, response) {
          if (error) throw new Error(error);
          console.log(response.statusCode);
        });
    }

    const hasWord = (str, word) => str.split(/\s+/).includes(word);

    app.post("/", async (req, res) => {
      res.status(200).send()
      const body = req.body.Body
      const shouldTrigger = hasWord(body, "deploy")
      if (shouldTrigger){
        TriggerDeploy()
      }
    });

    app.listen(3000, () => console.log(`App is running on port 3000`));

As seen in the code snippet above, if you receive a request that contains the word “deploy,” you should configure your Web Server to make an HTTP request to Vercel’s trigger URL. Make sure to update the URL field in the TriggerDeploy function above with the URL you received after creating the deploy hook over at Vercel. With this server in place, you can use a local tunneling tool like Ngrok in a development environment to get a URL. The URL for this server is required to configure Twilio webhooks in the next section.

Configuring Twilio Webhooks

It is now time for us to walk through the set-up of Twilio webhooks. To get started, head to the phone number tab on the Twilio console, scroll to the messaging section, and change the value of the “Configure With” field to “Webhooks”. Next, input the URL of the server from above into the “A Message Comes In” field. After filling the form, save the settings!

At this point, you are good to go. Incoming messages to your Twilio phone number will now automatically trigger Vercel deploy builds.

Getting Ready For Production

Before you can deploy your service to production, there are still some loose ends that need tying up. Now, you need to deploy your web server to a proper hosting service like H eroku. After this, you must also set up Hookdeck. Hookdeck controls ingestion and errors in webhook connections, ensuring that you will not miss out on any webhook notifications sent to Vercel. To get started setting it up, check out our guide. Once this is done, you just need to update the webhook URL field over at Twilio with the new URL Hookdeck has provided, and your service is complete!

In Conclusion

In this tutorial, we have learned how to automate deploys to Vercel using the power of Webhooks. It’s not as hard as you think - especially when using Hookdeck!

Interested to learn more? Follow Hookdeck where I'll be sharing tutorials and guide about webhooks!
Try Hookdeck For Free. Receive, monitor and manage all your webhooks from a single place. We handle the complexity so you can focus on building your product.

Automating CI/CD with Webhooks: Netlify Deploys Using A Slack Bot

Oluwatobi — Fri, 16 Apr 2021 05:51:55 +0000

I believe that everything that can be automated should be automated. That is why I decided to harness the power of webhooks and build a Slack bot, instead of going to my Netlify dashboard to trigger a deploy when I make a change to the code for my website. The Slack bot automates the triggering of new Netlify builds, which saves time and reduces the friction that comes with manually triggering Netlify deploys. In this post, I will help you along as you learn how to build out this service and automate your deploys.

After reading this post, you will learn how to :

Build a Slack bot & configure Slack webhooks
Configure Netlify Build Hooks

Building The Slack Bot
The Slack bot is crucial to this service. Once a user on our workspace mentions the bot, the goal is for it to trigger a Netlify deploy. To get started creating this feature, head over to the Slack API dashboard and create a new Slack app by clicking the “Create A Custom App” button at the top of the page. Next, write the name of the app in the Popup menu, select the workspace the bot will be associated with, and save. After creating the Slack app, it’s time to hook into Slack webhooks to receive notifications when your bot gets mentioned in a Slack channel!

Before you can subscribe to a specific event, you need to provide Slack with a URL. This link is where Slack will send notifications when the event subscribed to is triggered. Slack also requires confirmation that you have control over the URL, and asks you to echo the challenge request parameter they send.

Below is an implementation of the logic of the web server that Slack will send webhook notifications to, written in NodeJS.

    const express = require("express");
    const bodyParser = require("body-parser");
    const app = express();

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));

    app.post("/", async (req, res) => {
        const challenge = req.body.challenge
        res.send(challenge).status(200)
    });

    app.listen(3000, () => console.log(`App is running on port 3000`));

This server can then be deployed using a local tunneling tool like Ngrok or Hookdeck CLI. After deploying the above server, you can continue to set up the Slack bot. In the home page of the Slack app we created above, navigate to the event subscriptions page and toggle the “Enable Events” button. Input the URL of the server created above as the value for the request URL field. Select the app_mention from the dropdown menu under the "Subscribe to Bot Events” tab.

The last step in setting up Slack is installing the Slack bot we just configured to our Slack workspace. Click the “Install App” menu on the left hand side of the dashboard, and go ahead and authorize the bot to access your workspace.

Configuring Netlify

In the previous section, we set up the Slack bot to send notifications to our URL any time it is mentioned in the workspace. In this section, you will learn how to set up Netlify’s webhook offering, called “build hooks*.”* In the Netlify dashboard, navigate to **Site settings > Build & deploy > Continuous deployment > Build hooks. Select “Add Build Hook,” a suitable name for the hook, as well as the Github branch that should be triggered by the hook. After creating the build hook, you will be provided with a URL that will trigger the build once it receives a request.

Putting It All Together

Our app is coming together nicely. In a couple more steps, you will be done configuring this service. It must be configured so that immediately after a webhook notification is received from Slack, a request is made to Netlify and the build is triggered. To do that, you will need to modify the code for the server we created above.


    const TriggerDeploy = () => {
        const options = {
          method: "POST",
          url:
           "https://api.netlify.com/build_hooks/xxxxxxxxxxxx3b15ad",
          headers: {
           "Content-type": "application/json",
          }
        }
        request(options, function (error, response) {
          if (error) throw new Error(error);
          console.log(response.statusCode);
        });
    }

    const hasWord = (str, word) => str.split(/\s+/).includes(word);

    app.post("/", async (req, res) => {
        const body = req.body.event.text
        res.status(200)
        const shouldTrigger = hasWord(body, "deploy")

        if (shouldTrigger){
           TriggerDeploy()
        }
    });

The snippet above contains three parts:

The TriggerDeploy function — this function simply makes a post request to the Netlify build hook URL.
The hasWord function, which checks whether a word is contained in a sentence and returns a Boolean value.
The request handler. Within the request handler function, we extract the notification text sent by Slack from the request body, invoke the hasWord function, and conditionally invoke the TriggerDeploy function (if the word “Deploy” is present in the notification sent by Slack).

At this point, you can go ahead and try this service out. Mention the Slack bot in your workspace, and say deploy! You will notice that a new build on your Netlify dashboard will be triggered, as seen below.

Getting Ready For Production

Before you deploy to production, it is important to tidy up your service. You will need to deploy y our web server to a proper hosting service like H eroku. After this, set up Hookdeck to handle the ingestion and error handling of the webhook connections. This ensures that you will not miss any webhook notifications. (To learn how to set up a webhook connection in Hookdeck, check out this guide we wrote). Finally, update the request URL field with the new URL Hookdeck has provided.

In Conclusion

In this tutorial, we have learned how to harness the power of webhooks to automate what could otherwise be a very boring task: manually triggering Netlify deploys. We also learned about Slack bots and webhooks, and gained some confidence in our skills along the way. Thanks for joining me!

Creating a webhook connection on hookdeck

Oluwatobi — Sat, 10 Apr 2021 00:55:33 +0000

Creating A Webhook Connection On Hookdeck

Hookdeck offers a complete webhook infrastructure to help tech teams instantly and reliably process, manage and troubleshoot their incoming webhooks. Practically that means it's an infrastructure that scales seamlessly and does all the heavy lifting – error handling, retries, alerting, logging, and queuing.

I use Hookdeck to manage my webhook connections with various third-party services.
In this quick guide, I will show you how to set up a webhook connection using Hookdeck via the dashboard.

Getting Started

In this section, I'll show you step by step how to create a webhook connection using Hookdeck.
The first step in creating a webhook connection using Hookdeck is to sign in to your Hookdeck account. Once signed in, navigate to the Hookdeck dashboard and select the connections tab.
To create a new webhook connection, click the create button at the top of the connections page.

Next, fill the three required fields on the pop-up menu — Source, Destination & Ruleset. Hookdeck gives you the option to either select previous values or to create entirely new ones.

After creating a webhook connection, Hookdeck provides you a unique URL. You should copy and use it as the URL endpoint when registering a webhook with your API provider. Once set up, the API provider will send their webhooks to this destination.

Conclusion

In this tutorial, we have learned how to set up a webhook connection on Hookdeck. With our current setup, we can deploy webhook integrations in production without having to worry about reliability. Hookdeck gives us full visibility and control over our webhooks.

I'll be writing about various integrations using webhooks. Follow Hookdeck to stay up to date.
Try Hookdeck For Free. Receive, monitor and manage all your webhooks from a single place. We handle the complexity so you can focus on building your product.

Setting Up Ngrok For Local Webhook Testing

Oluwatobi — Wed, 07 Apr 2021 14:45:49 +0000

Ngrok is a tunneling tool used to expose applications running locally to the public over the internet. Ngrok sits between the public and your local application by proxying external requests to the port your application is running on. Ngrok comes in quite handy when you need a publicly accessible URL.

If you have been following the guides from this blog, you might have noticed that most webhook providers expect you to provide an HTTPS secured URL while registering a webhook. While this practice among webhook providers is put in place to ensure security, it becomes difficult to work with webhooks in a development environment — Where your local server is yet to have an HTTPS secured URL. Ngrok makes it possible to get a publicly available HTTPS URL that maps to your local server.

In this guide, we will learn how to set up Ngrok to receive publicly accessible URLs for applications running locally.

Installing Ngrok On Your Computer

To be able to use Ngrok on your computer, you first have to install it on your machine!

To install Ngrok:

Head over to the official website and download the release suitable for your local machine.
Once downloaded, unzip the file and follow the prompts to install Ngrok to your machine. If you get stuck while installing Ngrok, the official download page has some pretty clear documentation that I definitely recommend you check out.

Asides from manually downloading Ngrok from the official site, you can install Ngrok on your computer using NPM if you have NPM configured.

To install Ngrok using NPM:

Run the following command npm i ngrok
After running this command, NPM will download the Ngrok binary from the official Ngrok hosting.

To learn more about the NPM method of installing Ngrok, head over to the official NPM page.

Starting Ngrok Up

Once Ngrok has been installed on the computer, you can go ahead and run your tunnel. Running Ngrok is quite easy: the command to run Ngrok follows this pattern

— ngrok http <port-number>

Ngrok will start in your terminal, displaying a box that contains your forwarding field. Ngrok will tunnel any external traffic to your application running on of your machine. The forwarding field's value displayed in the terminal is the most important piece in this puzzle. The forwarding URL receives incoming traffic and maps it to your local application. You can now use the HTTPS secure URL for working with webhooks in a development environment!

Conclusion

So far, we have learned about Ngrok & how to set it up. While everything is set up to work perfectly for development, we recommend talking to the necessary authorities before starting Ngrok over a public network. It could expose the network to vulnerabilities.

Automating Email Follow Ups Using Mailgun Webhooks

Oluwatobi — Tue, 06 Apr 2021 19:48:26 +0000

Mailgun is an email API service for developers. Mailgun makes it possible for users to send emails and manage email subscriptions using their API.

In this guide, we will build a service to help our imaginary friend Joe who manages a newsletter called WorldEats via Mailgun. Recently, Joe noticed a sudden spike in the number of people who were unsubscribing from his newsletter. Let's help Joe understand the reasons behind his newsletters unsubscription by building a service that sends a follow-up email to a user right after they unsubscribe from WorldEats.

The service we're building will hook into Mailgun's webhooks offering to get notified when a user unsubscribes from the newsletter and responds by sending a follow-up email.

After this post, you should have a better understanding of:

Configuring Mailgun webhooks
Sending emails programmatically using Mailgun

Creating A Simple Web Server

The first step to build the service is to create a web server. This web server will receive webhook notifications when a user unsubscribes from the WorldEat's newsletter. We want to set up the server to sends a 200 OK response to the webhook provider as soon as it receives a notification. On top of that, we also have to add additional logic to parse the webhook notification and send an inquiry email when a user unsubscribes.
We are using NodeJS and ExpressJS to build our server. Let's initialize a new NodeJS project and add the following lines of code to create the server.

    const express = require("express");
    const bodyParser = require("body-parser");
    const app = express();

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));

    app.post("/webhook", async (req, res) => {
     const Payload = req.body;
     res.sendStatus(200);
     console.log(Payload);
    });

    app.listen(3000, () => console.log("App is running on port 3000!"));

We've set up our local server. For us to complete the setup for Mailgun webhooks, we need an SSL secure public URL. You can use a tool like Ngrok to publish your local server to the web(Here is an excellent guide that shows how to setup Ngrok).

Configuring Mailgun Webhooks

Now that we have our web server ready to receive webhook notifications, let's configure Mailguns webhook to accept events as they occur. To set up Mailgun webhooks:

Head over to the dashboard and click the webhook navigation on the sidebar.
On the webhook page, you can see previously created webhooks or create new webhooks. In our case, to build out the service, we need to create a new webhook.
Click the add webhook button at the top of the webhook page to create a new webhook. For the event type, select unsubscribe from the dropdown list and fill the URL field with the URL of the server created above.

At this point, we finished configuring the webhooks! When someone unsubscribes from WorldEats' newsletter, we are going to receive a notification that will be logged in the console.

Sending Emails When an Event Is Triggered

Rather than logging the webhook payload to the console, we want to parse the incoming data, extract the user's email and send an inquiry email to the user.

To get started, install the official Mailgun client library for NodeJS by running the following command npm install mailgun-js. Next, create a separate file within your project directory and add the following lines of code.

    const formData = require("form-data");
    const Mailgun = require("mailgun.js");
    const mailgun = new Mailgun(formData);

    const sendMessage = (receiverEmail) => {
     const mg = mailgun.client({
      username: "api",
      key: "YOUR-MAILGUN-API-KEY",
     });
     mg.messages
      .create("domain.mailgun.org", {
       from:
        "WorldEats <WorldEats@domain.mailgun.org>",
       to: receiverEmail,
       subject: "WorldEats Hates To See You Go!",
       text: "Hey there, We hate to see you go! Could you let us know why you unsubscribed from WorldEats",
      })
      .then((msg) => console.log(msg)) // logs response data
      .catch((err) => console.log(err)); // logs any error
    };

    export default sendMessage

In the code snippet above, we created a new sendMessage function that takes in a receiverEmail and sends a message to that address using Mailgun.

Putting It All Together

At this point, we are almost done building out this service. The next step is to import the sendMessage function and invoke it when a webhook notification is received. To import the sendMessage function to your index.js file, add the following line of code to the top of the file import sendMessage from './email'. With the import in place, we need to invoke the sendMessage function within the /webhook route, passing in the receiverEmail address extracted from the webhook payload.

    app.post("/webhook", async (req, res) => {
     const Payload = req.body;
     res.sendStatus(200);
     const receiverEmail = Payload['event-data'].recipient;
     sendMessage(receiverEmail)
    });

The webhook handler should look similar to the above code snippet.

Getting Ready For Production.

Let's first deploy the server on Heroku(Here’s a guide we wrote that shows how to setup Ngrok). Then, although our service currently works fine, it is noted production-ready! Various unprecedented errors may occur and cause the server we created to miss webhook notifications. I'll use Hookdeck to manage the ingestion and error handling of the webhook connection to ensure I do not miss any webhook notifications.
Setting up Hookdeck
Sign in to Hookdeck and fill out the information for your webhook connection. Ensure that the destination URL you set in the Hookdeck dashboard is the URL endpoint of the newly deployed server.

Next, go ahead and replace the webhook URL on the Mailgun dashboard with the URL provided by Hookdeck.

In Conclusion

Congratulations, we've built our service that sends an email to users when someone unsubscribes from WorldEats newsletters. With this, Joe will get more information to understand what's happening.
Interested to learn more? Follow Hookdeck where I'll be sharing tutorials and guide about webhooks!
Try Hookdeck For Free. Receive, monitor and manage all your webhooks from a single place. We handle the complexity so you can focus on building your product.

Deploying A Server To Heroku

Oluwatobi — Mon, 05 Apr 2021 18:09:49 +0000

Deploying A Server To Heroku

Heroku is a Platform as a Service(PaaS) that makes it easy to deploy servers to the web. Heroku takes pride in its simplicity and ease by which users can take their local servers to production. Heroku has a very intuitive dashboard making it easy for users to deploy their servers.
After reading this guide, you will learn how to:

Deploy servers to Heroku
Manage Environment variables when deploying to Heroku

Getting Started

The first step in deploying a server to Heroku is creating a server. Since creating web servers is out of the scope of this guide, you can clone this demo web-server from Github to continue along with this tutorial
git clone

Now that you've set up a server on your local machine, we will learn how to deploy it to production.

Deploying a web server to Heroku can be done in two ways, using either the CLI or the Heroku dashboard. We will be exploring both ways of deploying a server to Heroku, starting with the Heroku CLI.

Introduction To The Heroku CLI

The Heroku CLI makes it easy to deploy web servers to the internet right from your terminal. To be able to use the CLI, you first need to install it on your local machine.

Installing Heroku Using The File Binaries

Download the standalone binary file compatible with your machine from the official download page.
Extract the downloaded file
Follow the OS specific prompts that follow to install the Heroku CLI

You can also install the Heroku CLI via NPM if you have Node installed on your computer. It is important to note that using NPM to install the Heroku CLI is not the most recommended method. This installation method relies on your system's version of Node.Js, which may be incompatible with Heroku.

Installing Heroku Using NPM

Ensure you have Node installed on your computer
Run the following command npm install -g heroku to install the Heroku CLI on your local machine

After installing the Heroku CLI using either of the above methods, you can confirm the installation was successful by running this command

$ heroku --version
//Expected Result
heroku/7.0.0 (darwin-x64) node-v8.0.0

If the installation was successful, you should see the installed version of Heroku printed out. If the above command failed to print any result, you should validate you have git installed on your computer and try again or head over to the official Heroku help page.

Deploying A Server Using The CLI
Now that we've set up everything, we are ready to go ahead and deploy the sample server cloned above to production. We will be deploying the server in the following steps:

Navigate to the project directory of the file to be deployed
Create a new file titled Procfile in the root of the project directory — This Procfile contains necessary commands that instruct Heroku on how to start the server. Since our demo server is in NodeJS, we need to add the following line of code to the newly created Procfile

web: node index.js

Login to your Heroku account via the terminal by running Heroku login. This command will redirect you to a web page and ask you to authenticate.
Create a new Heroku application by running heroku create <unique-app-name>
Next, initialize a git repository for your project if it doesn't exist. Remember to add a .gitignore file to ignore the node modules directory & .env file.
If you made any changes, commit the files to git by running the following command

$ git add .
$ git commit -m<Commit Message>

Push the changes to the Heroku server — In this step, Heroku builds our server and deploys it to the internet.

git push heroku master

If everything went well, you would notice that Heroku prints a log about the deployment to your terminal and the URL of our new server. You can test it out by running heroku open.

Deploying A Server Using The Dashboard
In the previous section, we deployed a server in six steps using the Heroku CLI. In this section, we will discuss how to deploy a server right from the Heroku dashboard. Using this method requires that you have your server hosted on Github or any version control system of choice. Deploying a server can be done in the following steps

Log in to your Heroku account and navigate to the dashboard.
Once in the dashboard, click the new app button fill the menu with a unique name for your new server & the region you want to deploy your new server.
With your newly created app page, navigate the deploy tab and click the **connect to Github** deployment method. It will prompt you to select the repository name you would like to connect
After connecting with the Github repository, you can decide whether you want to deploy the server automatically or manually by clicking the check box in the automatic & manual deploys section of the Heroku app page.
After selecting the deploy form, choose the branch Heroku should deploy and click the deploy branch button — This should print out the log information during your server's deployment. If the build succeeded, you would see your server's live URL, which you can visit. ## Configuring Environment Variables

In this section, we will discuss how to add environment variables for your apps deployed on Heroku. During development, you might need to keep specific values super secure. It is generally recommended you create a .env file to keep all sensitive information that shouldn't be committed to version control. Since version control systems don't hold your .env files, Heroku will not have access to it when you deploy your application.

If you are working with Heroku's CLI, you can configure Heroku to use environment values by simply running the following command for all the key value pairs in your .env
heroku config:set <key=value>
The above command will set environment values!

If you choose to deploy your app using the Heroku dashboard, head over to your apps page's settings tab, click the reveal config vars button. You will see your previously configured environment variables and be able to create new config vars.

Conclusion

So far, we have learned how to deploy servers to Heroku. It has been helpful to get you started on getting your application in production.

Receive Discord Notifications For Heroku App Builds

Oluwatobi — Thu, 01 Apr 2021 18:56:31 +0000

Heroku makes it easy to deploy local applications to the cloud. I always use it for my small and medium-scale applications. Once I deploy my application, I like to receive notifications of my builds in a Discord channel. It's great for visibility when I work on a project in a team with other developers.
In this guide, I will show you how I wired up an integration for Heroku builds notification to a Discord channel — giving step-by-step instructions on how you can create a similar integration. After reading this guide, you'll be able to:

Set up Discord and Heroku webhooks
Fix Heroku's payload format for Discord
Deploy the integration in production

Let's get started by setting up Discord.

The first step in getting started with configuring the Discord webhook is logging in to the Discord app and create a Discord server (if we don't have one). This server is going to be associated with the webhook we create.
To create a Discord server:

Click the + icon on the Discord dashboard, and add a server name.
Select a channel within your newly created server where you want to receive notifications of Heroku app builds.
Click the edit channel option and navigate to Integrations.
Once on the integrations page, Click the Create Webhook button to create a new webhook. Fill the menu with a descriptive name for the new webhook and copy the webhook URL.

This webhook URL will be necessary for the coming steps. Keep it handy!

Now it's time to set up Heroku.

In the previous section, we configured Discord webhooks and received a URL! In this section, we move a step further in building our demo service by setting up Heroku webhooks to notify us when a new build for the specified app has been initiated.

You can subscribe to Heroku webhooks either by using the Heroku dashboard, command-line interface, or API. I will only show how to subscribe to webhooks using the dashboard in this guide because it is more intuitive & requires no extra setup.

To get started

Log in to your Heroku account and select an app on the dashboard you want to configure for webhooks.
Click the more button to the dashboard's top right and select view webhooks from the dropdown menu.
Go ahead and create a webhook! Fill the name field with the desired name for the webhook in lowercase. For the Payload URL field, temporarily fill it with the Discord webhook URL from the previous step.
Next, select the api: build option from the list of event types & save the webhook.

Fixing Heroku payload format for Discord

So we have configured both Discord & Heroku webhooks. Now, it's time to put it all together.

The first thing to know is Discord webhooks expects a different payload format than that which Heroku sends as a webhook notification. We need need to build a simple web server to sit between Heroku & Discord webhooks. This web server will format the JSON data from Heroku webhooks and make a POST HTTP request to the Discord URL, with the formatted JSON data as the request body.

For this guide, I will use NodeJS & ExpressJS to build out the web server. Although, the following logic can be applied in the stack of your choice.

    const express = require("express");
    const app = express();
    const request = require("request");
    const bodyParser = require("body-parser");

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));

    app.post("/webhook", async (req, res) => {
     const Payload = req.body;
    //Respond To Heroku Webhook
     res.sendStatus(200);

     const options = {
      method: "POST",
      url:
       "https://discord.com/api/webhooks/XXXXXXXXXXXXXX",
      headers: {
       "Content-type": "application/json",
      },
    //Format JSON DATA
      body: JSON.stringify({
       content: `This is A Webhook notification!A build for your app ${Payload.data.app.name} was just triggered`,
      }),
     };
     request(options, function (error, response) {
      if (error) throw new Error(error);
      console.log(response);
     });
    });
    app.listen(3000, () => console.log("App is running on port 3000!"));

In the above code snippet, we created a /webhook route where Heroku will send webhook data. We then acknowledge the receipt of the Heroku webhook by sending a 200 OK response. After which, we format the data and POST it to the Discord URL we copied up above.
At this point, we are almost set to go! To round up, we need to publish our local server — In a development mode, you could use a local tunnel tool like Ngrok to get an SSL secured URL.

Let's send a test

Once you have a HTTPS URL for the local server, head over to the Heroku dashboard and edit the webhook we created by replacing the old payload URL with the URL of the web server. Now that everything is in place, you can test what we have worked on so far by triggering a build for your Heroku app. If everything goes well, you should see a message similar to the one below appear in your discord channel!

Sweet, everything works!

Now the only thing left to do is deploying in production.
Let's first deploy the server on Heroku(Here is a guide we wrote that shows how to deploy to Heroku). Then, I'll use Hookdeck to manage the ingestion and error handling of the webhook connection to ensure I do not miss any webhook notifications.

Setting up Hookdeck

Sign in to Hookdeck and fill out the information for your webhook connection. Ensure that the destination URL you set in the Hookdeck dashboard is the URL endpoint of the newly deployed server.

All there is left to do is update the URL on Heroku with Hookdeck's URL and trigger a test to see if everything works.

Conclusion

That's it! Everything is set up and deployed in production reliably. I'm excited to receive a notification in Discord whenever there's a build on my Heroku App!

Connecting Stripe & Slack via webhooks

Oluwatobi — Fri, 26 Mar 2021 18:26:17 +0000

A while back, my friends and I built a simple web service that costs 5$ to use but because of our full-time jobs, we gradually stopped working on it. Until recently, we got back together and decided to spend more time on it and release new features. To keep us motivated, I decided to connect Stripe (the payment gateway service we use for processing payments) with the team’s Slack workspace so that when a user makes a payment, we receive a notification. I’m excited to share how I did it so you can also keep your team motivated!

In this guide, I will show you how I wired up the integration — giving step by step instructions on how you can create a similar integration. After reading this guide, You’ll learn how to:

Configure Stripe Webhooks
Configure Slack Webhooks
Connect Stripe & Slack to communicate via webhooks.

Getting Started

To connect Stripe and Slack, we need to configure Stripe webhooks to send out notifications when an event is triggered and configure Slack webhooks to post these notifications as a message to a Slack channel.

If you want to learn more about webhooks,here is a beginner friendly guide to webhooks I wrote

Configuring Stripe Webhooks

You can configure Stripe webhooks by using the dashboard or by making a HTTP request to the API.
To configure Stripe webhooks using the dashboard, log in to your Stripe account and head over to the dashboard. Once in the dashboard, select the developers option on the dashboard and click the webhooks option. On the webhooks page, click the add endpoint button, you will be prompted to fill out information related to the webhook you intend to configure. For the value of the endpoint field, you could leave it empty or put any random value for now — We will update this once we have configured the Slack webhook. For the events field, you can select any events you would like to receive notifications for, when they occur.

To configure Stripe webhooks using the API, simply make a POST request to the /v1/webhook_endpoints endpoint of the Stripe API. The request body should include JSON data about the webhook by following a similar format as the code snippet below.

    {
            "url": "https://example.com/my/webhook/endpoint",
            "enabled_events[]": [
                "charge.failed",
                "charge.succeeded"
            ]
        }

Now that we have the Stripe webhook setup, we can go ahead and configure the Slack webhooks.

Configuring Slack Webhooks

The first step in configuring Slack webhooks is creating a Slack app for your workspace. To create a slack app, click here and fill the pop up menu with the intended App name & select the Slack workspace you would like the webhook to be associated with. Head over to the features page of the newly created app and toggle the activate incoming webhooks button. Scroll to the bottom of the page and click the “Add New Webhook To Workspace” button to give your newly created Slack app access to your workspace. After a successful authorization you should receive a webhook URL from Slack. The webhook URL will look similar to this “https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXX/3XXXXX”.

Connecting Stripe & Slack

Now that we have configured the webhooks of both platforms, we need to connect them such that when an event is triggered within the Stripe account, a message is sent to the Slack channel.

While you might be tempted to copy the URL provided by Slack and update the created Stripe endpoint with it, that will not work. Although when using the previously mentioned method, Stripe will post notifications to the Slack URL when an event is triggered but Slack will be unable to parse that data and send a message to the specified channel.
The correct way to approach this problem is to format the JSON data received from Stripe and make a POST request to the Slack webhook URL in a format that adheres to the pattern Slack expects. To format the Stripe webhook, we will create a web server that receives and responds to the Stripe webhook. The webserver will also parse the Stripe webhook data and POST it to the Slack webhook URL.

    const express = require("express");
    const app = express();
    const request = require("request");
    const bodyParser = require("body-parser");

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));

    app.post("/webhook", async (req, res) => {
    //Extract the Stripe Webhook data
      const Payload = req.body;
    //Respond to Stripe Webhook notification 
      res.sendStatus(200);
    //Make HTTP POST Request To Slack Provided URL
      const options = {
        method: "POST",
        url:
          "https://hooks.slack.com/services/T01XXXXXX/B01XXXXXX/XXXXXX",
        headers: {
          "Content-type": "application/json",
        },
    //Format Stripe Webhook Data To Adhere To Slack Standards
        body: JSON.stringify({
          text: `Hey! An ${Payload.object} of type ${Payload.type} with ID ${Payload.id} just occured on your Stripe Account`,
        }),
      };
      request(options, function (error, response) {
        if (error) throw new Error(error);
        console.log(response);
      });
    });
    //Start Web Server
    app.listen(3000, () => console.log("App is running on port 3000!"));

Now that everything is set up, you can go ahead and deploy the web server — In a development mode, you could use a local tunnel tool like Ngrok or the Stripe CLI to get an SSL secured, endpoint URL(Here’s a guide we wrote that shows how to setup Ngrok).

Getting Ready For Production

In a Production environment you would want to deploy the web server we created up above to a hosting platform like Heroku(We wrote a guide on deploying servers to Heroku)
Next, We will create a new webhook connection using Hookdeck to manage the ingestion and error handling of the webhook connection to ensure we do not miss any webhook notifications(Check out this guide to get started with creating webhook connections on Hookdeck).
Finally, head back to the Stripe dashboard, select the specific endpoint and update the URL, replacing it with that provided by Hookdeck when a new connection was created. At this point, we are all set. You can test if the integration is working by clicking the send test webhook button. Once the button is clicked, you should notice a new message from the Slack app is sent to the Slack workspace.

Conclusion

Congratulations you have connected Stripe & Slack via webhooks to receive notifications when a payment is processed. I hope this can help keep motivation high!

Receive Slack Notifications for Typeform Submissions via webhooks!

Oluwatobi — Tue, 23 Mar 2021 19:03:53 +0000

Typeform is tool for conversational data collection. Using Typeform, you can create personalized conversational forms. With Typeform webhooks, you can receive submissions to your forms on external applications. In this guide, we will wire up Typeform such that when submissions/responses to a form are received, a message is sent to a specified slack channel.

Getting Started

To build out this application, we will have to interact with both Typeform & Slack’s webhooks. To be able to receive a notifications/messages when an event(submission) occurs in Typeform, we will first have to configure Slack’s incoming webhooks.

Configuring Slack Webhooks

To get started with the Slack webhooks, we will create a new Slack app in the workspace we intend to get notified from the Typeform submissions. To create a slack app, click here and fill the pop up menu with the intended App name & select a workspace. Head over to the features page of the newly created app and toggle the activate incoming webhooks button. Scroll to the bottom of the page and click the “Add New Webhook To Workspace” button to give your newly created Slack app access to your workspace. After a successful authorization you should receive a webhook URL from Slack. The webhook URL will look similar to this “https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXX/3XXXXX”. This is the URL(endpoint) which we use to subscribe to Typeform webhooks.

Configuring Typeform Webhooks

With Slack’s webhook in place, the next step is to set up Typeform so that notifications are sent to Slack! To set up a webhook, log into your Typeform account and select a form you would like to receive notifications on Slack when there is submission. Next, Navigate to Connect > Webhooks and click the “Add a webhook” button. Provide your endpoint URL( Slack’s URL from the previous step) & save the webhook. You should see your newly created webhook listed down below. By default, newly created webhooks are turned off. You need to toggle the button on the webhook list to set the webhook live.

Fixing Typeform’s JSON Data Pattern for Slack

At this point, you can go ahead and test the webhook by submitting a form. You will notice that despite submitting a response, you will not receive a slack notification, that sucks! We will get to debugging — click the “view deliveries” button on the specific webhook on the Typeform dashboard. You will notice that Typeform actually sent a response to Slack but Slack was unable to parse this response and send a message to the channel. Slack expects a specific pattern of JSON data which Typeform does not adhere to. To solve this problem, we will have to write some code to format the data Typeform provides and send it as a POST request to the Slack URL we got above.

    const express = require("express");
    const app = express();
    const request = require("request");
    const bodyParser = require("body-parser");

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));

    app.post("/webhook", async (req, res) => {
    //Extract Information About TypeForm Submission From Request Body 
      const Payload = req.body;
      const TypeformResponse = Payload.form_response;
    //Send 200 OK response to Typeform
      res.sendStatus(200);

    //Make HTTP POST Request To Slack Provided URL
      const options = {
        method: "POST",
        url: "Slack_Provided_URL",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify({
          text: `Hey! There is a new submission for your Typeform ${tfResponse.form_id}`,
        }),
      };
      request(options, function (error, response) {
        if (error) throw new Error(error);
        console.log(response.statusCode);
      });
    });

    app.listen(3000, () => console.log("App is running on port 3000!"));

With above code snippet in place, go ahead and deploy the web server — In a development mode, you could use a local tunnel tool like Ngrok to get an SSL secured URL(Here’s a guide we wrote that shows how to setup Ngrok).

Getting Ready For Production

In a Production environment you would want to deploy the web server we created up above to a hosting platform like Heroku(We wrote a guide on deploying servers to Heroku)
Next, We will create a new webhook connection using Hookdeck to manage the ingestion and error handling of the webhook connection to ensure we do not miss any webhook notifications(Check out this guide to get started with creating webhook connections on Hookdeck).
The last step in fixing this problem is to edit the Typeform webhook endpoint by replacing it with the URL obtained when a new webhook connection was created in Hookdeck. With the correct URL in place, you could go ahead and test it by responding a Typeform. Once submitted, you should receive a Slack notification telling you there has been a new form submission. 🎉

Conclusion

So far, we have seen how receive Slack notifications for Typeform form submission via webhooks!
Interested to learn more? Follow Hookdeck where I'll be sharing tutorials and guide about webhooks!
Try Hookdeck For Free. Receive, monitor and manage all your webhooks from a single place. We handle the complexity so you can focus on building your product.