## 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:
```bash
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.
```jsx
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 (
);
}
```
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:
```javascript
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:
```typescript
// 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:
```javascript
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:
```javascript
const emailHtml = render();
```
Lastly, configure your email's sender, receiver, and subject details. With Nodemailer's `sendMail` function, you can then send off your beautiful email:
```javascript
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:
```typescript
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!
## React email testing checklist for CI pipelines
Before shipping React-rendered templates, apply this reliability sequence.
- Isolate mailbox creation and template checks in [Email Sandbox](/product/email-sandbox/).
- Assert full sign-up and reset flows in [Email Integration Testing](/product/email-integration-testing/).
- Consume asynchronous provider events via [Email Webhooks](/guides/email-webhooks/).
- Route retries and branch handling through [Email Automation Routing](/product/email-automation-routing/).
- Verify real inbox placement with [Email Deliverability Test](/testing/email-deliverability-test/).