DEV Community

Cover image for How to send emails from a React application without a backend server
JAReichert
JAReichert

Posted on

How to send emails from a React application without a backend server

I was recently part of a team project where we wanted to send emails confirming registration to our application without using a backend server. Thanks to my best buddy, Google, we were able to find a way.

Email JS is a free service that allows you to send emails from your applications using only client-side technologies. No server is needed. And best of all? It's free.

1.) Go to https://www.emailjs.com/ and sign up for your free account.

Image description

2.) After signing up for your free account, you will find the dashboard.

Image description

3.) If you already have a gmail, yahoo, or even an old-school aol email account, you can use it in conjunction with this tool. Simply click on the Add New Service button and then choose the email provider you use.

Image description

NOTE: EmailJS allows you to send 200 emails a month for free. If you need to send more, there is a fee. See the pricing guideline below.

Image description

4) To begin, choose your email provider by clicking the "Connect Account" button. Then, push the "Create Service" button in the lower right hand corner.

Image description

5) Now click on the Email Templates on the left. Then click the "Create New Template" to set up your email message. Notice that EmailJS allows you to interpolate individualized information with two curly braces.

Image description

6) Now that your form email is set up and ready to go, you need to jump into your terminal and type the following where your react project lives.

Image description

7) Inside your component you will type the following code.

Image description

8) Pay special attention to the 'YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', and 'YOUR_PUBLIC_KEY' portion of the code.....

Image description

10) These three placeholders need to be replaced with your individualized information.

The 'YOUR_SERVICE_ID' needs to be replaced with the Service ID which you can find in the Email Services portion of the dashboard.

Image description

11) The 'YOUR_TEMPLATE_ID' can be found back on the "Email Templates" portion of the dashboard.

Image description

12) The 'YOUR_PUBLIC_KEY' portion needs to be replaced with your public key. This can be found in the Account section located on the dashboard.

Image description

13) Once you click the Account link, you will find 'YOUR_PUBLIC_KEY' where it says "Public Key."

Image description

14) Now all you need to do is capture a form where you can capture the information to send an email. It's that easy!

In conclusion:
That is just the "bare bones" of what EmailJS can provide for you. In addition to basic email services, it can also send emails with attachments, add CAPTCHA verification, and even allow auto-replies. Plus, EmailJS not only works with React, but also vanilla JS, Wix, Vue.js, and Angular.

I hope you found this article helpful in adding some functionality to your application. Happy coding!

Top comments (2)

Collapse
 
xr0master profile image
Sergey Khomushin

Thank you for your very nice and detailed article!

Collapse
 
jareichert profile image
JAReichert

You are welcome, thank you for taking the time to read it!