NodeMailer Integrated With React.js
Node.js is a popular platform for building server-side applications, while React is a popular framework for building user interfaces on the web. Combining these two technologies can lead to powerful and scalable web applications. One important aspect of web applications is the ability to send emails. Node Mailer is a popular email library for Node.js that makes it easy to send emails programmatically. In this blog post, we will explore how to integrate Node Mailer with React to send emails from a React-based web application.
Before we get started, there are a few prerequisites that we need to install:
- Node.js: Node.js is required to run the Node Mailer library.
- React: We will be building our application with React.
- Nodemailer: We will use Nodemailer to send emails.
Once you have these prerequisites installed, we can get started with building our application.
Building a React Application
To get started, let’s create a new React application using create-react-app. Open your terminal and run the following command:
npx create-react-app node-mailer-react
This will create a new React application in a folder called node-mailer-react. Navigate to this folder by running:
cd node-mailer-react
Now, let’s install the nodemailer library by running the following command:
npm install nodemailer
This will install the nodemailer library in our project, and we can start using it to send emails.
Sending Emails with NodeMailer
To send emails with NodeMailer, we need to create a new transport object that defines the settings for our email server. We can create a new transport object by running the following code:
const nodemailer = require(‘nodemailer’);
const transporter = nodemailer.createTransport({
host: ‘smtp.gmail.com’,
port: 465,
secure: true,
auth: {
user: ‘your-email@gmail.com’,
pass: ‘your-email-password’
}
});
In this code, we create a new transporter object that connects to the Gmail SMTP server. We also provide our email credentials so that NodeMailer can authenticate our account when sending emails.
Now that we have a transporter object, we can send emails by calling the sendMail method on the transporter object. Here is an example of how to send a simple email:
const mailOptions = {
from: ‘your-email@gmail.com’,
to: ‘recipient-email@gmail.com’,
subject: ‘Test Email’,
text: ‘This is a test email’
};
transporter.sendMail(mailOptions, function(error, info){
if(error) {
console.log(error);
} else {
console.log(‘Email sent: ‘ + info.response);
}
});
In this code, we create a new mailOptions object that defines the settings for our email, including the recipient email address, the subject, and the body of the email. We then call the sendMail method on our transporter object, passing in our mailOptions object as the first argument.
When the email is sent, the callback function is called with two arguments: an error object (if there is an error) and an info object that contains information about the email that was sent. We log the info.response object to the console to confirm that the email was sent successfully.
Integrating NodeMailer with React
Now that we know how to send emails with NodeMailer, let’s integrate this functionality with our React application.
First, let’s create a new file in our src folder called sendEmail.js. This file will contain our NodeMailer code for sending emails. Here is an example of what our sendEmail.js file might look like:
const nodemailer = require(‘nodemailer’);
const transporter = nodemailer.create
Source Code
const express = require(“express”);
const bodyParser = require(“body-parser”);
const nodemailer = require(“nodemailer”);
const cors = require(“cors”);
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get(‘/’, (req, res) => {
res.send(‘Testing Success’)
})
app.post(“/api/form”, (req, res) => {
console.log(req.body);
//Formating content to be send
var emailcontent = `<h3> Contact Details</h3>
<ul>
<li>name: ${req.body.name}</li>
<li>email : ${req.body.email}</li>
</ul>
<h2>Message</h2>
<p>message: ${req.body.subject}</p>
`;
var transporter = nodemailer.createTransport({
service: “gmail”,
auth: {
user: “funnyboy@gmail.com”,
pass: “wmcgdhsdfyhtfhfgshss”
},
//Hear Pass Mentions your Gmail App Password From Your Account
Refer Hear : https://www.getmailbird.com/gmail-app-password/
tls: {
rejectUnauthorized: false
}
});
//Preparing the mailOptions object
var mailOptions = {
from: “funnyboy@gmail.com”,
to: “funnyboy@gmail.com”,
subject: “New Message”,
text: req.body.subject,
html: emailcontent
};
//Sending email using transporter function
transporter.sendMail(mailOptions, function(error, info) {
if (error) {
console.log(error);
return res.send({
result: false,
message: “Mail Not sent”
});
} else {
console.log(“Email sent: ” + info.response);
return res.send({
result: true,
message: “Mail sent”
});
}
});
// return res.send({
// result: true,
// message: “Mail sent”
// });
});
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log(`server listening on port ${PORT}`);
});