Send Email from your React app with Nodemailer

Sending email is one of the most demanded features in most applications. Here we will implement one ourselves.

React(hooks) + Tailwind + Nodemailer

Here we will implement a request access feature for our demo application. When a users can go into our application they can fill the form with name email and message, and submit it. We will configure and send that particular form data directly into our desired email.

For the form we will implement it using React hooks alongside with Tailwind CSS. Let’s take a look at the form we will be making.

Our Simple Form UI

Frontend

Let’s start by creating a component for our form. Here we will make a component and use our tailwind to spice up the styles and make necessary imports and changes to make it look something like we have above. After the necessary changes our requestAccess.js component looks like below

Github Gist Link

Here we have just added some styles that we have imported from Tailwind to make our UI look more better. We will now move ahead to make the use of useState hook in React to hook up our values that we have in our input fields. After that we just add our API route that we will be creating later to the URL endpoint with the help of native fetch method.

Github Gist Link

Here in the code we just added our asynchronous function to onSubmit handler which ultimately hits our API endpoint we will make for our backend with the message and the email.

Backend

In our backend we will be creating a simple server which will receive our object sent from our react app and trigger an email to the desired person with the details filled in UI. For this we will be using nodeMailer. Before we will start writing lets import our necessary packages we will use

yarn add express nodemailer nodemon

Express is our framework of choice which is totally easy to get started. Nodemailer is the library we will be using sending emails to the desired address and nodemon to restart our server when we make changes to our code. Now lets create app.js file, where we will write all our code (We wont be creating a separate route neither .env files for simplicity and ease).

We will now import our desired packages here and create a SMTP protocol in order for Nodemailer to send mails. This protocol is used by email hosts such as gmail, hotmail etc.

Github Gist Link

Next, we will verify SMTP connection using the verify callback. And we will log our errors in console as well.

Github Gist Link

Finally, we can add our POST route to send the content of the form that are filled in the UI. After all this are set we can have our working mini application which sends us email with the data filled for our Application UI. Lets take look at the final code we have here

Conclusion

You have just built a form that can send message to out desired email address. This is one of the most common feature inside our application. We can tweak and make this much better if needed as well. You can also find the code in the repository here.

Happy Coding!

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!