Table of Contents
Introduction
Prerequisites
What is SMTP Express
Project Setup
Creating the Email Form Component
Installing SMTP Express SDK
API Key Integration
Handling Form Submission
Testing the Email Functionality
Conclusion
Introduction
Sending emails remains a pivotal feature in modern web applications, providing users with essential feedback on their data interactions. Traditionally, backend systems have shouldered the responsibility of managing email dispatch(delivery). However, the emergence of SMTP Express introduces a game-changing approach, allowing frontend applications to send emails directly, bypassing the need for complex backend setups.
In this article, we embark on an exploration of how to seamlessly integrate SMTP Express into React JS applications, transforming the email-sending experience.
Without further ado, let’s plunge into the intricacies of harnessing SMTP Express to streamline email transmission in our React JS projects.
Prerequisites
This article assumes that you at least know the basics of working with react forms. You do not have to be an expert to follow along.
What is SMTP Express
At its core, SMTP Express is an email delivery service that allows developers send emails directly from their projects without needing a backend server.
Project Setup
To initiate our project setup, the first step involves registering with SMTP Express.
Once registered, you’ll gain access to a dashboard similar to the one shown below:
If you’re new to SMTP Express, your projects list will be empty.
Now you’ll have to click on the New Project button to create a new Project, you will be navigated to the Create New Project page below
It is important to note that the Project Name field is required, and in this write-up, I will name it smtp-article-example-demo
Next step requires you to click on the toggle switch that reads I do not have an smtp server.
After toggling the I do not have an SMTP server switch, you’ll notice that the User Interface(UI) transforms to something like this:
Next, we’ll click on Create Project, and SMTP Express will handle setting up our project on the server.
Afterwards, we’re redirected to the dashboard, where we see our list of projects. If we have existing projects, the newly created one in our case smtp-article-example-demo will appear at the top alongside them. If it’s our first project, it will appear alone on the dashboard
Here’s what my current Project Dashboard looks like at the moment:
Hooray! 🎊🎉 Our project setup on the SMTP Express Platform is now complete.
Creating Email Form
Create a basic react project and add the following lines of code:
import “./App.css“;
function App() {
const [email, setEmail] = useState(“”);
const [message, setMessage] = useState(“”);
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setLoading(true);
if (!email || !message) {
setLoading(false);
return;
}
console.table({ email, message });
setLoading(false);
};
return (
<div className=“app”>
<h2 className=“app”>Email Sending Form</h2>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor=“emailInput”>Email:</label> <br />
<input
id=“emailInput”
type=“email”
required
value={email}
onChange={(e) => setEmail(e.target.value)}
></input>
</div>
<div>
<label htmlFor=“message”>Message:</label> <br />
<textarea
id=“message”
cols={30}
rows={10}
required
value={message}
onChange={(e) => setMessage(e.target.value)}
></textarea>
</div>
<button>{loading ? “Loading…“ : “Send Email 🚀“}</button>
</form>
</div>
);
}
export default App;
The Style for the form are as follows:
margin: 0;
padding: 0;
box-sizing: border-box;
}
.app {
display: grid;
place-items: center;
}
.app h2 {
font-size: 2rem;
margin: 1.5rem 0;
}
.app > form {
width: 35%;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;
}
@media screen and (max-width: 768px) {
.app > form {
width: 80%;
}
}
label {
font-size: 1.25rem;
font-weight: 600;
}
.app > form > div > input,
.app > form > div > textarea {
margin-top: 1rem;
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 0.25rem;
}
.app > form > button {
margin-top: 1rem;
width: 100%;
padding: 0.5rem;
border: none;
border-radius: 0.25rem;
background-color: #007bff;
color: white;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
}
.app > form > button:hover {
background-color: #0056b3;
}
After adding the styles, we should have something like this on our web page:
Now that we have our UI all set up, let’s move on and see how to integrate SMTP Express into our React Application.
Installing SMTP Express SDK
Here comes the exciting part! We’ll integrate SMTP Express into our React JS project.
To install SMTP Express SDK, we need to run the following command in any terminal of our choice
The code above adds the SMTP library to our React JS Project.
API Key Integration
To begin, create a new file using either JavaScript or TypeScript. Let’s name this file smtp.js if you’re using JavaScript, or smtp.ts if you’re using TypeScript
Now add the following code to it
const smtpexpressClient = createClient({
projectId: “<INSERT_PROJECT_ID>“,
projectSecret: “<INSERT_PROJECT_SECRET>“
});
To get your Project Id and Project Secret you have to navigate to your project dashboard
To get a Project Secret, you would need to generate it.
Click on the Click to create a new secret link, afterwards you will be navigated to the create-secret page
Next, you click on the Create New button to generate a product secret. A slider appears on the right of the page with the following details:
Let’s name our secret Default Secret; for now, we’ll use localhost as our domain. Later on, you can update the domain to reflect where your project will be hosted, such as Netlify or Vercel.
When the Create Secret button is clicked, it generates a project secret.
When you obtain the Project ID and Secret tokens, please insert them into the smtp.js or smtp.ts file you created earlier.
Now that we have obtained our Project ID and Secret, let’s understand how to utilize SMTP to send emails to our users.
Handling Form Submission
In the previous section, we successfully crafted a dynamic form component, equipped with the email and message input fields and an onSubmit handler.
We will have to update or redefine the onSubmit handler which is the handleSubmit function in our case.
Here’s how the code looks like now:
e.preventDefault();
setLoading(true);
if (!email || !message) {
setLoading(false);
return;
}
console.table({ email, message });
try {
// Sending an email using SMTP
await smtpexpressClient.sendApi.sendMail({
// Subject of the email
subject: “Confirmation: Email sent successfully“,
// Body of the email
message: `<h2>${message}</h2>`,
// Sender’s details
sender: {
// Sender’s name
name: “SMTP Article by DevYoma“,
// Sender’s email address
email: “<PROJECT_SENDERS_EMAIL_ADDRESS>“,
},
// Recipient’s details
recipients: {
// Recipient’s email address (obtained from the form)
email: email,
},
});
// Notify user of successful submission
alert(“Please check your email to view the sent message.“);
setLoading(false);
setEmail(“”);
setMessage(“”);
} catch (error) {
// Notify user if an error occurs during submission
alert(“Oops! Something went wrong. Please try again later.“);
// You can console.log the error to know what went wrong
console.log(error);
setLoading(false);
}
};
To obtain your PROJECT_SENDERS_EMAIL_ADDRESS, navigate to the settings page of your project. Here, you’ll find a user interface similar to the one depicted below:
Copy the provided code snippet, which contains your PROJECTS_SENDERS_EMAIL_ADDRESS, and replace the corresponding placeholder in the handleSubmit function with this value. This step ensures that your email sender address is correctly configured for SMTP integration.
Testing the Email Functionality
Now, let’s test our email functionality right on our localhost.
Onclick of the Send Email button, you should get an alert saying Please check your email to view the sent message.. You would see this if you correctly configured the project.
Conclusion
Throughout this article, we’ve explored the integration of SMTP Express into React JS applications, streamlining the process of sending emails. I’m delighted that you’ve followed along to this point, and I encourage you not only to absorb the content but also to implement and apply what you’ve learned here. Happy coding!
Lastly, if you’ve found value in this article, I invite you to consider sharing it with your peers who may also benefit from its insights.
What are your thoughts on the topic of Sending Emails with SMTP? Feel free to share your thoughts in the comments section below.
