Sending email directly from the browser without needing a backend server is now possible using SMTP.js. SMTP.js is a JavaScript SMTP client library that allows you to send mail through client-side JavaScript by wrapping the SMTP protocol.
In this post, we'll cover how to get started with SMTP.js, its features, use cases, and some frequently asked questions on using a JavaScript SMTP library.
Follow this guide to learn How to Scrap LinkedIn Company Data using Voyager Api.
Why Send Email from the Browser?
Here are some reasons you may want to send email directly from the browser without a backend server:
- No server dependencies - You don't need to rely on a server language like PHP or Node.js to send mail. The entire email process can be handled client-side.
- Faster prototyping - You can quickly build and iterate on a contact form or newsletter subscription without needing backend code.
- Reduced server load - Sending mail client-side reduces the load on your servers.
- Increased privacy - Email contents stay isolated in the browser and aren't sent to your servers.
- Offline functionality - Emails can still be drafted and sent when offline or on poor connections. They will queue and send when a connection is re-established.
Limitations of Client-Side Email
There are some limitations to keep in mind:
- No server-side templates - You lose the ability to leverage templating engines like Pug or Handlebars. HTML email needs to be crafted client-side.
- No server-side storage - You won't have a server log of sent mail. Client-side storage like IndexedDB can be used instead.
- Spam prevention - Special care must be taken to prevent spam and abuse without server-side systems like CAPTCHA.
- Email deliverability - Reputation management is harder without consistent IP addresses and server-side software.
So, while SMTP.js removes backend dependencies, some use cases still lend themselves better to server-side email. But for many front-end-focused, privacy-centric, or offline-first applications, SMTP.js can be a great fit.
LinkedIn Voyager API: The Ultimate Developer’s Guide
Getting Started with SMTP.js
SMTP.js can be installed via npm:
npm install smtp.js
Or included directly in the browser from a CDN like unpkg:
<script src="https://unpkg.com/smtp.js/dist/smtp.min.js"></script>
To send a simple test email:
import smtp from 'smtp.js';
const email = {
from: 'sender@example.com',
to: 'recipient@example.com',
subject: 'Test email',
text: 'This is a test email sent from the browser'
}
smtp.sendMail(email)
.then(info => console.log(info))
.catch(err => console.error(err))
We provide SMTP credentials and call smtp.sendMail() with the email object containing from, to, subject, and text fields.
The promise resolves with info about the message or rejects any errors.
SMTP Provider Credentials
To send real email, SMTP credentials need to be supplied:
const credentials = {
host: 'smtp.example.com',
port: 465,
secure: true,
auth: {
user: 'username',
pass: 'password'
}
}
smtp.connect(credentials)
.then(info => {
// connected, credentials OK
})
Any SMTP provider can be used, like Gmail, Outlook, or a custom server.
Gmail would look something like:
```javascript">const credentials = {
host: 'smtp.gmail.com',
port: 465,
secure: true,
auth: {
user: 'myaccount@gmail.com',
pass: 'mypassword'
}
}
Now, credentials are supplied to smtp.connect() before sending mail.
<h4>Sending the Message</h4>
With credentials configured, sending an email follows the same pattern:
```javascript">const email = {
// sender/recipient
from: 'sender@example.com',
to: 'recipient@example.com',
// email content
subject: 'Test email',
text: 'Email content here'
}
smtp
.connect(credentials)
.then(() => smtp.sendMail(email))
.then(info => console.log('Email sent!'))
.catch(err => console.error(err))
The message object can also take HTML email content:
const email = {
from: 'sender@example.com',
to: 'recipient@example.com',
subject: 'HTML email',
html: '<p>This is an <strong>HTML email</strong></p>'
}
That covers the basics of sending email with SMTP.js! Next we'll look at some more advanced features.
SMTP.js Features
SMTP.js supports several helpful features when sending mail:
- Multiple Recipients
To send to multiple recipients, pass an array of addresses to:
const email = {
to: [
'recipient1@example.com',
'recipient2@example.com'
]
}
CC and BCC fields are also supported:
const email = {
to: 'main@example.com',
cc: 'cc@example.com',
bcc: 'bcc@example.com'
}
- Attachments
To attach files, pass an array of attachments:
const email = {
attachments: [
{filename: 'report.pdf', content: pdfBuffer}
]
}
The content can be a Buffer, ArrayBuffer, Stream, or URL.
- Custom Headers
Additional headers can be added:
const email = {
headers: {
'X-Custom-Header': 'value'
}
}
- Email Queue
To send multiple emails, an internal queue is used:
// add emails to queue
smtp.addMailToQueue(email1);
smtp.addMailToQueue(email2);
// connect and send entire queue
smtp.connect(credentials)
.then(() => smtp.flushQueue())
.catch(err => console.error(err));
This allows sending a batch of emails efficiently.
- Custom SMTP Server
Instead of a major provider, you can connect to a custom SMTP server:
const credentials = {
host: 'mail.yourdomain.com',
port: 587,
secure: false,
auth: {
user: 'username',
pass: 'password'
}
}
Use any self-hosted SMTP server like Postfix, Sendmail, or Exchange.
This covers the main features of SMTP.js! Next we'll look at some good use cases for sending email from the browser.
When to Use SMTP.js
Several types of applications lend themselves well to using SMTP.js for client-side email:
- Contact Forms
A common use case is browser-based contact forms:
const form = document.querySelector('#contact-form');
form.addEventListener('submit', event => {
event.preventDefault();
const email = {
to: 'contact@example.com',
subject: form.subject.value,
text: form.message.value
}
smtp.sendMail(email)
.then(() => form.reset())
.catch(err => console.error(err))
});
No server code is needed!
- Newsletter Signup
For a newsletter signup form, save the email to IndexedDB and queue the confirmation:
form.addEventListener('submit', event => {
event.preventDefault();
const email = form.email.value;
db.users.add({email});
const confirmEmail = {
to: email,
subject: 'Please confirm signup',
text: 'Click here to confirm: https://...'
}
smtp.addMailToQueue(confirmEmail);
smtp.flushQueue();
})
- Online Email Client
SMTP.js allows building a web-based email client or webmail system without servers.
Messages stay local using IndexedDB or other browser storage for the mail client.
- CRM/Support Platforms
In customer management apps, support agents can respond to tickets directly from the browser:
agentForm.addEventListener('submit', event => {
event.preventDefault();
const {recipient, body} = form;
smtp.sendMail({
to: recipient,
text: body
});
});
Again, no server-side code is needed for sending responses.
- Offline Functionality
For offline-first web apps, emails can be queued when offline and sent when a connection is
re-established:
// detect connection state
const isOnline = navigator.onLine;
// queue message
smtp.addMailToQueue(email);
if(isOnline) {
smtp.flushQueue();
} else {
window.addEventListener('online', () => {
smtp.flushQueue();
});
}
So SMTP.js enables email functionality even without a network.
These are just a few examples of when sending mail directly from the client can be useful.
Common Questions
Here are answers to some frequently asked questions about using SMTP.js:
How does SMTP.js work without a server?
SMTP.js directly speaks the SMTP protocol to send mail. It is a client-side SMTP "server" connecting to real external servers. All the code is contained in the browser.
Is it secure to send email via client-side code?
SMTP.js is as secure as SMTP itself. All connections use TLS encryption, and credentials are not exposed client-side. The email contents and data stay local to the browser and JavaScript environment.
What is the advantage of a server-side solution?
It depends on the use case, but the advantages include no server dependencies, increased privacy, offline support, and reduced server load for things like contact forms.
What are the limitations?
Limitations include a lack of server-side templates, no central server log of sent mail, and reduced deliverability protections. Complex workflows involving mail merge and sending high volumes of email work better with a server.
How does email get delivered without a static IP address?
Services like Mailgun provide an SMTP API gateway with a consistent sending IP address and domain while masking the underlying client IPs. This helps improve deliverability.
Does SMTP.js work for sending bulk email?
SMTP.js can technically send bulk volumes, but server-side solutions are better suited for large mailing lists and newsletter campaigns. SMTP.js is better optimized for one-off transactional email.
Can SMTP.js connect to any SMTP service?
Yes, SMTP.js can connect to any standard SMTP provider or custom SMTP server with the proper credentials configured. Popular choices include Gmail, Mailgun, SparkPost, Amazon SES, or a self-hosted mail server.
Hopefully, this gives you a better understanding of how to use SMTP.js to send email directly from the browser! Let me know if you have any other questions.
If you find this article thrilling, discover extra thrilling posts like this on Learnhub Blog; we write a lot of tech-related topics from Cloud computing to Frontend Dev, Cybersecurity, AI, and Blockchain. Take a look at How to Build Offline Web Applications.
Top comments (0)