EmailJS with Create React App
So I’ve finally got my portfolio finished! I decided to use Create React App to get up and running and a friend told me about EmailJS, which would allow people to send me an email directly from my portfolio site. Luckily for me both of these things provide awesome documentation so getting started was a breeze.
Create React App
What is Create React App? Create React App(CRA) is a tool made by Facebook developers to create a boilerplate React Single Page Application(SPA). This means that you don’t have to configure anything and you can just start working on your code.
Let’s Get Started
If you already know how to get a React app running using Create React App you can skip to the next section about EmailJS. I’m going to be using yarn for this tutorial, as it’s what I use, but npm works too! So first things first, the Create React App docs recommend uninstalling if you’ve previously had it installed globally so you would run: yarn global remove create-react-app. Then all you have to do is run: yarn create react-app my-app. Where my-app is replaced by your application name.
That’s it! Really! You can run yarn start to open the app in development mode. It will be available on http://localhost:3000.
EmailJS
Luckily for us using EmailJS is just as painless as bootstrapping our applications with Create React App. EmailJS allows us to access their API endpoints to send emails, so we don’t have to set up our own server.
Getting Started
You will have to sign up for EmailJS. Signing up is free and you can receive 200 emails for free per month. After you sign up you will select your email service. After that you will create an email template.
This template is the format that the emails will be sent to you in, and if you set up the auto-reply, that’s the format that the auto-reply will be sent in. It is recommended that you change the dynamic variables ({{from_name}}, {{to_name}}, {{message}}), I will go into a little more detail about why that is later, for now just change them.
Now that you have created a template, go to the Email Templates section, you will see the template ID there.
Your going to need your Template ID when you set it up in your React app.
Integration
Now it’s time to integrate EmailJS with your React app. Run yarn add emailjs-com. Then import * as emailjs from 'emailjs-com'; to use it in your React component. It is worth mentioning the documentation says to import emailjs from 'emailjs-com'; but for some reason that didn’t work for me. So my code looks a little like this:
import React from 'react';
import * as emailjs from 'emailjs-com';export default function EmbeddedEmail() { function sendEmail(e) {
e.preventDefault(); emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID',
e.target, 'YOUR_USER_ID')
.then((result) => {
alert('email sent successfully');
}, (error) => {
alert('error sending email');
}); //clears the form after sending the email
e.target.reset();
} return ( <form onSubmit={sendEmail}> <input type='hidden' name='contact_number' /> <label for='name'>Name</label>
<input id='name' type='text' name='from_name'
placeholder='Your name'/> <label for='email'>Email</label>
<input id='email' type='email' name='reply_to'
placeholder='Your email' /> <label for='message'>Message</label>
<textarea id='message' name='message'
placeholder="Let's talk about it..."/> <button type='submit'>send</button>
</form>
);
}
That simple form is very similar to the one taken from the EmailJS documentation. You will name the inputs to match up with what you called your dynamic variables on the EmailJS template. The emailjs.sendForm function comes from the EmailJS SDK, we get that when we import emailjs. If you are using a version earlier than React v17.0 you will have to put e.persist() at the top of the function, to prevent event pooling. This function is performing a network request to EmailJS’s API endpoints, and it returns a promise. In the .then I just have an alert set up to let the user know whether or not their email was sent successfully.
API Keys
You know where to find your Template ID, in order to find your Service ID(also called Access Token) and your User ID you will look under the integration tab of your EmailJS dashboard.
You just put these in as arguments to the emailjs.sendForm function, and you should be good to go!
However, I would like to take a moment to talk about API Keys. If you’re thinking that it’s a bad idea to just have your API Keys directly in your function call, you’re not alone. That was what I was thinking too. Perhaps you’re thinking you should assign them to some environment variables, and put your .env file in your gitignore. That’s a good place to start. In fact, Create React App has wonderful documentation on how to accomplish this! However, you may notice something when you go to look at said documentation…
Hiding your API Keys in environment variables only obfuscates them. So what do you do? Some web hosting services provide a way to set environment variables, such as Heroku and Netlify. Another way would be to set up a proxy server to make the request. However, doesn’t that sort of take away from the convenience of a service like EmailJS?
This is why I reached out to the EmailJS team, and this is what they had to say:
Indeed, someone could copy your code, but they will only be able to send _your_ templates, with your content, and will not be able to send a custom email with their own content (spam). A better way to think of EmailJS is not as a service that allows to send email, but rather as a service that allows triggering pre-built emails from the client side — similar to the way services like Intercom work.
That is why we always recommend composing a template with different dynamic variables, and not using the single dynamic variable and passing whole email content through this.
You can also define a whitelist where you can specify from which domains requests will be processed, requests from other domains will be ignored.
Phew! Crisis averted. We can never be too careful with private information on the internet. This is why EmailJS also provides the whitelisting service, AND you can incorporate reCAPTCHA for added security against spam bots. Also note how they said to use different dynamic variables when composing your template? I told you we would get back to that.
In Conclusion
What do think about services like EmailJS? I think they make it really easy to integrate email into your web app, and I personally wouldn’t hesitate to use it again. Their documentation is really thorough, and the team responded to my email within a week. Integrating EmailJS into my React app was actually one of the easiest parts of making my portfolio website. Next week I’m going to write a blog about one of the hardest parts, which was getting client side routing to work after hosting my app.
