DEV Community

Cover image for The Beginner's Guide To Node Mailer With Nodejs
Arafat
Arafat

Posted on

The Beginner's Guide To Node Mailer With Nodejs

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine, and Node.js provides an easy way to send emails using its built-in library called nodemailer.

To use nodemailer, you will need to install it first. You can do this by running the following command in your terminal:

npm install nodemailer
Enter fullscreen mode Exit fullscreen mode

Once nodemailer is installed, you can use it to send emails in your Node.js application by requiring the library and creating a transporter object.

const nodemailer = require('nodemailer');

// create a transporter object
const transporter = nodemailer.createTransport({
  service: 'gmail', // use a service that allows you to send emails (e.g. Gmail, Outlook, etc.)
  auth: {
    user: 'your@email.com', // your email address
    pass: 'yourpassword' // your email password
  }
});
Enter fullscreen mode Exit fullscreen mode

Next, you can use the transporter object to send an email by calling the sendMail function and passing it an object with the email details.

const mailOptions = {
  from: '"Your Name" <your@email.com>', // sender address
  to: 'recipient@email.com', // list of receivers
  subject: 'Subject Line', // Subject line
  text: 'Plain text content', // plain text body
  html: '<b>HTML</b> content' // html body
};

// send the email
transporter.sendMail(mailOptions, (error, info) => {
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});
Enter fullscreen mode Exit fullscreen mode

That's it! You can now send emails using Node.js and nodemailer.

Here is the full code example:

const nodemailer = require('nodemailer');

// create a transporter object
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your@email.com',
    pass: 'yourpassword'
  }
});

const mailOptions = {
  from: '"Your Name" <your@email.com>',
  to: 'recipient@email.com',
  subject: 'Subject Line',
  text: 'Plain text content',
  html: '<b>HTML</b> content'
};

// send the email
transporter.sendMail(mailOptions, (error, info) => {
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});
Enter fullscreen mode Exit fullscreen mode

Here is an example of how you can use nodemailer with React to send emails from a form:

import { useState } from 'react';
import nodemailer from 'nodemailer';

function ContactForm() {
  const [formState, setFormState] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });

  const [errorMessage, setErrorMessage] = useState('');

  const handleChange = event => {
    setFormState({
      ...formState,
      [event.target.name]: event.target.value
    });
  };

  const handleSubmit = event => {
    event.preventDefault();

    if (!formState.name || !formState.email || !formState.subject || !formState.message) {
      setErrorMessage('All fields are required.');
      return;
    }

    // create a transporter object
    const transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        user: 'your@email.com',
        pass: 'yourpassword'
      }
    });

    // create the email options
    const mailOptions = {
      from: `"${formState.name}" <${formState.email}>`,
      to: 'recipient@email.com',
      subject: formState.subject,
      text: formState.message
    };

    // send the email
    transporter.sendMail(mailOptions, (error, info) => {
      if (error) {
        console.log(error);
      } else {
        console.log('Email sent: ' + info.response);
      }
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input
        type="text"
        name="name"
        value={formState.name}
        onChange={handleChange}
      />
      {errorMessage && <div>{errorMessage}</div>}

      <label htmlFor="email">Email:</label>
      <input
        type="email"
        name="email"
        value={formState.email}
        onChange={handleChange}
      />

      <label htmlFor="subject">Subject:</label>
      <input
        type="text"
        name="subject"
        value={formState.subject}
        onChange={handleChange}
      />

      <label htmlFor="message">Message:</label>
      <textarea
        name="message"
        value={formState.message}
        onChange={handleChange}
      />

      <button type="submit">Send</button>
    </form>
  );
}

export default ContactForm;
Enter fullscreen mode Exit fullscreen mode

I hope this helps! Let me know if you have any questions.

Top comments (0)