" width="1000" style="--opacity:1">
Sam Magura
Slack is one of the leading platforms for real-time communication. But the platform is useful for more than just messaging your coworkers — Slack is also a convenient place to aggregate and monitor alerts from across your business. For example, your development team may want to receive an alert when a production server's CPU usage exceeds a certain threshold, and your sales team may want to receive an alert when a new lead is acquired.
Having these alerts in Slack allows your teams to react more quickly than if the alert was sent as an email. Decreasing the time between an alert being generated and a team member taking action can have a huge impact, for example if the alert indicates that a production system is about to go down.
The other good thing is that integrating your services with the Slack API is incredibly easy. Simply create a Slack app, and then you can send Slack messages from your code by making HTTP POST calls to the app's webhook URL.
The rest of this article will provide a step-by-step guide to sending Slack messages from your application, with the Slack webhook URL retrieved from Zero at runtime. We'll be using the Remix full stack JavaScript framework, but the steps can easily be adapted to any programming environment that allows you to make HTTP calls.
🔗 The full code for this example is available in the zerosecrets/examples GitHub repository.
Before we can start sending messages from our code, we need to create a Slack app and connect it to our Slack workspace. You can do this by following these steps:
https://hooks.slack.com/services/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
. Your URL is a secret and should not be shared publicly or committed to your git repository.If you want, you can copy the sample Curl request and run it in a terminal to verify that the app is working.
Zero is a modern secrets manager built with usability at its core. Reliable and secure, it saves time and effort.
We can simplify our application's configuration by storing the webhook URL in Zero with the rest of our API keys. To do so, log in to Zero and create a new project. Then click the "Add secret" button and fill out the form as shown here:
Remix is a relatively new full stack JavaScript application framework that is based on React. Overall, Remix is fairly similar to Next.js , but is faster and offers a unified model for data fetching. Though, the Next.js team seems likely to catch up to Remix with the new app
directory that was launched with Next.js 13 as a beta feature. While we'll be using Remix in this guide, you can follow roughly the same steps if working with Next.js or any other web application framework.
To create a new Remix application, run npx create-remix@latest slack-alerts
and answer the questions when prompted:
Feel free to choose whichever deployment target your prefer — it won't affect the code we write to integrate with Slack.
Our application only needs to contain a single page, so we can put our UI code directly in app/routes/index.tsx
. Let's render a simple form that asks for the user's name and the alert text they would like to send to Slack:
The code for the form will look something like this:
When the form is submitted, it will execute the action
function which is defined in the same file. Our action will validate the form data and then call createAlert()
if everything looks good.
The next step is to implement createAlert
. This function will run server side and send an HTTP POST to the Slack webhook URL, using the data that was submitted through the form. The createAlert
function should be placed in app/models/alert.server.ts
:
Here, getSlackWebhookUrl
is a function that will retrieve the secret webhook URL from Zero using the Zero TypeScript SDK. You can install the SDK with
and use it like so:
Now when you run your app, you'll need to provide the Zero token as an environment variable:
If you were deploying this to a platform like Vercel, the Zero token should also be added as an environment variable through the Vercel UI.
Finally try running the app and entering a name and the content of your alert. If it works, you'll see the alert in your Slack workspace!
This article showed how to send a message to a Slack channel from your code using the Slack API. We used Remix for our demonstration app, but you can integrate with Slack just as easily from any other web framework.
While our simple app had the user manually creating an alert, similar to PagerDuty, it is even more powerful to automatically create alerts when certain events occur (like when the load on your database exceeds some threshold). In these scenarios, you can use the exact same code that was shown in this article to create the alert. The more involved part is figuring out how to integrate with the monitoring system you use to determine when an alert should be sent.
Use the Claude AI assistant to summarize emails in just a few lines of code.
Integrate with the Gmail Push Notifications API to enable your app to intelligently respond to new emails.
Zero is a modern secrets manager built with usability at its core. Reliable and secure, it saves time and effort.