Advanced Email Functionality with Node.js, React.js, Nodemailer, and OAuth2 in 2023 (1)
Email functionality is crucial for modern web applications, facilitating processes like password resets, order confirmations, and contact forms. This guide explores the integration of email capabilities into a Node.js and React.js app using technologies such as Node.js, Express.js, React.js, Nodemailer, and OAuth2.
Overview & Goals
By the end of this guide, you will have developed a production-ready email API with React and Node.js, achieving key goals:
Connect Node.js to Gmail securely using OAuth2 for authentication.
Create reusable email templates with HTML/CSS.
Build a React form for capturing user data.
Utilize Nodemailer to construct and send emails.
Implement email scheduling and queuing capabilities.
Deploy the API and frontend on platforms like Vercel or Netlify.
Prerequisites
Ensure Node.js and npm are installed, and a basic understanding of JavaScript is recommended.
Setting up the Node.js Email API
Install Dependencies
bash
mkdir node-email-api
cd node-email-api
npm init -y
npm install express nodemailer dotenv
Create the Express App
javascript
// index.js
const express = require('express');
const nodemailer = require('nodemailer');
require('dotenv').config();
const app = express();
const port = 3000;
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
Environment Variables
Create a .env file in the project root:
makefile
EMAIL_USER=yourgmailusername
EMAIL_PASS=yourgmailpassword
Creating a Development SMTP Server
Install nodemailer-stub-transport:
bash
npm install nodemailer-stub-transport
In index.js:
javascript
// Create dev transport
const devTransport = {
host: "localhost",
port: 1025,
auth: {
user: process.env.EMAIL_USER,
pass: process.env.EMAIL_PASS
}
};
const devAccount = await nodemailer.createTestAccount();
const transporter = nodemailer.createTransport(devTransport);
Sending Test Emails
javascript
// Send email
const info = await transporter.sendMail({
from: '"App Name" <noreply@example.com>',
to: 'test@example.com',
subject: 'Test email',
text: 'Hello world?',
html: '<b>Hello world?</b>'
});
console.log('Message sent: %s', info.messageId);
Interested in development team ondemand? We’re HERE to help!