Serverless Email Sending

CodeSandbox Link

You can find the full code for this tutorial at https://codesandbox.io/s/send-email-without-backend-ofzf6.

Create an account

Create an EmailJS account. The free tier allows you to send up to 200 emails for free every month. If you wish to send more than that, you can explore their pricing page to discover all their different plans. Once signed up, you'll land on the following screen.

EmailJS Dashboard

Email services

In order to be able to send an email, you need to add a service to your EmailJS account. If you plan on sending only a few emails, the easiest way is to choose your email provider, under Personal Services. If you plan on sending transactional emails, or a lot of them, select your preferred service under the Transactional Services section.

EmailJs Available service integrations

In my case, I plan on sending only a few emails. My email provider is Gmail, so when I click on it, I'll need to configure the service. Click on the Connect Account button in order to link your Gmail account to EmailJS. This will allow EmailJS to send email under your name/email. Copy the Service ID, as we'll need it later.

EmailJS Config Service

Email templates

Next, we'll need to create an email template. Click on the Email Templates tab and on Create new template. The default template will look like this:

EmailJS Default Template

The text in curly brackets, for example the {{from_name}}, is a variable that you'll pass to the function in order to send the email. Let's change a few of them to make it easier in the coding process afterwards.

EmailJS Template

In the template above:

• Replace the {{to_name}} to {{name}}
• Remove the variable after the Hello
• Replace the {{reply_to}}, in the Reply To field on the right side, by {{email}}

Then, let's click on the Settings tab of this template. Let's rename our template by My Template - or any other name you wish. Copy the Template ID, as we'll need it later. Remember to click on Save when you're done.

EmailJs Template Settings

Integrate EmailJS

In order to use EmailJS in our project, we'll need to install the SDK. Run the following command in the Terminal in order to save the EmailJS Package.

$ npm install emailjs-com --save

We have one last ID, which is the User ID, to get. Back in EmailJS's dashboard, click on Integration. Under the NPM tab, you'll see the instructions on how to install and use the SDK. You'll also see your User ID in the second and third blue rectangles. Copy it, as we'll need it in the code. We won't need the access token.

EmailJs Integration

Create your button

Create a button so that we can call the function to send an email on click on that button. This button takes one prop, which is the onClick event. We're also using styled-components in order to style this button.

// Button.js

import React from "react";
import styled from "styled-components";

const MyButton = (props) => {
  return <Button onClick={props.onClick}>Send email</Button>;
};

export default MyButton;

const Button = styled.button`
  background: linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%);
  padding: 12px 0;
  width: 200px;
  border: none;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  font-family: Segoe UI, sans-serif;
  display: grid;
  justify-self: center;
`;

Create the function

Create a new file where we'll store the function to send an email. We need to import emailjs, from the SDK we installed in our project. We also need to provide the three IDs we copied at the beginning of this tutorial (serviceId, templateId and userId), so paste them in their corresponding variable, between the double quotes.

Note: For the purposes of this tutorial, we're hard-coding the keys in our project. However, never hard-code your keys in your file if you plan to share your project or commit it, as it is a big security flaw. Save them in a .env file to keep them secret.

// sendEmail.js

import emailjs from "emailjs-com";

const serviceId = "";
const templateId = "";
const userId = "";

const sendEmail = async (name, email, message) => {
  try {
    const response = await emailjs.send(
      serviceId,
      templateId,
      { name, email, message },
      userId
    );

    if (response.status === 200) {
      console.log("Successfully sent message.");
    }
  } catch (error) {
    console.error("Failed to send email. Error: ", error);
  }
};

export default sendEmail;

This function takes three arguments: a name, an email and a message. These are the three variables that we added to the template on EmailJS's dashboard. Then, we're calling the send() function from the EmailJS SDK, and if everything works well, we'll get a Successfully sent message printed on the console. If not, we'll see an error. Remember to also export the function at the bottom of this file.

Call the function

In the App.js file, or any file that you wish, import the Button and add it in the return body.

// App.js

import React from "react";

import MyButton from "./Button";

const App = () => {
  return (
    <div>
      <MyButton />
    </div>
  );
};

export default App;

Then, let's import the sendEmail function from sendEmail.js.

// App.js

import sendEmail from "./sendEmail"

On click on the button, we'll call the sendEmail function. Remember to pass the three required arguments to the function: a name, an email and a message.

<MyButton
  onClick={() =>
		sendEmail(
		  "Stephanie",
	    "stephanie@designcode.io",
	    "Hello from my React application!"
	  )
	}
/>;

You can learn how to create a form and get each value the user inputs in the UserInput Hook tutorial of this handbook. Once you get the value of each field, you can pass them to the function in order to send an email with dynamic data, instead of hard-coding strings every time.

Test out your function

Now comes the fun part: to test everything! Click on the button, and open the console to see if you get a success or an error message. You can also double-check by going to your email inbox. You should have received an email, like this one below.

Example of email sent from EmailJS

If you ran into an error, make sure that you copied the right IDs and that you enabled EmailJS to send emails on behalf of you.