Email from your JavaScript? There’s an App for that.

It’s 2021 and JavaScript has taken over the development landscape. At this point there is a JavaScript library or framework for everything. So you have a few different options if you want to send emails directly from your browser side code. For example you can always just include your email handle in a link. If your users have their system set up correctly a simple click will open their email account with your email in the mailto: slot(aka send). However as a developer this seems less than ideal because it requires that your users have the proper set up to handle the action.

The good news is that as a developer new options are always popping up to make your life easy. EmailJS is a new javascript library in the EmailAPI category. It sets up all the backend stuff for you. With this you can send email from a javaScript form into your chosen email account.

As a developer I love this JavaScript library and had it submitting to my email in under an hour of tooling around. You will need to install it on your local system with npm i emailjs-com --save in your terminal.

Once this has finished installing you will need to sign up for a free account. On the landing page after you signup we should look at the docs; like anything else in development the documentation is the best place to start. EmailJS is no different and you should dive in starting there.

I opt for the React option as it is my favorite JavaScript library. We will go into this section of the docs to give us information on what to do.

I will tell you this takes you into a React component that you will have to add to your react files. You will need import emailjs from 'emailjs-com' at the top of the file along with the requisite import React from 'react'. This React component is a functional react component however I prefer class components and it will work just fine to convert it to such. I did this to utilize setState and other methods part of the react class syntax.

You will need to include your_service_id, your_template_id, and your_user_id in your React file. You will find these on your EmailJS account profile.

Now that we have an understanding of our React files lets hookup the light switches and other electrical work.

On your signup/sign-in landing page click on Email Services. From here you will choose your email that will have the mail sent into.

They offer many services. I will be selecting Gmail as google is by far the best in the industry for quality and speed.

Here you select a carrier the prompts are self explanatory. The next step is the email templates.

For the email to submit properly these variables need to be the same as in your react file.

You will need to change from_name to the same as in your file: user_name.

For react you will have to add an additional {} so your end product will look like something like this: