Email from React: Using EmailJS & Gmail to Make ‘Miracles’ Happen

Anyone who’s been through a bootcamp environment knows that more than the imposter syndrome or exhaustion, the thing to fear most are the roadblocks of Project Week.

The five to six–day marathon of coding that is Project Week is not without its moment’s of oddly intense joy: finally fixing that bug that’s been plaguing you for hours or the first time your app a feature runs cleanly. But its lows are truly the lowest. Held hostage by a ticking clock, there’s rarely time to do a deep dive into problem solving or better solutions for handling major bugs—you’re driving edict is frequently just to get something working.

It was in this headspace that I first came across EmailJS, a clever solution to a bafflingly layered problem—how to send email from a React app when your Rails API backend (and ActionMailer) is being uncooperative.

The Problem

My project partner and I were building an app that would allow users to find travel partners to form “straight-passing” couples to making traveling abroad safer. We wanted functionality for a signed in user to be able to request to join a listed trip.

*having headdesk moment*

Initially, we installed ActionMailer on our backend and went through the steps of setting up UserMailer, Views, and our configurations to work with a Gmail account. But we continually ran into a bug that no amount of Googling (in the short amount of time we could allot to the problem) could solve. Our backend was confirming the email was sent—but our email inbox said otherwise.

As with any Project Week roadblock, time to pivot to option B.

EmailJS has entered the chat.

Getting Started with EmailJS

EmailJS essentially acts a client-side email server that allows an application to send and receive email through a connected email account, without having to use the application’s backend. It supports both transaction email services and personal email services (like Gmail, what we used).

Personally, I found EmailJS’s documentation to be frustratingly unclear when it comes to getting started, so below is a brief walkthrough of the steps needed to set up EmailJS with your React app, with minimal hassle.

Create and Account with EmailJS

Navigating to EmailJS, you can quickly set up a free account that allows you to send 200 emails a month. For the purposes of development and testing during Project Week, this is comfortable amount of wiggle room. For anything more involved, you would need to upgrade to a paid account, at one of four pricing tiers.

Next, you’ll need to connect an email service to your EmailJS account:

Email Service options

For our project, we’d already set up a Gmail account (to use with ActionMailer), which made connecting to EmailJS a breeze.

Once this is set, you’re thrown into the User Dashboard for EmailJS where you can get started creating your first email template.

Email templates include one of the best features in EmailJS: dynamic variables. Set off by either double or triple curly brackets, {{}}, dynamic variables are usable in any field in the email template (except for the Settings tab) and allow you to pass and object containing key-value pairs from your React frontend, to the EmailJS server. This allows for something like this, in your React component:

const templateParams = {
   to_name: trip.traveler.name,
   to_email: trip.traveler.email,
   from_name: trip.owner.name,
   from_email: trip.owner.email,
   trip_name: trip.name 
};

To become a series of dynamic variables that are usable to build out your email template in EmailJS: {{ to_name }} , {{ to_email }}, {{from_name}}, {{ from_email }}, {{ trip_name }}.

An email template example in EmailJS

Set Up the EmailJS SDK in React

Now that we have our email template built out, it’s time to set up our frontend to work with EmailJS.

To install the EmailJS SDK (software development kit), you can run the following command in your frontend directory:

$ npm install emailjs-com --save

This kit provides you with two main methods to be utilized in your JavaScript or React frontend: emailjs.send and emailjs.sendForm.

// syntax for a basic send method
emailjs.send(serviceID, templateID, templateParams, userID);
// syntax for sending form details
emailjs.sendForm(serviceID, templateID, templateParams, userID);

Two key things that you’ll notice in both methods is a templateID and a serviceID—these can both be found in your EmailJS account and are unique variable assigned to your connected email service and the specific template that you want to use for your email.

Found in the ‘Settings’ tab of your Template

For our app, we set an onClick event to trigger a function that sent our email:

function notifyNewTraveler(trip) {
   const templateParams = {
      to_name: trip.traveler.name,
      to_email: trip.traveler.email,
      from_name: trip.owner.name,
      from_email: trip.owner.email,
      trip_name: trip.name };
   emailjs.send('service_sEcRet', 'template_sEcRet', templateParams)
      .then(function(response) {
         console.log('SUCCESS!', response.status, response.text);
      }, function(error) {
         console.log('FAILED...', error);
      });
}

The .send and .sendForm functions work asynchronously and therefore allow for promise chaining. In our code we’ve done some simple .then chaining to log success or errors in our console.

And that’s it! In next to no time, we’ve successfully set up the functionality to send an email from our React frontend using EmailJS!

Time to kick back and relax . . . oh wait, there’s still three days of Project Week left.

Resources

Documentation | EmailJS

emailjs-com