Serverless function for sending Slack message as a contact method

Serverless function for sending Slack message as a contact method

get message directly

Tools

2021.02.24

0 #slack #serverless #node

Once I’ve written about contact forms for static sites, and I’ve implemented Netlify Forms for a while. The limit for Netlify Forms is that obvious that you have to host your site on Netlify with certain limitations (with a free plan). Bypass that limitation is also easy, switch to a more general accessible serverless function with powerful control.

Nowadays, there are so many serverless function providers, such as Firebase, AWS, IBM Cloud, Azure, Vercel… You can choose whichever you’re interested. Here I’m going to use Express with Node.js as a brief introduction.

Sending E-mails?

Once I’ve started building my contact form with serverless function, the first thought is to sending emails to me (or team) with services such as SendGrid. However, as I’m using Hotmail and it’s always trying to block emails from SendGrid’s public IPs… The same to other email providers, I can rarely get messages during testing. Then Slack saved me…

Setup Slack app

For posting messages to a specific channel or posting a direct message in Slack workspace, you need to create a Slack app first (without distribution, just use it in your workspace is fine).

Just visit https://api.slack.com/apps/ to create an App with detailed configurations and install it in your workspace.

For posting messages with a serverless function, we just need to set up an “Incoming Webhooks” and get the webhook URL. For my case, I just authorised the following permissions:

  • Post messages to specific channels in Slack
  • Post messages to direct message conversation

Sending messages via serverless function

Once we got our webhook URL, we need to POST messages to that URL and then messages will pop in our Slack app.

The following JavaScript code is running on Heroku with the Express framework:

const router = require('express').Router()
const axios = require('axios')
const prettier = require('prettier')

router.get('/', async (req, res) => {
    res.status(405).json('Method Not Allowed')
})

router.post('/', async (req, res) => {
    const postData = req.body

    if (postData.content) {
        try {
            const message = "```"
            	+ prettier.format(JSON.stringify(postData), { semi: false, parser: 'json' })
            	+ "```\n"
            const slackRes = await axios.post(process.env.SLACK_WEBHOOK_URL, {
                text: message,
                mrkdwn: true // Slack markdown style
            })

            if (slackRes.data === 'ok') {
                res.status(200).json('success')
            } else {
                res.status(500).end()
            }

        } catch (err) {
            console.log(err)
            res.status(500).json(err)
        }
    } else {
        res.status(400).json("Bad Request!")
    }
})

module.exports = router

I just formatted all the message contents into block code, see Slack docs for more formatting options.

Okay, that’s all for the serverless function. Setup a URL endpoint to this serverless function, and test it or start using it in your contact form…

Ads by Google

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.41 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Hands on IBM Cloud Functions with CLI

Tools

2020.10.20

Hands on IBM Cloud Functions with CLI

IBM Cloud CLI allows complete management of the Cloud Functions system. You can use the Cloud Functions CLI plugin-in to manage your code snippets in actions, create triggers, and rules to enable your actions to respond to events, and bundle actions into packages.

Contact form for a static site without a backend

Tutorials

2018.03.24

Contact form for a static site without a backend

For a static site like those on GitHub Pages, everything is done in the frontend. The user just downloads a bunch of static files that execute in their browser. But for a "Contact" form, to deal with the submissions we typically need a backend service, either self hosted or a third a third-party service.

Setup an IKEv2 server with StrongSwan

Tutorials

2020.01.09

Setup an IKEv2 server with StrongSwan

IKEv2, or Internet Key Exchange v2, is a protocol that allows for direct IPSec tunnelling between two points. In IKEv2 implementations, IPSec provides encryption for the network traffic. IKEv2 is natively supported on some platforms (OS X 10.11+, iOS 9.1+, and Windows 10) with no additional applications necessary, and it handles client hiccups quite smoothly.

TOC