Published 6 Oct 2023
Business
Email is a fundamental tool for communication. Whether you are conducting business negotiations, marketing a product, or even receiving automated notifications, email is at the core of these interactions. However, not all email-sending methods are created equal and each method has its strengths and weaknesses, and the right choice depends on your unique needs. In this blog, we'll explore the different options mentioned below and make an informed choice based on a project's specific needs.
According to Yes Lifecycle Marketing, 2019, the average email open rate is 20.81%. So, when an email is sent from your organization, the first thing to ensure is that it doesn't land in the spam folder. For this, the services mentioned above such as Resend, and SendGrid are used.
Personalization is the key along with an appropriate preview and subject line to attract the customer's attention and stand out amongst the other mails in the inbox. Once you start personalizing your email, you will see the incredible impact it has. Emails with personalized subject lines generate 50% higher open rates.
So, a great email marketing tip would be to customize your greeting and subject line to include individual names when you send out emails. You can also try personalizing your emails with the company’s name, industry, or topic of interest.
React Email provides a set of unstyled components through which you can personalize the email being sent. This allows developers to build emails using a component-based architecture similar to React web apps. It aims to modernize the process of email development by leveraging React's syntax, TypeScript, and integrating with modern frontend tools. This provides a better developer experience compared to traditional solutions and enables developers to build beautiful, scalable email templates. React email also consists of example templates that can be tweaked as per requirements.
React email provides various components that are similar to the components of HTML which makes it easier due to the familiarity with the syntax. The list of the components is provided here on the official website. You can either install a specific component or install all the components at once using the following command:
npm install @react-email/components
The template of your email can be designed and modified based on the content and requirements of the mail. Let us consider a simple email thanking a customer for using our service.
import {
Body,
Container,
Column,
Head,
Html,
Img,
Link,
Preview,
Row,
Section,
Text,
} from '@react-email/components';
import * as React from 'react';
interface _91BytesThankYouEmailProps {
userName?: string;
userMail?:string;
}
const baseUrl = process.env.VERCEL_URL ?
process.env.VERCEL_URL : '/static';
export const _91BytesThankYouEmail =({ userName = 'Customer' , userMail}:
_91BytesThankYouEmailProps) => {
return (
<Html>
<Head />
<Preview>Thank you for using our service.</Preview>
<Body style={main}>
<Container style={container}>
<Section style={logo}>
<Img width={114} src={`${baseUrl}/static/91bytes-logo.png`} />
</Section>
<Section style={sectionsBorders}>
<Row>
<Column style={sectionBorder} />
<Column style={sectionCenter} />
<Column style={sectionBorder} />
</Row>
</Section>
<Section style={content}>
<Text style={paragraph}>Hi {userName},</Text>
<Text style={paragraph}>
I hope this message finds you well. We wanted to take a moment to
express our sincere gratitude for choosing our service.
Your trust in us is greatly appreciated, and we are committed to
continuously providing you with the best possible experience.
</Text>
<Text style={paragraph}>
At 91Bytes, we strive to go above and beyond to meet your needs
and exceed your expectations. Your satisfaction is our top
priority, and we are constantly working to improve our services
to ensure they align perfectly with your requirements.
</Text>
<Text style={paragraph}>
Thank you,
<br />
91Bytes Support Team
</Text>
</Section>
</Container>
<Section style={footer}>
<Row>
<Column align="right" style={{ width: '50%', paddingRight: '8px' }}>
<Img src={`${baseUrl}/static/91Bytes-icon-twitter.png`} />
</Column>
<Column align="left" style={{ width: '50%', paddingLeft: '8px' }}>
<Img src={`${baseUrl}/static/91Bytes-icon-facebook.png`} />
</Column>
</Row>
<Text style={{ textAlign: 'center', color: '#706a7b' }}>
© 2023 91Bytes, All Rights Reserved <br />
</Text>
</Section>
</Body>
</Html>
);
};
export default _91BytesThankYouEmail;
const fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif';
const main = {
backgroundColor: '#efeef1',
fontFamily,
};
const paragraph = {
lineHeight: 1.5,
fontSize: 14,
};
const container = {
width: '580px',
margin: '30px auto',
backgroundColor: '#ffffff',
};
const footer = {
width: '580px',
margin: '0 auto',
};
const content = {
padding: '5px 50px 10px 60px',
};
const logo = {
display: 'flex',
justifyContent: 'center',
alingItems: 'center',
padding: 30,
};
const sectionsBorders = {
width: '100%',
display: 'flex',
};
const sectionBorder = {
borderBottom: '1px solid rgb(238,238,238)',
width: '249px',
};
const sectionCenter = {
borderBottom: '1px solid rgb(145,71,255)',
width: '102px',
};
const link = {
textDecoration: 'underline',
};
In the above code, we define a TypeScript interface, _91BytesThankYouEmailProps, with a userName and userMail fields. This interface specifies the structure of the props that our _91BytesThankYouEmail component is expected to receive. If no user name is provided when the email is sent, the variable userName is initialized with a default value of “Customer”.
To use React Email with any email service provider, we first need to convert the components made with React into an HTML string. This is done using the render utility. To render it into HTML form, first install it using the command:
npm install @react-email/render -E
The component can be rendered using:
const emailHtml = render(
<_91BytesThankYouEmail
userName={formData.name}
userMail={formData.email}/>,
{pretty:true}
)
Now that we have the email template and it is rendered, we can start sending the email through a service provider. The service providers that can be integrated with React email are Resend, SendGrid, and Nodemailer. All these service providers use their own SMTP servers. Let us know more about SMTP servers in detail.
Behind the scenes, SMTP servers play a crucial role in ensuring that your emails are sent and received seamlessly. SMTP stands for Simple Mail Transfer Protocol, and an SMTP server is a specialized computer program or server responsible for sending, receiving, and routing emails between different email clients and servers.
SMTP servers follow a series of steps to deliver your email from sender to recipient:
Creating your own SMTP server can be a complex process and we can use the existing SMTP servers for our usage.
Nodemailer is a popular and widely used Node.js library for sending emails. It's flexible, easy to use, and supports various email providers and protocols. With Nodemailer, you can send text emails, HTML emails, attachments, and more, making it a versatile choice for both simple and complex email-sending tasks.
Before diving into how to use Nodemailer, let's understand why it's a popular choice for sending emails:
Now, let's get into the practical details of using Nodemailer.
To use Nodemailer, you'll need to install it as a dependency in your Node.js project. Run the following command in the terminal:
npm install nodemailer
Nodemailer requires some configuration to work correctly. Here's an example configuration for sending emails through a Gmail account:
const nodemailer = require('nodemailer');
// Create a transporter using Gmail SMTP
const transporter = nodemailer.createTransport({
host: 'smtp.gmail.com', //it can be a custom smtp server ãlso
port: 587,
secure: false,
auth: {
user: 'yourMail@gmail.com', // Replace with your Gmail address
pass: 'yourAppPassword' // Replace with your Gmail password or app-specific password
},
});
Replace 'yourMail@gmail.com' and 'yourAppPassword' with your Gmail email address and app-specific password. Note that using your email password directly in your code isn't a secure practice for production applications. In production, you should use environment variables to store sensitive information securely.
Once you've configured Nodemailer, sending an email is straightforward. Here's a basic example:
// Define the email content
const mailOptions = {
from: 'your-email@gmail.com',
to: 'recipient-email@example.com',
subject: 'Hello from Nodemailer',
text: 'This is a test email sent from Nodemailer.',
};
// Send the email
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.error('Error sending email:', error);
} else {
console.log('Email sent:', info.response);
}
});
In this example:
You can customize the email's content by modifying the mailOptions object. Nodemailer also supports sending HTML content, attachments, and more advanced features.
In our example, we will also be sending an email from the node server. To do this, expose an API endpoint from your Node server that your React app can call to send emails when a form is submitted. The data sent from the React app consists of HTML and JSON data. The HTML data consists of the email template which is denoted by emailHtml and the JSON data consists of the receiver's details such as name and email ID denoted by jsonData.
const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(cors({ origin: 'server-url' }));
// Parse incoming form data
app.use(bodyParser.json());
app.use(bodyParser.text({ type: 'text/html' }));
app.get('/send-email', (req, res) => {
res.send("hello send email")
});
// Handle form submission
app.post('/send-email', (req, res) => {
const emailHtml = req.body.emailHtml; //email HTML
const jsonData = JSON.parse(req.body.jsonContent); //receiver's details
// Process the HTML content
// Create a Nodemailer transporter
const transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
port: 587,
secure: false,
auth: {
user: 'yourMail@gmail.com', // Replace with your Gmail address
pass: 'yourAppPassword' // Replace with your Gmail password or app-specific password
}
});
// Email data
const mailOptions = {
from: 'your-email@gmail.com',
to: jsonData.email, // Receiver's email address
subject: 'Thank You',
html: emailHtml,
};
// Send the email
transporter.sendMail(mailOptions, function(error, info) {
if (error) {
console.error('Error sending email: ' + error);
res.send('Error sending email. Please try again later.');
} else {
console.log('Email sent: ' + info.response);
res.send('Thank you for your message! We will get back to you shortly.');
}
});
});
// Start the server
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
Here we are using the SMTP server provided by the gmail itself. You can integrate nodemailer with resend as well. If integrated with Resend, API_KEY of resend is used along with the SMTP server of resend.
SendGrid is an email delivery platform that offers a suite of tools and services designed to simplify email management and enhance deliverability. Founded in 2009, SendGrid has grown into one of the leading email delivery services, trusted by businesses and developers worldwide.
Key Features of SendGrid
In your Node.js project directory, open a terminal and run the following command to install the SendGrid package:
npm install @sendgrid/mail
To use SendGrid, you need to create an account first. Head over to the website to create one. Then click on Create Identity. This is how the receivers will see the mail. Then fill in the details in the form.
Click on create after filling out the form. Then verify the sender. You will receive an email to the email address mentioned in the from section in the form. You can verify by clicking on the verify Single Sender button. Once verification is done, head over to the API keys in the settings section and create the API key. Choose the permissions based on your requirements.
Copy the API key once you create it. Now you can send emails using this API key.
Add your API key to the env file. Let's send the Thank you mail using SendGrid.
const express = require('express');
const bodyParser = require('body-parser');
const resend_= require("resend");
const cors = require('cors');
const app = express();
const sgMail = require('@sendgrid/mail')
app.use(cors({ origin: 'http://localhost:3001' }));
// Parse incoming form data
app.use(bodyParser.json());
app.use(bodyParser.text({ type: 'text/html' }));
sgMail.setApiKey(process.env.SENDGRID_API_KEY)// add your api key to env file
app.get('/send-email', (req, res) => {
res.send("hello send email")
});
// Handle form submission
app.post('/send-email', async(req, res) => {
const emailHtml = (req.body.emailHtml);
const userData = JSON.parse(req.body.jsonContent);
console.log(jsonData);
const msg = {
to: userData.email, // Change to your recipient
from: 'your-from-email@email.com', // From email address
subject: 'Thank you',
html: emailHtml,
}
sgMail
.send(msg)
.then((response) => {
console.log(response[0].statusCode)
console.log(response[0].headers)
})
});
// Start the server
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
As we discussed before, one of the problems with sending marketing or business mail is the risk of the mail landing in the spam folder. Resend is an email service that prevents this from happening. It is quick and easy to set up. Similar to SendGrid, an API key is needed to send the mail. It can be integrated with Nodemailer too.
Let us continue with the Thank You email with Nodejs and Express being the server. We will be using the same email template that we created before.
You can install resend with the following command:
npm install resend
To get the Resend API key, create a Resend account, click on Add and API key and copy the key as soon as you create it as it is only available once. You can check the emails sent and received in the Emails section.
If you observe the email template, the from email address is mentioned as 'onboarding@resend.dev' can be used to send the testing mail but not during production. So, add your domain and verify the DNS to start sending emails.
Resend requires some configuration to work correctly. Here's an example configuration for sending emails:
const resend_= require("resend");
const resend = new resend_.Resend(process.env.RESEND_API_KEY);
const data = await resend.emails.send({
from: 'sender-mail@your-domain.com',
to: 'receiver-mail@example.com',
subject: "Testing mail",
html: emailHtml,
});
Once you've configured Resend, sending an email is simple. Here's how we will be sending the Thank You mail.
const express = require('express');
const bodyParser = require('body-parser');
const resend_= require("resend");
const cors = require('cors');
const app = express();
app.use(cors({ origin: 'http://localhost:3001' }));
// Parse incoming form data
app.use(bodyParser.json());
app.use(bodyParser.text({ type: 'text/html' }));
// resend API key
const resend = new resend_.Resend(process.env.RESEND_API_KEY);
app.get('/send-email', (req, res) => {
res.send("hello send email")
});
// Handle form submission
app.post('/send-email', async(req, res) => {
const emailHtml = (req.body.emailHtml);
const userData = JSON.parse(req.body.jsonContent);
try{
const data = await resend.emails.send({
from: 'email1@example.com',
to: userData.email,
subject: "hello, " + userData.name,
html: emailHtml,
});
res.status(200).json({ data });
} catch (error) {
res.status(500).json({ error });
}
});
// Start the server
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
Always place your API keys in the env file. One of the key benefits of using an env file is the separation of configuration from the code. This means that sensitive information like API keys, database credentials, and other configuration settings are kept separate from the source code. This makes it easier to manage configuration settings and maintain security.
The choice between Nodemailer, SendGrid, and Resend depends on your specific needs and priorities:
Ultimately, the best choice depends on your project's specific requirements, development stack, and email marketing goals. You may also consider factors such as pricing, scalability, and the level of support provided by each service when making your decision.
Cover image by Stephen Phillips - Hostreviews.co.ukUnsplash
Increase icons created by IconLauk - Flaticon
https://blog.logrocket.com/streamline-email-creation-react-email/
https://resend.com/docs/introduction