Integrating Netlify Deployment Notifications with Discord using Webhooks

Minh-Tri Le

Minh-Tri Le on Nov 19, 2023

netlify

nextjs

blog

discord

webhook

tutorial

Netlify have some solution to trigger notification when deploy success status finish. I choose use webhook to integrate notification hook between Discord and my app on Netlify.

Solution: Utilizing Webhooks

Netlify offers various solutions to trigger notifications upon deployments. I opted to use webhooks for integrating a notification system between Discord and my Netlify-hosted application.

Step 1: Acquiring the Discord Webhook URL

To begin, navigate to your Discord dashboard, access "Settings," then "Integrations," and select "Create Webhook URL." Copy this URL for later use.
Discord Webhook

Step 2: Setting Up an API Route in Next.js

My project is hosted on Netlify and uses Next.js. To set up notifications, I added an API route in my Next.js app. This API acts like a bridge: when Netlify finishes building my app, it triggers this API. Then, the API sends a message to a Discord channel. I linked this Next.js API to Netlify's deployment process so it gets called automatically after every build, whether it's a success or a failure.
Here's how to create a Next.js API route within the pages/api directory, named deployment.tsx :
/pages/api/deployment.tsx

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<ResponseData>
) {
    const body = {
        username: "Username hook",
        avatar_url: "Your_Avatar_Url",
        content: null,
        embeds: [
            {
                "title": req?.query?.success ? "Successful deploy of.." : "Deploy did not complete for...",
                "color": req?.query?.success ? 7143256 : 16731726,
                "author": {
                  "name": "Your app naming",
                  "url": "Your app URL",
                  "icon_url": "Your app icon URL"
                }
              }
        ],
        attachments: [],
    };
    await fetch(
        "YOUR_DISCORD_WEBHOOK",
        {
            method: "POST",
            headers: {
                "Content-type": "application/json",
            },
            body: JSON.stringify(body),
        }
    );

    res.status(200).json({message: "Nextjs Discord endpoint"});
}
In this code, I've implemented logic to check incoming requests. If the request includes a success query parameter, the response body is customized with a message and color indicating success.

Step 3: Configuring the Deployment Hook on Netlify

To set this up, go to your site's configuration on Netlify, navigate to "Notifications," and add a new notification.
Add notify hook

Creating the Notification Hook:

For the event listener, I set it to "Deploy successes," meaning Netlify will call the Next.js endpoint when the app deployment is successful. The query string success=true in the endpoint will trigger the customized response body defined in the Next.js API.
Add notify hook
Similarly, I configured another notification hook for deployment failures. In this case, Netlify calls the endpoint when the build fails, so there's no need for an additional query string.

Conclusion:

With these steps completed, new notifications should now appear in your designated Discord channel, providing real-time updates on the deployment status of your Netlify application.

Comments