Receive Discord Notifications For Heroku App Builds

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:

1. Click the + icon on the Discord dashboard, and add a server name.
2. Select a channel within your newly created server where you want to receive notifications of Heroku app builds.
3. Click the edit channel option and navigate to Integrations.
4. 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

1. Log in to your Heroku account and select an app on the dashboard you want to configure for webhooks.
2. Click the more button to the dashboard's top right and select view webhooks from the dropdown menu.
3. 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.
4. 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!

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.