DEV Community

Cover image for How to implement email functionality with Node.js, React.js, Nodemailer, and OAuth2
Jared Long
Jared Long

Posted on

How to implement email functionality with Node.js, React.js, Nodemailer, and OAuth2

Nodemailer is a Node.js module that allows users to send messages directly to your email. This article is a guide to help you connect your Node.js server to your GMail account by using OAuth2 in addition to creating a React.js Form to send an email.

Steps:
  • Set up the Node.js Server
  • Set up Nodemailer part 1
  • Configure OAuth2
  • Set up Nodemailer part 2
  • Set up Nodemailer part 3
  • Set up React.js
  • Set up Nodemailer part 4
  • Finish React

To successfully go through this article, you need to have node and npm installed on your device, a code editor, as well as a basic understanding of Node.js and React.js. This guide does go back and forth between the backend, OAuth2, and frontend, so bare with me!

To check for node and npm versions on your system, run the following commands to retrieve the version numbers:

node -v
v15.9.0
npm -v
7.5.3
Enter fullscreen mode Exit fullscreen mode

Setting up the Node.js server

If you have node and npm installed, let’s get started.

Create a directory for your project. For this we will be using nodemailerAPI.
mkdir nodemailerAPI

Go into your new nodemailerAPI directory and create a server.js file, which will serve as our main file.

cd nodemailerAPI
touch server.js
Enter fullscreen mode Exit fullscreen mode

In the terminal, run the following command to initialize a package.json file:

npm init -y
Enter fullscreen mode Exit fullscreen mode

Now let’s install the packages that we will need.
For this project, we will be using Express.js, Nodemailer, and Dotenv.

npm i express nodemailer dotenv
Enter fullscreen mode Exit fullscreen mode

Time for some node.js coding!

We are going to require our packages and run our server using Express.js. Open your directory in your code editor and input the following code:

const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
require("dotenv").config();

const port = 3001;
app.listen(port, () => {
 console.log(`Server is running on port: ${port}`);
});
Enter fullscreen mode Exit fullscreen mode

Once the above code is inputted, you will be able to run your server with the following command and see the console.log:

node server.js
Server is running on port: 3001
Enter fullscreen mode Exit fullscreen mode

Our server is now running, which is great news! Let’s stop the server for now with control-c and move on to our next step, setting up NodeMailer.

Setting up NodeMailer

Nodemailer requires 3 things to begin running:

  1. A transporter object
  2. A mailOptions Object
  3. A sendMail method

Step 1: Lets setup the transporter object:

let transporter = nodemailer.createTransport({
 service: "gmail",
 auth: {
   type: "OAuth2",
   user: process.env.EMAIL,
   pass: process.env.WORD,
   clientId: process.env.OAUTH_CLIENTID,
   clientSecret: process.env.OAUTH_CLIENT_SECRET,
   refreshToken: process.env.OAUTH_REFRESH_TOKEN,
 },
});
Enter fullscreen mode Exit fullscreen mode

Important Note: The user and pass keys are your own email and your email password. We will be getting the clientId, clientSecret, and refreshToken as soon as we set up OAuth2.

As you can see, storing these variables in a .env file are incredibly important to your privacy, so lets create a .env file to store our auth values:

touch .env
Enter fullscreen mode Exit fullscreen mode

Within the .env file, input the following:

EMAIL=youremail@gmail.com
WORD=youremailpassword
OAUTH_CLIENTID=
OAUTH_CLIENT_SECRET=
OAUTH_REFRESH_TOKEN=
Enter fullscreen mode Exit fullscreen mode

Before moving on to step two in the NodeMailer process, let's set up OAuth2 and get those other values!

Configuring OAuth2

Click the following link to go to your Google Cloud Platform dashboard. Near the top left, you will see a dropdown arrow. Once you click it, a project info modal will come up.

On the popup modal, select the new project option.

After clicking the new project button, you will see a new screen with a form to name your new project. For this project, we will be using nodemailerAPI and you can skip the location input box. Click create.

After you click create, it will generate your new project and you will be redirected back to your dashboard.

On the same drop down(top left) as where you went to create the new project, you will be able to see your new project, which you can now select.

Once selected, open the top-left nav menu and select the following:

Once you click the OAuth consent screen, you will be brought to the following page, where you will click external:

After clicking create, you will be taken to a new page where you are required to fill in information regarding your newly created project:

Once you have filled in the above information and click save & continue, you will see the Scopes phase of the OAuth configuration. This page can be skipped so click save and continue here.

The next page is where you will add yourself as the test user:

Add yourself as a test user using your gmail and then click save and continue. The next page will be a summary of all of the inputted information, which is the end of that phase.

Next, click credentials on the left hand side, then click create credentials and select OAuth client ID:

You will be redirected to the following page, where you create an OAuth clientID:
Change the application type to Web Application. We will be using OAuth2 Playground https://developers.google.com/oauthplayground as the Authorized redirect URI:

Once those fields are inputted, you can click create.

Next, you will be presented with your OAuth clientID and Client Secret:

Copy both of those values and return to your .env file to fill in those empty keys.

Now you should only be missing one key-value: OAUTH_REFRESH_TOKEN, so let's go get it.

Head to the OAuth Playground. Once there, click the gear on the upper right hand side of the screen to bring up the configuration. Click Use your own OAuth credentials and input the Client ID and Secret that you just inputted into your .env file.

On the left hand side of the screen, you will see a large list of API’s. Select Gmail API v1 and the first option under the dropdown:

Click authorize API’s on the bottom right. This will bring you to a popup to select your gmail account. Choose your account and select continue on the next page.

Then, a new popup will come up and ask for you to grant your app permission to send email from your gmail. Click allow here.

After you click allow, you will be redirected back to the OAuth playground dashboard. Click exchange authorization code for tokens to receive your refresh token for your .env file:

Our OAuth2 configuration is done, so lets head back to node.

NodeMailer Step 2:

By now, you should have all of your key-value pairs filled out within your .env file. Let's verify the transporter underneath the created transporter from Nodemailer step 1.

transporter.verify((err, success) => {
 err
   ? console.log(err)
   : console.log(`=== Server is ready to take messages: ${success} ===`);
});
Enter fullscreen mode Exit fullscreen mode

Within the terminal, run the server again and check for the console.log:

node server.js 
Server is running on port: 3001
=== Server is ready to take messages: true ===
Enter fullscreen mode Exit fullscreen mode

We get true! Very exciting

Underneath the verification, lets create a test mailOptions object:

let mailOptions = {
 from: "test@gmail.com",
 to: process.env.EMAIL,
 subject: "Nodemailer API",
 text: "Hi from your nodemailer API",
};
Enter fullscreen mode Exit fullscreen mode

Nodemailer Step 3:

Next, lets send the mailOptions through a transporter sendMail method:

transporter.sendMail(mailOptions, function (err, data) {
 if (err) {
   console.log("Error " + err);
 } else {
   console.log("Email sent successfully");
 }
});
Enter fullscreen mode Exit fullscreen mode

Now, lets run the server again and within the terminal, you will see:

node server.js 
Server is running on port: 3001
=== Server is ready to take messages: true ===
Email sent successfully
Enter fullscreen mode Exit fullscreen mode

Check your email as it will be there!

Checkout the full server.js code at this point:

const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
require("dotenv").config();

let transporter = nodemailer.createTransport({
 service: "gmail",
 auth: {
   type: "OAuth2",
   user: process.env.EMAIL,
   pass: process.env.WORD,
   clientId: process.env.OAUTH_CLIENTID,
   clientSecret: process.env.OAUTH_CLIENT_SECRET,
   refreshToken: process.env.OAUTH_REFRESH_TOKEN,
 },
});

transporter.verify((err, success) => {
 err
   ? console.log(err)
   : console.log(`=== Server is ready to take messages: ${success} ===`);
});

let mailOptions = {
 from: "test@gmail.com",
 to: process.env.EMAIL,
 subject: "Nodemailer API",
 text: "Hi from your nodemailer API",
};

transporter.sendMail(mailOptions, function (err, data) {
 if (err) {
   console.log("Error " + err);
 } else {
   console.log("Email sent successfully");
 }
});

const port = 3001;
app.listen(port, () => {
 console.log(`Server is running on port: ${port}`);
});
Enter fullscreen mode Exit fullscreen mode

As of now, there is no way to access nodemailer from the frontend as we do not have a route established. So let’s create that route.

Our transporter.sendMail is already set up so this will be fast! All we are doing is taking the transporter.sendMail and placing it inside of a function that is attached to a route. We have also attached a response action to send a status back, which will help determine the success in a later cURL test.

app.post("/send", function (req, res) {
 let mailOptions = {
   from: "test@gmail.com",
   to: process.env.EMAIL,
   subject: "Nodemailer API",
   text: "Hi from your nodemailer API",
 };

 transporter.sendMail(mailOptions, function (err, data) {
   if (err) {
     console.log("Error " + err);
   } else {
     console.log("Email sent successfully");
     res.json({ status: "Email sent" });
   }
 });
});
Enter fullscreen mode Exit fullscreen mode

Let’s test this new route using cURL.

With your nodemailerAPI server running, open up your terminal, and run the following command in a new terminal tab:

curl -d -url http://localhost:3001/send
Enter fullscreen mode Exit fullscreen mode

After running the cURL command, you will see our response come back in the terminal:

{"status":"Email sent"}
Enter fullscreen mode Exit fullscreen mode

You should see an email in your inbox; Our route is now ready to use on the front-end(kindof)!

======================================================

Setup React.js

React Setup Step 1:

Lets head back to your terminal to create the new react project, which we will call nodemailer-form by running the following command:

npx create-react-app nodemailer-form
Enter fullscreen mode Exit fullscreen mode

Open this new react directory in your code editor and within src/App.js, you will see the default react code that comes with create-react-app. Let’s remove all of it except for the top level div:

For the purpose of this guide, we will only be coding within App.js, which is now blank and ready for us to get to work.

Import & setup the useState Hook

At the top line of App.js, import useState like so:

import { useState } from "react";
Enter fullscreen mode Exit fullscreen mode

Our nodemailerAPI will be looking for a name, email, and message when sending an email. So, let’s set up our useState to reflect that:

const [mailerState, setMailerState] = useState({
   name: "",
   email: "",
   message: "",
 });
Enter fullscreen mode Exit fullscreen mode

Now let's set up a function to handle the change when we type into our future input boxes.

function handleStateChange(e) {
   setMailerState((prevState) => ({
     ...prevState,
     [e.target.name]: e.target.value,
   }));
 }
Enter fullscreen mode Exit fullscreen mode

Next, let’s create a form and attach the handleStateChange to each input box as well as the name and value.

return (
   <div className="App">
     <form>
       <fieldset>
         <legend>React NodeMailer Contact Form</legend>
         <input
           placeholder="Name"
           onChange={handleStateChange}
           name="name"
           value={mailerState.name}
         />
         <input
           placeholder="Email"
           onChange={handleStateChange}
           name="email"
           value={mailerState.email}
         />
         <textarea
           placeholder="Message"
           onChange={handleStateChange}
           name="message"
           value={mailerState.message}
         />
  <button>Send Message</button>
       </fieldset>
     </form>
   </div>
 );
Enter fullscreen mode Exit fullscreen mode

If you run your react project with npm start and view your project on localhost:3000, it is going to be one of the ugliest forms you’ve ever seen. Let’s do a quick fix and add some inline styles to make it sort of look like a contact form:

<div className="App">
     <form
       style={{
         display: "flex",
         height: "100vh",
         justifyContent: "center",
         alignItems: "center",
       }}
     >
       <fieldset
         style={{
           display: "flex",
           flexDirection: "column",
           justifyContent: "center",
           width: "50%",
         }}
       >
         <legend>React NodeMailer Contact Form</legend>
         <input
           placeholder="Name"
           onChange={handleStateChange}
           name="name"
           value={mailerState.name}
         />
         <input
           placeholder="Email"
           onChange={handleStateChange}
           name="email"
           value={mailerState.email}
         />
         <textarea
           style={{ minHeight: "200px" }}
           placeholder="Message"
           onChange={handleStateChange}
           name="message"
           value={mailerState.message}
         />
         <button>Send Message</button>
       </fieldset>
     </form>
   </div>
Enter fullscreen mode Exit fullscreen mode

At this point, your form should look like this:

It is still not going to win any style contest(maybe in the 90’s), but at least it looks the part!

It doesn't work yet so we need to get it to act the part too!
We need to create a function that actually posts to the nodemailerAPI route and attach it to the form:

const submitEmail = async (e) => {
   e.preventDefault();
   console.log({ mailerState });
   const response = await fetch("http://localhost:3001/send", {
     method: "POST",
     headers: {
       "Content-type": "application/json",
     },
     body: JSON.stringify({ mailerState }),
   })
     .then((res) => res.json())
     .then(() => {
       setMailerState({
         email: "",
         name: "",
         message: "",
       });
     });
 };
Enter fullscreen mode Exit fullscreen mode
<form
       style={{
         display: "flex",
         height: "100vh",
         justifyContent: "center",
         alignItems: "center",
       }}
       onSubmit={submitEmail}
        >
Enter fullscreen mode Exit fullscreen mode

Now, our form should be good to go, or is it? If you have tried to submit the form, nothing is going to happen. If you are using Google Chrome and open up your console, you will see the following:

Our mailerState is logging as expected but we are getting a CORs error.

Remember earlier, I mentioned that our backend API route is kind-of ready? We have come to a point where we need to return to our API and fix a couple things.

Nodemailer part 4

Let’s go back to our node server and install our last dependency: CORs. Within the nodemailer API directory, run the following command:

npm i cors
Enter fullscreen mode Exit fullscreen mode

Now, require cors at the top of your server.js file and tell the app to use cors as middleware. The top of your server.js file should look like this:

const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
const cors = require("cors");
require("dotenv").config();

// middleware
app.use(express.json());
app.use(cors());
Enter fullscreen mode Exit fullscreen mode

While we are on the backend, we need to change the mail options to reflect the request from our React side.

Our current mail options looks like this:

let mailOptions = {
   from: "test@gmail.com",
   to: process.env.EMAIL,
   subject: "Nodemailer API",
   text: "Hi from your nodemailer API",
 };
Enter fullscreen mode Exit fullscreen mode

But this does us no good as this is what is sent every time this route is hit, so we need to change it to look like this:

let mailOptions = {
   from: `${req.body.mailerState.email}`,
   to: process.env.EMAIL,
   subject: `Message from: ${req.body.mailerState.email}`,
   text: `${req.body.mailerState.message}`,
 };
Enter fullscreen mode Exit fullscreen mode

Lets also update the transporter.sendMail to send json back to react so we can alert the user of the email being sent:

transporter.sendMail(mailOptions, function (err, data) {
   if (err) {
     res.json({
       status: "fail",
     });
   } else {
     console.log("== Message Sent ==");
     res.json({
       status: "success",
     });
   }
 });
Enter fullscreen mode Exit fullscreen mode

So, our final server.js file should look like this:

const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
const cors = require("cors");
require("dotenv").config();

// middleware
app.use(express.json());
app.use(cors());

let transporter = nodemailer.createTransport({
 service: "gmail",
 auth: {
   type: "OAuth2",
   user: process.env.EMAIL,
   pass: process.env.WORD,
   clientId: process.env.OAUTH_CLIENTID,
   clientSecret: process.env.OAUTH_CLIENT_SECRET,
   refreshToken: process.env.OAUTH_REFRESH_TOKEN,
 },
});
transporter.verify((err, success) => {
 err
   ? console.log(err)
   : console.log(`=== Server is ready to take messages: ${success} ===`);
});

app.post("/send", function (req, res) {
 let mailOptions = {
   from: `${req.body.mailerState.email}`,
   to: process.env.EMAIL,
   subject: `Message from: ${req.body.mailerState.email}`,
   text: `${req.body.mailerState.message}`,
 };

 transporter.sendMail(mailOptions, function (err, data) {
   if (err) {
     res.json({
       status: "fail",
     });
   } else {
     console.log("== Message Sent ==");
     res.json({
       status: "success",
     });
   }
 });
});

const port = 3001;
app.listen(port, () => {
 console.log(`Server is running on port: ${port}`);
});
Enter fullscreen mode Exit fullscreen mode

Our nodemailerAPI part of the guide is complete. Lets tackle the last little bit of our nodemailer-form in React.

Back to our form in React

We just need to update the submitEmail function to wait for the response. It is waiting for the backend to tell it if the status is a fail or if the status is a success and will give an alert accordingly.

const submitEmail = async (e) => {
   e.preventDefault();
   console.log({ mailerState });
   const response = await fetch("http://localhost:3001/send", {
     method: "POST",
     headers: {
       "Content-type": "application/json",
     },
     body: JSON.stringify({ mailerState }),
   })
     .then((res) => res.json())
     .then(async (res) => {
       const resData = await res;
       console.log(resData);
       if (resData.status === "success") {
         alert("Message Sent");
       } else if (resData.status === "fail") {
         alert("Message failed to send");
       }
     })
     .then(() => {
       setMailerState({
         email: "",
         name: "",
         message: "",
       });
     });
 };
Enter fullscreen mode Exit fullscreen mode

So when you try to send an email, you will get the following alert and you will see the status sent from the backend in the console:

By this point, you have successfully implemented Nodemailer with OAuth2, React.js, Node.js, and Express.js. Now you can enjoy adding this to your future projects!

Discussion (51)

Collapse
oicydwa profile image
Chris

This is the best tutorial I have found for reactjs and nodemailer. Thank you for this.

I went through the comments and I saw that you did a followup for someone with react-hook-form. I also am using react-hook-form, and it helped me adapt to my code. However, I am attempting to use my form to send files through nodemailer. No matter where I look, I cannot find any information on getting the file data from react-hook-form into nodemailer. Would you happen to have any insight on this?

Collapse
jlong4223 profile image
Jared Long Author • Edited on

Hey not sure if you've already figured out the react portion of this question but with react-hook-form and files, all you'd have to do is add an input like this to your form:

<input type="file" {...register("file")} />
Enter fullscreen mode Exit fullscreen mode

If you throw a console.log of the data in your onSubmit, you should see the file info there. I'll follow up later on the nodemailer side!

Collapse
oicydwa profile image
Chris • Edited on

I have that part figured out already. I can get the data to my API, but what I can't figure out is how to make the 'file' attach with nodemailer. In my browser I see the file being sent like this:
"documentsUpload: FileList
0: File {name: 'Email Attachment test.txt', lastModified: 1647400270450, lastModifiedDate: Tue Mar 15 2022 22:11:10 GMT-0500 (Central Daylight Time), webkitRelativePath: '', size: 20, …}
length: 1"
But the data sent is blank:
"documentsUpload: { '0': {} }"
And nothing comes through on the email attachments.

Thread Thread
jlong4223 profile image
Jared Long Author • Edited on

Yeah I'm actually running into the same thing. I can see the file updating when I log it but when I send it, it goes through blank. Not super sure why that's happening yet. I'm going to try and see If throwing together a custom onChange for this file input helps. Not sure what's happening in the background of react-hook-form with sending files.

Thread Thread
oicydwa profile image
Chris • Edited on

I actually got this figured out LATE last night. It was NOT a simple solution and was very picky.

Thread Thread
jlong4223 profile image
Jared Long Author

That’s awesome! You mind sharing? Really curious to see what you came up with

Thread Thread
oicydwa profile image
Chris • Edited on

This works with multi-file attachments too.

<Input
   type="file"
   ref={register}
   multiple
   {...register('file')}
   name={'file'}
   onChange={handleChange}
/>
Enter fullscreen mode Exit fullscreen mode

My handleChange()

const handleChange = async (e) => {
    setValue('file', e.target.value.files, {shouldDirty: true});
  }
Enter fullscreen mode Exit fullscreen mode

So, in my API calling method I did:

const fileUpload = require("express-fileupload"); // I don't know why
  app.use(express.urlencoded({ extended: true })); // But this is required. I dropped it
  app.use(fileUpload({
    createParentPath: true                        // and it stopped working.
  }));

 const sendEmail = async (data) => {
    let form = document.querySelector('form');
    const formData = new FormData(form);

    const {file} = data;

    for (let [index, value] of Object.entries(file)){
      formData.append(value.name, file[index]);
    }

    axios({
      method: 'post',
      url: 'http://localhost:3001/send',
      data: formData,
    });
  }
Enter fullscreen mode Exit fullscreen mode

and on the backend:

app.post('/send', async (req, res) => {

  const docs = Object.keys(req.files).map(key => {
    return {
      filename: req.files[key].name,
      content: req.files[key].data
    }
  });

  let mailOptions = {
    from: 'whoever@whereever.net',
    to: 'to-mail@mail.go',
    subject: `Message from: Whoever`,
    html: '<html></html>',
    attachments: docs // <--- All you need here!!
  };

  transporter.sendMail(mailOptions, function (err, data) {
    if (err) {
      res.json({
        status: 'fail',
      });
    } else {
      console.log('== Message Sent ==');
      res.json({
        status: 'success',
      });
    }
  });
});
Enter fullscreen mode Exit fullscreen mode
Thread Thread
jlong4223 profile image
Jared Long Author

Nice! Solid work. Glad you figured it out and thanks for sharing

Thread Thread
oicydwa profile image
Chris

I edited it a dozen times to make sure I had it just right, for posterity. I really hope this helps someone later, because it was a pain to figure out, and searching yielded bits and pieces, but NOTHING on the backend portion.

Thread Thread
jlong4223 profile image
Jared Long Author

Yeah it definitely will. I had a hard time finding quality full stack nodemailer stuff before putting this article together with bits and pieces that I found that worked. What really surprised me is how you were able to receive the file data on the api without needing a middleware package like multer. I’ll for sure be trying this.

Thread Thread
oicydwa profile image
Chris

I had to update. I took a part out I thought was no longer needed, and I was wrong. I guess there is your middleware you were talking about.

Collapse
jlong4223 profile image
Jared Long Author • Edited on

Hey, really happy to hear that this helped you! This gets a little more complex and I'll definitely expand on this specific question with react-hook-form when I get a little more time.

Until then, these resources may help:

You will most likely have to use FormData() to handling attaching a file on the frontend.

Didn't test these comments but this stackoverflow article about FormData & react looks promising on how to do it with a handleChange or handleSubmit function.

On the backend, you will will have to at least use a library like multer to handle those file requests.

I know Vue is very different but I have a Vue.js frontend project where I sent a picture file with FormData():
github.com/jlong4223/the-office-cl...

This is another API of mine where I use multer to handle file requests. In this case, pictures:
github.com/jlong4223/node-cloudina...

I will get back to this, but until this hopefully these help a little 😅

Collapse
shakes103 profile image
Onyema O.

Hi Jared Long, thank you so much for this post. I'm trying to use this process to build a Contact Us form on my NextJs website. I've walked through the tutorial but I'm unable to go beyond running the cURL command;

curl -d -url localhost:3001/send

I keep running into an error:

Invoke-WebRequest : A parameter cannot be found that matches parameter name 'url'.
At line:1 char:9

  • curl -d -url localhost:3000/send
  • ~~~~
    • CategoryInfo : InvalidArgument: (:) [Invoke-WebRequest], ParameterBindingException
    • FullyQualifiedErrorId : NamedParameterNotFound,Microsoft.PowerShell.Commands.InvokeWebRequestComman d

What do I need to do to go past this level?

Collapse
jlong4223 profile image
Jared Long Author

Hmm I think you could try adding the http:// to the beginning of the url:
curl -d -url http://localhost:3001/send

Collapse
jlong4223 profile image
Jared Long Author • Edited on

If that doesn't work, you also don't have to use cUrl and could try hitting the route with Postman if you have it.
Or if you use VSCode, you could install the ThunderClient Extension for testing API routes directly inside of VSCode. marketplace.visualstudio.com/items...

Thread Thread
shakes103 profile image
Onyema O.

Okay. I will try this instead and see how it turns out. Thanks!

Collapse
bawbaw profile image
Naomi Mwangi

Thanks!! This works like a dime!

Collapse
kpierrelys profile image
Kpierrelys

Hey Jared, love this blog post! It was very helpful. Is there any configuration changes I need to do when deploying a project after implementing this? I'm deploying a project to heroku using this. Let me know! thanks

Collapse
jlong4223 profile image
Jared Long Author

Hey thanks for checking it out and glad it helped! Everything should work as expected . Just don't forget to set your env variables for heroku :)

Collapse
kpierrelys profile image
Kpierrelys

Thanks Jared I was able to deploy 🙌🏽

Thread Thread
juansebastianm profile image
Juan Sebastián Mendoza

Hey! could you please tell me how you deployed it to Heroku?
I have the frontend on Netlify and when I try to deploy all the code related to express, nodemailer and all that, the deployment fails.
stackoverflow.com/questions/704422...

Thread Thread
kpierrelys profile image
Kpierrelys

Hey Juan I am not to familiar with netlify but heres is a blog post breaking it down: dev.to/lindakatcodes/a-beginners-g...

Let me know if that works.

There is also another way to deploy your server (node.js). I haven't tried this way yet but this way seems a lot less complicated. Check out this video for the step by steps: youtu.be/ENrzD9HAZK4 fast forward to 14:55 where he starts explaining how to deploy your server.

Hope this helps!

Collapse
rasah673 profile image
RaSah673

Hi Jared, thank you for this tutorial, it is very usefull for beginners like me.

I tried it, the server.js functions as you instructed. however, my App.js gives error at the first testing step.

Could you please, share the final view of App.js code please?

Many thanks,

Collapse
jlong4223 profile image
Jared Long Author

Yeah for sure. Here is the entire App.js file:

import { useState } from "react";

function App(props) {
  const [mailerState, setMailerState] = useState({
    name: "",
    email: "",
    message: "",
  });

  function handleStateChange(e) {
    setMailerState((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  }

  const submitEmail = async (e) => {
    e.preventDefault();
    console.log({ mailerState });
    await fetch("http://localhost:3001/send", {
      method: "POST",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({ mailerState }),
    })
      .then((res) => res.json())
      .then(async (res) => {
        const resData = await res;
        console.log(resData);
        if (resData.status === "success") {
          alert("Message Sent");
        } else if (resData.status === "fail") {
          alert("Message failed to send");
        }
      })
      .then(() => {
        setMailerState({
          email: "",
          name: "",
          message: "",
        });
      });
  };

  return (
    <div className="App">
      <form
        style={{
          display: "flex",
          height: "100vh",
          justifyContent: "center",
          alignItems: "center",
        }}
        onSubmit={submitEmail}
      >
        <fieldset
          style={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            width: "50%",
          }}
        >
          <legend>React NodeMailer Contact Form</legend>
          <input
            placeholder="Name"
            onChange={handleStateChange}
            name="name"
            value={mailerState.name}
          />
          <input
            placeholder="Email"
            onChange={handleStateChange}
            name="email"
            value={mailerState.email}
          />
          <textarea
            style={{ minHeight: "200px" }}
            placeholder="Message"
            onChange={handleStateChange}
            name="message"
            value={mailerState.message}
          />
          <button>Send Message</button>
        </fieldset>
      </form>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode
Collapse
jlong4223 profile image
Jared Long Author • Edited on

Is it an error when trying to run/start your client side? Or is it an error when trying to send an email?

Collapse
arejasverduras profile image
Arejas • Edited on

Hi Jared,
Thank you very much for this great tutorial, it seems like a great workable solution for contact forms and after learning react and node, a great first project for a working react app.

Everything works great locally.
However, getting the app to work in heroku is a no-no.. I think the problem is related to the package.json file.
After pushing to heroku the server.js files starts, however the app does not load (nothing loads).
After trying to push changes to heroku i keep getting a git-push-error-pre-receive-hook-declined

two things of my concern:

  • In the first step of creating the React app, i've created the app WITHIN the nodemailerAPI folder. This eventually leads to having two package.json files. Was this supposed to be this way? See the image with the folder structure.
  • i might have messed up the package.json file(s) by trying to create them using npm init, prior to deploying to heroku. Could you post how both of them should look like? I can update the versions of the dependencies ofcourse.

What i fail to understand is how the react app will actually gets build.. the procfile on heroku only specifies server.js

Please forgive my noobiness on this project :) hope you can help me out!

I will post the package.json code below:

I hope you can help me out!

Thanks!
Arejas

outer package.json (from nodemailerAPI
{
"name": "arejoreactcontact",
"version": "1.0.0",
"description": "contactreactapp",
"main": "server.js",

"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^16.0.0",
"express": "^4.17.3",
"nodemailer": "^6.7.3",
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},

"devDependencies": {},
"repository": {
"type": "git",
"url": "git+github.com/arejasverduras/reactnod..."
},
"bugs": {
"url": "github.com/arejasverduras/reactnod..."
},
"homepage": "github.com/arejasverduras/reactnod..."
}

package.json inner (react app nodemailer-form)
{
"name": "nodemailer-form",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Collapse
jlong4223 profile image
Jared Long Author

Hey no problem at all! Deploying can be its own beast. I'd definitely recommend separating the two projects from each other, especially when deploying to Heroku. React has to go through a special deployment/build process for Heroku.

To deploy a react app to heroku, run this:

heroku create appName-here --buildpack mars/create-react-app
Git push heroku master
Enter fullscreen mode Exit fullscreen mode
Collapse
arejasverduras profile image
Arejas

Thank you Jared! I guess i will try to build some other react apps first, keep getting all kinds of errors. Trying to be ahead of my lurning curve i guess.. Thanks for the response and the tutorial, i will pick this project up later and deploy it!

Collapse
harrydarwin profile image
Harry Guloien

Hi Jared - great article! I am however at the end and getting an error. I was able to send mail without the front end but now it doesnt seem to work - image of the error is attached! Let me know if you need more info to help!

thanks

Collapse
jlong4223 profile image
Jared Long Author

Hey! I actually don’t see a pic attached. I see a message that says ‘error’

Collapse
harrydarwin profile image
Harry Guloien

error

Collapse
dj_d2d609399a691e profile image
DJ • Edited on

Thanks for this awesome guide.

One question:
The from field in the emails that I am receiving is the address that I used to set up the OAuth. Are your from fields in the received emails the actual addresses instead?

Nodemailer documentation (nodemailer.com/usage/using-gmail/) says, "Gmail also always sets authenticated username as the From: email address. So if you authenticate as foo@example.com and set bar@example.com as the from: address, then Gmail reverts this and replaces the sender with the authenticated user." so I was wondering if it is possible to have the actual from address instead of the authenticated one.

Collapse
jlong4223 profile image
Jared Long Author

Hey DJ! Unfortunately, I haven't figured it out with Gmail and based on the docs, I don't know if it actually is possible, which is why I did a work around with adding the user's email to the subject 😅

Collapse
ankurssj profile image
Ankur-ssj

hey how can we add attachments(pdf specifically ) can you guide me in that?

Collapse
jlong4223 profile image
Jared Long Author • Edited on

@ankurssj Hey not sure if you've figured this out or not but I have figured out the backend portion. I'm sure to wire up using attachments with the frontend will require multer to handle file requests and potentially something like Cloudinary for storing & creating urls for the attachments.

For now, here is the backend with images/files saved directly within the server project.

Essentially, you need to create an array of attachment objects (here I named mine attachmentItems) and then create an attachment key within the mailOptions object and its value is the returned result of mapping the attachmentItems.

upload-nodemailer

Collapse
jlong4223 profile image
Jared Long Author

Hey, great question and thanks for asking. Actually, I haven't done this but I really want to figure it out now! I'll look into it to expand my article and/or make a part two.

Collapse
andrewbaisden profile image
Andrew Baisden

This is a good walkthrough thanks for sharing.

Collapse
brzezinskibartosz profile image
brzezinskibartosz • Edited on

Hi Jared, thanks for sharing this tutorial. On my website i'm using react hook form. After implementation bigger part of your code, input boxes don't allow me type in anything. For test i didn't set value as {mailerState.yourName} for other inputs. I can send email but it's empty. Please take a look for image in attachment.
Do you know what could be wrong? i'm pasting part of my code. I'll be very grateful for any hint. Cheers!

const { register, handleSubmit, formState: { errors }  } = useForm({
    mode: 'onBlur',
});


const [mailerState, setMailerState] = useState({
    yourName: "",
    email: "",
    phone: "",
    url: "",
    message: "",
});

function handleStateChange(e) {
    setMailerState((prevState) => ({
        ...prevState,
        [e.target.yourName]: e.target.value,
        [e.target.email]: e.target.value,
        [e.target.phone]: e.target.value,
        [e.target.url]: e.target.value,
        [e.target.message]: e.target.value,
    }));
}


const submitEmail = async(e) => {
    e.preventDefault();
    console.log({ mailerState });
    const response = await fetch("http://localhost:3001/send", {
        method: "POST",
        headers: {
            "Content-type": "application/json",
        },
        body: JSON.stringify({ mailerState }),
    })
    .then((res) => res.json())
    .then(async (res) => {
        const resData = await res;
        console.log(resData);
        if (resData.status === "success") {
            console.log("Message Sent");
        } else if (resData.status === "fail") {
            console.log("Message failed to send");
        }
    })
    .then(() => {
        setMailerState({
            yourName: "",
            email: "",
            phone: "",
            url: "",
            message: "",
        });
    });
};


return (
    <ContactsContainer lightBg={lightBg} id='contact'>
        <TextWrapper>
            <TopLine>CONTACTS</TopLine>
            <Heading>Heading</Heading>
            <Subtitle>Text</Subtitle>
        </TextWrapper>
        <form onSubmit={handleSubmit(submitEmail)}>
            <Column1 className="column1">
                <FormGroup className="formGroup">
                    <label className={errors.yourName ? "notok" : "ok"}>Your Name</label>
                    <input className={errors.yourName ? "notok" : "ok"}
                        type="text"
                        onChange={handleStateChange}
                        name="yourName"
                        value={mailerState.yourName}
                        {...register("yourName", { 
                            required: true,
                            minLength: 5 })}
                    />
                    {errors.yourName?.type === 'required' && (<p> 
                        Your name is required.</p>
                    )}
Enter fullscreen mode Exit fullscreen mode
Collapse
jlong4223 profile image
Jared Long Author • Edited on

@brzezinskibartosz
Hey yeah totally. So react-hook-form actually makes things a little easier and requires less code. You actually wont need to specify a handleChange function as react-hook-form will handle that for you & you also wont need the useState hook involved.

Here's a few things you'll need to try:

  • update your input - remove the value & onChange:
 <input
     placeholder="Name"
     name="name"
     {...register("name", { required: true, minLength: 5 })}
  />
Enter fullscreen mode Exit fullscreen mode
  • update your submitEmail function - remove the mailerState being sent and update the parameter name to anything else (named mine data in this example) & e.preventDefault as react-hook-form actually does that for you as well and will throw an error if you leave it. not sure how to reset the values after submitting - youll probably want to check the docs
  async function submitEmail(data) {
    await fetch("http://localhost:3001/send", {
      method: "POST",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({ data }),
    })
      .then((res) => res.json())
      .then(async (res) => {
        const resData = await res;
        console.log(resData);
        if (resData.status === "success") {
          alert("Message Sent");
        } else if (resData.status === "fail") {
          alert("Message failed to send");
        }
      });
  }
Enter fullscreen mode Exit fullscreen mode
  • update the API to look for the data being sent in the req instead of mailerState
  let mailOptions = {
    From: `${req.body.data.email}`,
    to: process.env.EMAIL,
    subject: `Message from: ${req.body.data.email} (${req.body.data.name})`,
    text: `${req.body.data.message}`,
  };
Enter fullscreen mode Exit fullscreen mode
Collapse
brzezinskibartosz profile image
brzezinskibartosz • Edited on

Hi Jared, actually i didn't have to change it. Most likely i had bug in handleStateChange function because i declared to many variables.

placeholder="Name"
name="name"
{...register("name", { required: true, minLength: 5 })}
/>

Below 'register' argument i added onChange and value. Everythinhg is working now.

Thanks!
Bartosz

Thread Thread
jlong4223 profile image
Jared Long Author

Nice work, thats great to hear!

Collapse
shifi profile image
Shifa Ur Rehman

Goldmine of an article!

Collapse
kiquino profile image
kiquino

This was really well explained and incredibly helpful for my self learning journey. Thank you a lot

Collapse
yandev profile image
Yan

thanks a lot for your tuto, it's cristal clear !

Collapse
godswillcode profile image
Godswillcode

It didnt work for me

it saying Error Error: self signed certificate in certificate chain

Collapse
senoulynn profile image
Senou Lynn

Hey! Good news! You've done everything right. What's stopping this from working is most likely your anti-virus. While I don't fully understand CORS, it has something to do with your anti-virus flagging that type of communication on your local server. I was able to bypass this by going into my Avast anti-virus => Settings => Protection => Core Shields => Mail Shield => Unclick scan outbound emails (SMTP).

Please do some research before doing this because I'm not 100% certain as to how this affects your machines security.

Collapse
godswillcode profile image
Godswillcode

Ok thanks bro, its now working

Collapse
jlong4223 profile image
Jared Long Author

Interesting - I haven't seen this error! How far are you able to get before you run into this error?

Collapse
konferbe profile image
Steve Lebleu

Thanks for sharing ! Here a package which can help with email sending in node.js environment. One library for many providers.

GitHub logo konfer-be / cliam

Agnostic transactional email sending in Node.js environment

Cliam

Build Status Coverage Status CodeFactor Grade Requires.io (branch) GPL Licence

Transactional emails with a kick

Agnostic transactional email sending in Node.js environment 💥 💪 💊

> Why ?

To improve and facilitate the implementation, flexibility and maintenance of transactional emailing tasks.

> Features

  • Agnostic transactional email sending using web API or SMTP server. One input, one output.
  • Configuration based, not implementation based : easy switch between different modes.
  • Normalized transactions events.
  • Securized payloads.
  • Customisable default templates.

> Table of contents

> Requirements

  • Node.js >= 14.16.0
  • NPM >= 6.14.11

> Getting started

Install

> npm i cliam --save
Enter fullscreen mode Exit fullscreen mode

Configure

Create a .cliamrc.json file on the root of your project.

> touch .cliamrc.json
Enter fullscreen mode Exit fullscreen mode

Define a minimalist configuration in .cliamrc.json newly created:

{
  "consumer": {
    "domain": "https://www.john-doe.com"
  }
  "mode": {
    "api": {
      "name"
Enter fullscreen mode Exit fullscreen mode
Collapse
asalduur profile image
asalduur

this was great help, thank you!

Collapse
grom48 profile image
Viktor

Is it possible that you add source code of this project. thanks