Sending notifications from a Jamstack site

For our September 16th Courier Live, Paul Chin, Jr joined me to talk about Begin. Begin helps you effortlessly ship web apps and APIs on AWS. Paul recently updated his 5 year old LAMP stack Ghostbusters site into a functional FASTstack application using Begin. While updating the contact form, he decided he'd rather it send a Slack message instead of sending an email. He decided to use Courier to handle this. Together we walked through creating a new Begin application that included an HTML contact form and configured it to send using Courier.

Check out the video below to watch us:

• Create a new Begin application
• Add an HTML Form and handle the submit using a serverless function
• Set up a new Slack Application to handle sending direct messages
• Create a new Courier notification and connect it to the serverless function
• Add a conditional SMS channel for urgent messages without changing any code

Check out the full project code available on GitHub.

Be sure to Like the video and Subscribe to our YouTube channel.

Handling Contact Forms with Courier

It's easy to set up a contact form using Begin. Begin will store your static assets in an S3 bucket and help you create the serverless function needed to handle the form submit. It's easy to get started by signing in to Begin and clicking Create new app and selecting a minimal app.

You can add a form like the following to your app.

1
<form id="main-contact-form" method="post" action="contact-form">
2
  <div><input type="text" name="name" placeholder="Name" required /></div>
3
  <div><input type="email" name="email" placeholder="Email" required /></div>
4
  <div><input type="text" name="subject" placeholder="Subject" required /></div>
5
  <div>
6
    <textarea
7
      name="message"
8
      class="form-control"
9
      rows="8"
10
      placeholder="What seems to be the problem?"
11
      required >
12
    </textarea>
13
  </div>
14
  <div>
15
    <input type="checkbox" name="urgent" value="true" />
16
      <label for="urgent" >Urgent</label>
17
  </div>
18
  <div><button type="submit">Send Message</button></div>
19
</form>

And then create a serverless function using Begin with the same name as the form action.

1
let tiny = require('tiny-json-http')
2
let arc = require('@architect/functions')
3

4
let sendCourier = async function (req) {
5
  let body = req.body
6

7
  let url = 'https://api.courier.com/send'
8

9
  let headers = {
10
    "authorization": `Bearer ${process.env.COURIER_AUTH_TOKEN}`,
11
    "content-type": "application/json",
12
  }
13

14
  let data = {
15
    event: `praisecage-contact`,
16
    recipient: 'pchinjr',
17
    profile: {
18
      slack: {
19
        access_token: `${process.env.SLACK_TOKEN}`,
20
        email: 'paul@praisecage.org'
21
      }
22
    },
23
    data: {
24
      name: `${body.name}`,
25
      email: `${body.email}`,
26
      subject: `${body.subject}`,
27
      message: `${body.message}`,
28
      urgent: `${body.urgent}`
29
    }
30
  }
31

32
  let response = await tiny.post({ url, data, headers })
33

34
  console.log(response)
35
}
36

37
let route = async function (req) {
38
  return {
39
    statusCode: 303,
40
    location: '/'
41
  }
42
}
43

44
exports.handler = arc.http.async(sendCourier, route)

This function will handle the form submit and send it to Courier. From there, you can use the Courier application to create your notification.

You can sign up for a free account on both Courier and Begin. I hope this stream has given you a taste of what is possible when you build your app with Begin and Courier. It's never been easier to build on top of AWS, so get started and be sure to share with us what you create.

Is there something you’d like to see us do using Courier? Let us know and it might be the subject of our next Courier Live. We stream a new Courier Live every Wednesday at noon Pacific. Follow us on Twitch to be notified when we go live.

-Aydrian