Unlock the Power of Serverless Functions: Send Emails with React and SendGrid

Simplifying Complex Tasks with Serverless Functions

In today’s world of modern web development, creating complex single-page applications is easier than ever, thanks to popular JavaScript frameworks like React, Angular, and Vue. Moreover, with platforms like Netlify, you can host your applications in just a few steps. However, what if you want to perform tasks that require server-side functionality, such as sending emails or accessing secret API credentials? This is where serverless functions come into play.

What are Serverless Functions?

Serverless functions are simple, serverless functions that can be declared in JavaScript, TypeScript, or Go and deployed with your frontend code. These functions can be invoked by making a request to an endpoint, allowing you to perform tasks that would otherwise require a server.

Event-Driven Serverless Functions

But that’s not all. Serverless functions can also be triggered by specific events, such as form submissions. This allows you to create event-driven functions that can respond to certain events without requiring a manual invocation. In this article, we’ll explore how to create an event-driven serverless function that sends an email in response to a form submission using SendGrid.

Creating a React App with a Contact Form

To get started, let’s create a simple React app using create-react-app. We’ll add a contact form to our app and configure Netlify to manage form submissions. We’ll also add a bit of styling to make our form look visually appealing.

import React from 'eact';

const ContactForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Name:</label>
      <input type="text" name="name" />
      <br/>
      <label>Email:</label>
      <input type="email" name="email" />
      <br/>
      <label>Message:</label>
      <textarea name="message"></textarea>
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
};

export default ContactForm;

Setting Up SendGrid

To send emails, we’ll need an API key from SendGrid. We’ll sign up for SendGrid, verify our sender identity, and get an API key. We’ll then create a .env file to store our API key and sender email address.

SENDGRID_API_KEY=YOUR_API_KEY
SENDER_EMAIL=YOUR_SENDER_EMAIL

Adding a Serverless Function for Sending Emails

Next, we’ll create a serverless function that sends an automated email response whenever a client submits a form. We’ll name our function submission-created.js and configure it to send an email using SendGrid.

import sgMail from '@sendgrid/mail';

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

export async function handler(event) {
  const { name, email, message } = event.body;
  const msg = {
    to: '[email protected]',
    from: process.env.SENDER_EMAIL,
    subject: 'New Message from Contact Form',
    text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`,
  };
  try {
    await sgMail.send(msg);
    return { statusCode: 200 };
  } catch (error) {
    console.error(error);
    return { statusCode: 500 };
  }
}

Testing Our App

Finally, we’ll test our app by submitting the form and verifying that an email is sent to our inbox. We can then deploy our app using netlify-cli or the continuous deployment feature via GitHub, GitLab, or Bitbucket.

• Submit the form with sample data.
• Check your inbox for the automated email response.
• Verify that the email contains the correct information.

With serverless functions, you can easily provide a full-stack experience in a Jamstack application without requiring a server. By leveraging event-driven functions and third-party SMTP servers like SendGrid, you can create powerful, serverless applications that can perform complex tasks with ease.