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!