How to test react email

Combining React Email and Nodemailer for Efficient Email Templating

Sending emails is a core functionality for many web applications, whether it's for user authentication, marketing campaigns, or simply updating users on their accounts. Typically, email design and integration into applications can be a tedious process. With the @react-email/render library and Nodemailer, developers can now efficiently design and send their emails using the React framework.

In this blog post, we'll guide you through the process of crafting an email using React Email and sending it via Nodemailer.

1. Setting Up the Stage

To get started, you'll need to ensure that your environment has Node.js and npm installed. If you have those in place, it's time to get the necessary packages. Here's how to install them:

npm install @react-email/render nodemailer

2. Designing the Email with React

The next step is to design your email template. Using React for this task makes the process very flexible and easy.

Create a file named email.jsx. This is where you'll be designing your email. For demonstration purposes, we'll create a simple email with a button linking to a website.

import * as React from 'react';
import { Html } from '@react-email/html';
import { Button } from '@react-email/button';

export function Email(props) {
  const { url } = props;

  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
}

In the snippet above, we're using the Html and Button components from the @react-email library to structure our email. React's prop-driven approach lets us easily customize the email content.

3. Sending the Email

Now, it's time to breathe life into our email and send it to a recipient. We will use the free email testing platform MailSlurp to send and receive the email.

In your main file, start by importing the necessary modules:

import { render } from '@react-email/render';
import nodemailer from 'nodemailer';
import * as Mailslurp from 'mailslurp'
import { Email } from './email';

Then we can create an inbox to send from using MailSlurp:

// create an inbox using MailSlurp client
const mailslurp = new MailSlurp({ apiKey: process.env.API_KEY! });
const inbox = await mailslurp.createInboxWithOptions({
  inboxType: CreateInboxDtoInboxTypeEnum.SMTP_INBOX,
});
// get smtp access details for mailbox
const server = await mailslurp.inboxController.getImapSmtpAccess({
  inboxId: inbox.id,
});

You can set up the email transporter with Nodemailer to point to our MailSlurp server as shown below:

const transporter = nodemailer.createTransport({
  port: server.smtpServerPort,
  secure: false,
  auth: {
    user: server.smtpUsername,
    pass: server.smtpPassword,
    type: 'PLAIN',
  },
});

Next, convert the React email template to an HTML string using the render method from @react-email/render:

const emailHtml = render(<Email url="https://example.com" />);

Lastly, configure your email's sender, receiver, and subject details. With Nodemailer's sendMail function, you can then send off your beautiful email:

const options = {
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  html: emailHtml,
};

await transporter.sendMail(options);

4. Receive email

You can receive email sent by react email using MailSlurp's wait functions:

const email = await mailslurp.waitForLatestEmail(inbox.id, timeout);
// { body: "Hello world", subject: "Hello", ...rest }

Wrap Up

React Email, combined with Nodemailer, offers a powerful way for developers to design and send emails using familiar React concepts. This combination allows for dynamic content, modular design, and efficient email sending in a single, cohesive workflow. Next time you need to implement email functionality in your application, consider giving this duo a try. Happy coding!