333 reads

Sending Emails with the SendGrid Cosmic Function

by Tony SpiroSeptember 11th, 2018

Too Long; Didn't Read

We recently released Cosmic Functions (public beta) We’re excited to help teams build amazing modern products together with serverless solutions. In this short tutorial, I’m going to show you how to get up and running with the SendGrid Email Function to send emails via SendGrid. After installing the function, add your AWS credentials and environment variables to the function. Create a contact form to access the newly deployed endpoint. Use the React Starter to install the function in your app codebase.

Companies Mentioned

featured image - Sending Emails with the SendGrid Cosmic Function

We recently released Cosmic Functions (public beta). We’re excited to help teams build amazing modern products together with new serverless solutions.

In this short tutorial, I’m going to show you how to get up and running with the SendGrid Email Function to send emails via SendGrid (to view more example functions login and go to Your Bucket > Settings > Functions).

Deploying the Function

1. Install the function

To install the SendGrid function, go to Your Bucket > Settings > Functions, find the SendGrid function, and click “Install Function”.

2. Add keys, and deploy

After you install the function, you will be redirected to a page to add your AWS credentials and environment variables. Follow the steps to add your AWS creds (if you don’t have them handy).

Go to your SendGrid account and find your API Secret Key located in Settings > API Keys (you may need to create a new one) and add this as the value to SENDGRID_API_KEY.

Once you have your keys added, click “Deploy Function” and in a minute your function will be deployed and ready for requests.

Code a Web Contact Form

Next, let’s create a contact form to access the newly deployed endpoint. Follow these steps to install the React Starter:

npm i -g cosmic-cli
cosmic init react-starter
cosmic develop

Now go to your app codebase and go to the default page component located in pages/default.js and edit it to look like this:

import React from 'react'
import Router from 'next/router'
import bucket from '../config'
import Page from '../components/page'
import PageNotFound from '../components/404'
import Header from '../components/header'
import Footer from '../components/footer'
import Nav from '../components/nav'
class DefaultPage extends React.Component {
  static async getInitialProps({ req, query }) {
    let slug = query.slug
    if (!slug)
      slug = 'home'
    let page
    try {
      const res = await bucket.getObject({ slug })
      page = res.object
    } catch(e) {
      page = {
        title: 'Page not found',
        component: '404'
      }
    }
    return { page }
  }
  handleSubmit(e) {
    e.preventDefault()
    const email = e.target.email.value
    const first_name = e.target.first_name.value
    const last_name = e.target.last_name.value
    var url = 'https://your-cosmic-function-endpoint-here.lambda.aws.com' // ADD YOUR ENDPOINT HERE
    var data = {
      to: '[email protected]', // EDIT THIS TO YOUR EMAIL
      from: email,
      subject: `Contact form submission: ${first_name} ${last_name}`,
      text_body: `Contact form submission: ${first_name} ${last_name}`,
      html_body: `Contact form submission: <br /><b>${first_name} ${last_name}</b><br />${email}`
    }
    fetch(url, {
      method: 'POST',
      body: JSON.stringify(data),
      headers:{
        'Content-Type': 'application/json'
      }
    }).then(res => res.json())
    .then(response => console.log('Success:', JSON.stringify(response)))
    .catch(error => console.error('Error:', error));
  }
  render() {
    return (
      <div>
        <Header page={ this.props.page }/>
        <div className="main">
          {this.props.page.component && this.props.page.component==='404' ? (
            <PageNotFound />
          ) : (
            <Page page={this.props.page} />
          )}
          <Nav />
          <form onSubmit={this.handleSubmit}>
            <div>
              <input type="email" name="email" placeholder="Email"/>
            </div>
            <div>
              <input type="text" name="first_name" placeholder="First Name"/>
            </div>
            <div>
              <input type="text" name="last_name" placeholder="Last Name"/>
            </div>
            <div>
              <button type="submit">Send Email</button>
            </div>
          </form>
        </div>
        <Footer />
      </div>
    );
  }
}

export default DefaultPage

Notice a couple things here:

1. We’ve added a form element to take the input for email, first name, and last name.
2. We've added the handleSubmit method to handle the form submission which takes the values of the form and sends the data to our Cosmic Function endpoint.

And that’s it! We’ve now got an endpoint that receives the data from our form and sends it to the SendGrid API for processing.

Benefits

Less Code

We didn’t have to worry about building an API endpoint in our app to send the data to SendGrid.

Less Config Hassles

We don’t have to worry about config hassles like possibly leaking secret keys client-side. We don’t have to share API keys with anyone else, just the endpoint. Config is handled in the Cosmic Function as an Environment Variable.

Reusable

We can use this endpoint in any other app that needs to send an email.

I hope you enjoyed this quick tour of the SendGrid Function, now ready for installation and deployment (go to Your Bucket > Settings > Functions). Let me know if you have any questions or comments. Reach out to us on Twitter and join our Slack community.