DEV Community: Mailtrap

Sending Emails with JavaScript

Andriy Zapisotskyi — Tue, 16 Jun 2020 11:28:58 +0000

The guide about Sending emails with Javascript first appeared on Mailtrap blog.

JavaScript is a programming language that you can use for both front-end and back-end development. When the name JavaScript is used in the context of sending emails, Node.js is the first thing that comes to mind. We even blogged about how to send emails with Node.js. In this article, we want to change the perspective from the server-side to the client-side. Let’s figure out how you can use JS to send emails from the app that has no back-end.

FAQ: Can I send emails with JS or not?

You can’t send emails using JavaScript code alone due to lack of support for server sockets. For this, you need a server-side language that talks to the SMTP server. You can use JS in conjunction with a server script that will send emails from the browser based on your requests. This is the value we’re going to introduce below.

Why you might want to send emails with JS

Traditionally, the server-side of a regular app is responsible for sending emails. You will need to set up a server using back-end technology. The client-side sends a request to the server-side, which creates an email and sends it to the SMTP server. If you’re curious about what happens with an email after that, read our blog post, SMTP relay.

So, why would anyone be willing to go another way and send emails right from the client-side using JavaScript? Such an approach is quite useful for building contact forms or other kinds of user interaction on web apps, which allows your app to send an email without refreshing the page the user is interacting with. Besides, you don’t have to mess around with coding a server. This is a strong argument if your web app uses email sending for contact forms only. Below, you will find a few options on how to make your app send emails from the client-side.

mailto: for sending form data

Since you can't send an email directly with JS, you can tell the browser to open a default mail client to do so. Technically, the mailto:` method does not send email directly from the browser, but it can do the job. Check out how the following code example works:

FirstName:
Email:

When you launch it in the browser, you’ll see the following:

Once the data has been submitted, the browser opens a default mail client. In our case, this is Gmail.

The mailto: method is a rather easy solution to implement but it has some specific drawbacks:

You can’t control the layout of the data since the data is submitted in the form sent by the browser.
mailto: doesn’t protect your email address from being harvested by spambots. Some time ago, this could be mitigated by constructing a link in JS. These days, more and more bots run JS and do not rely on HTML rendered by the server alone.

SmtpJS.com - true email sending from JavaScript

SmtpJS is a free library you can use for sending emails from JavaScript. All you need is an SMTP server and a few manipulations to get things done. We’ll use Mailtrap.io as the server because it is an actionable solution for email testing. Below is the flow you should follow:

Create an HTML file (for example, test.html) with the following script:
Create a button that will trigger the JavaScript function
Write the JS function to send emails via SmtpJS.com.
function sendEmail() {
Email.send({
Host : "smtp.mailtrap.io",
Username : "",
Password : "",
To : 'recipient@example.com',
From : "sender@example.com",
Subject : "Test email",
Body:
}).then(
message => alert(message)
);
}
Run test.html in the browser and send your email

The drawback with the code sample above is that your username and password are visible in the client-side script. This can be fixed if you utilize the encryption option provided by SmtpJS. Click the Encrypt your SMTP credentials button and fill in the required fields.

After that, press Generate security token and use it then in your JS function instead of SMTP server settings like the following:
SecureToken : "<your generated token>"

Want to more code samples for an HTML email and an email with attachments? Check the full article at Mailtrap blog.

Sending emails with Node.js

Andriy Zapisotskyi — Mon, 15 Jun 2020 11:20:54 +0000

Sending emails from Node.js is easy. We have gone over it in our previous blog post on sending emails with Nodemailer. Last time we reviewed Nodemailer’s capabilities we focused on sending HTML emails via SMTP. In this post, we will examine how to send emails with Node.js using popular email servers like Gmail. Also, we will have a look at other transport options and packages to build and send emails from Node.js.

The "Send emails in Node.js" blog post originally was published on Mailtrap's blog.

Building and sending emails with Node.js without Nodemailer

In some guides and tutorials, you might find a note that there are a variety of Node.js email packages but Nodemailer is the best one. It’s not true. In fact, you can barely find a decent alternative to Nodemailer (and I can hardly imagine why you might need it.)

On Github, you can find several Node.js packages related to emails but they won’t offer you a wide functionality. With Nodemailer, you can create HTML emails with attachments and send them via SMTP, SES (wrapper for sending emails via AWS SES), or sendmail.

The most similar package is Emaijs. Its features include:

sending emails via SMTP servers (both SSL and TLS) with authentication
HTML support and MIME attachments (also, attachments can be added as strings, streams, or file paths)
asynchronous sending of queued emails
UTF-8 encoding in headers and body.

So, the main difference is that in Emailjs you will use MIME type to work with attachments, while in Nodemailer you use strings.

Another quite popular package is email-templates. As you can see from the name, this package is designed for creating various custom templates for Node.js. It features support for automatic inline CSS, stylesheets, embedded images, and fonts. Also, it has an email preview option. The email templates package was made by the creator of the Lad framework. So it’s recommended to use it with Lad.
One more package worth mentioning here is Mailgen. It is aimed at creating HTML templates for transactional emails. There is a note on Github, that with Mailgen you can “Programmatically create beautiful e-mails using plain old JavaScript.” The package includes several open-source themes as well as supports custom elements like tables, action buttons, etc. It is your choice how to send an email created with Mailgen, but they recommend checking out Nodemailer for this purpose.

As you can see from the above table, Nodemailer is the most popular package, which offers functionality for both email creation and email sending. It’s not limited to one sending method. But it won’t be easy to create a special email template. This is why it might be a good idea to use Nodemailer in combination with another package.

To find all related packages and plugins, search for nodemailer in npm.

Sending HTML emails with dynamic content

In our previous blog post, we reviewed several examples of sending HTML emails with Nodemailer, embedding images, and attaching files. In most cases, for transactional emails like registration confirmation or resetting passwords, you need to use dynamic content. It will be easier and more efficient to do it with one of the template modules.

Let’s experiment with the email-templates package. It has several interesting features:

Support for different template engines (Pug is a default one)
Email preview (by default) in the development environment
Direct email sending. So, you don’t need extra packages like Nodemailer for email sending.

First of all, let’s create our templates, for a frequently occurring scenario: new user registration. In this example, we are working with the default option (for more details and samples of using Pug, refer to Github.)

Install the template engine:

npm:

npm install email-templates pug

yarn:

yarn add email-templates pug

We should create two files: subject and HTML body.

subject.pug:

= `Hi ${firstName} ${lastName}, happy to see you at My App!`

html.pug:

h1 Hello #{firstName} #{lastName}
    p.
Welcome to My App! Now your test emails will be safe. We just need to make sure your account is real. 
Please, click the button below and start using your account. 
a(href='https://example.com/confirmation') Confirm!

Now make sure that your directory has the following structure:

├── app.js

├── emails

│ └── welcome (the template name)

│ ├── html.pug

│ ├── subject.pug

│ └── text.pug

Pay attention to the text part of your message: if you don’t include it, it will be generated automatically. But if you add it, it will be rendered automatically. This means that the content of the text and HTML parts may differ.

Now we can write some code to gather all the elements together and add transport. As usual, we will use Mailtrap, to be able to test and check everything. In the same way, you can use any other SMTP server like Gmail, for example. Just be careful if experimenting with real email addresses!

const Email = require('email-templates');
const email = new Email({
 message: {
   from: 'hi@example.com'
 },
 send: true,
 transport: {
   host: 'smtp.mailtrap.io',
   port: 2525,
   ssl: false,
   tls: true,
   auth: {
     user: '1a2b3c4d5e6f7g', // your Mailtrap username
     pass: '1a2b3c4d5e6f7g' //your Mailtrap password
   }
 }
});

const people = [
 {firstName: 'Diana', lastName: 'One'},
 {firstName: 'Alex', lastName: 'Another'}
];

people.forEach((person) => {
 email
   .send({
     template: 'welcome',
     message: {
       to: 'test@example.com'
     },
     locals: person
   })
   .then(console.log)
   .catch(console.error);
}).

By default, the preview of your email will be opened in your browser. It might be helpful if you are working on your template and don’t need to actually send the message. If you need to test how the variables work, and you compose a message to dozens or even hundreds of recipients, be careful with this option. To switch it off, specify options.open as false.

This is why we use Mailtrap: we will see how the message looks for each recipient, explore both HTML and text versions, and will be able to perform additional checks. With Pug and email-templates, you can build a complex template using CSS, inlined images, tables, etc. Here is an example of how it should look in the Mailtrap virtual inbox:

* HTML*

* Text*

Enjoyed the reading? Full guide in Node.js and Emails is available at Mailtrap blog.

PHP built-in mail function vs PHP mailing packages

Andriy Zapisotskyi — Wed, 01 Apr 2020 20:05:24 +0000

The article on Sending Emails in PHP was originally published at Mailtrap's blog.

PHP built-in mail function ()

There are two basic ways of sending emails with PHP: built-in mail function and external mail packages.

PHP’s built-in mail function () is very simple but at the same time, it provides a limited functionality for sending emails. You won’t be able to add attachments to your email, and building a beautiful HTML template with embedded images will be a tricky task as well.

The other side of the PHP mail function () is that the email is sent from your web server, which may cause issues with deliverability due to security concerns such as suspicion of spam and blacklisting. The best way to overcome this problem is sending messages via an SMTP server, however, this functionality is limited as well. PHP mail() does not usually allow you to use the external SMTP server and it does not support SMTP authentication.

In other words, I don’t recommend using the PHP built-in mail function() and advise you to avoid the headaches it may cause by installing an external mailer package.

If you are still committed to the PHP built-in mail function() and are ready to accept the challenge, let’s take a look at the basic code and its main parameters.

Syntax and parameters
The PHP mail syntax is pretty simple:

<?php
mail($to_email_address,$subject,$message,[$headers],[$parameters]);
?>

It uses the following parameters:

“$to” = your message recipient(s). The email address format may be user@example.com or User user@example.com. If there are several recipients, separate them with comma(-s).
“$subject” = your message’s subject “$message” = the body of your message. Lines should be separated with a CRLF (\r\n). Each line should not exceed 70 characters.
“[$headers]” = additional recipients of your message, which can be included in CC or BCC. Headers are optional, except for the “from” header: it must be specified, otherwise, you will receive an error message like Warning: mail(): "sendmail_from" not set in php.ini or custom "From:" header missing.

For more details and additional parameters, refer to the PHP documentation.

Sending HTML email using PHP mail() function

The body of the message can be written in HTML. However, as I’ve mentioned above, it should be simple. In the PHP mail function(), the HTML part will look like this:

// Message
$message = '
<html>
<head>
  <title>Review Request Reminder</title>
</head>
<body>
  <p>Here are the cases requiring your review in December:</p>
  <table>
    <tr>
      <th>Case title</th><th>Category</th><th>Status</th><th>Due date</th>
    </tr>
    <tr>
      <td>Case 1</td><td>Development</td><td>pending</td><td>Dec-20</td>
    </tr>
    <tr>
      <td>Case 1</td><td>DevOps</td><td>pending</td><td>Dec-21</td>
    </tr>
  </table>
</body>
</html>
';

It’s important to remember that to send HTML mail, you need to set the Content-type header...

Continue reading the full guide on sending emails in PHP originally on Mailtrap blog.

Mails and Node JS

Andriy Zapisotskyi — Wed, 01 Apr 2020 17:52:51 +0000

The "send emails in Node.js" blog post originally was published on Mailtrap's blog.

Building and sending emails with Node.js without Nodemailer

The most similar package is Emaijs. Its features include:

sending emails via SMTP servers (both SSL and TLS) with authentication
HTML support and MIME attachments (also, attachments can be added as strings, streams, or file paths)
asynchronous sending of queued emails
UTF-8 encoding in headers and body.

So, the main difference is that in Emailjs you will use MIME type to work with attachments, while in Nodemailer you use strings.

Another quite popular package is email-templates. As you can see from the name, this package is designed for creating various custom templates for Node.js. It features support for automatic inline CSS, stylesheets, embedded images, and fonts. Also, it has an email preview option. The email templates package was made by the creator of the Lad framework. So it’s recommended to use it with Lad.
One more package worth mentioning here is Mailgen. It is aimed at creating HTML templates for transactional emails. There is a note on Github, that with Mailgen you can “Programmatically create beautiful e-mails using plain old JavaScript.” The package includes several open-source themes as well as supports custom elements like tables, action buttons, etc. It is your choice how to send an email created with Mailgen, but they recommend checking out Nodemailer for this purpose.

To find all related packages and plugins, search for nodemailer in npm.

Sending HTML emails with dynamic content

Let’s experiment with the email-templates package. It has several interesting features:

Support for different template engines (Pug is a default one)
Email preview (by default) in the development environment
Direct email sending. So, you don’t need extra packages like Nodemailer for email sending.

Install the template engine:

npm:

npm install email-templates pug

yarn:

yarn add email-templates pug

We should create two files: subject and HTML body.

subject.pug:

= `Hi ${firstName} ${lastName}, happy to see you at My App!`

html.pug:

h1 Hello #{firstName} #{lastName}
    p.
Welcome to My App! Now your test emails will be safe. We just need to make sure your account is real. 
Please, click the button below and start using your account. 
a(href='https://example.com/confirmation') Confirm!

Now make sure that your directory has the following structure:

├── app.js

├── emails

│ └── welcome (the template name)

│ ├── html.pug

│ ├── subject.pug

│ └── text.pug

const Email = require('email-templates');
const email = new Email({
 message: {
   from: 'hi@example.com'
 },
 send: true,
 transport: {
   host: 'smtp.mailtrap.io',
   port: 2525,
   ssl: false,
   tls: true,
   auth: {
     user: '1a2b3c4d5e6f7g', // your Mailtrap username
     pass: '1a2b3c4d5e6f7g' //your Mailtrap password
   }
 }
});

const people = [
 {firstName: 'Diana', lastName: 'One'},
 {firstName: 'Alex', lastName: 'Another'}
];

people.forEach((person) => {
 email
   .send({
     template: 'welcome',
     message: {
       to: 'test@example.com'
     },
     locals: person
   })
   .then(console.log)
   .catch(console.error);
}).

* HTML*

* Text*

Sending Emails with Nodemailer and SMTP

If configuring a new message in Nodemailer, we always should start with creating a transport method. The most popular one is the SMTP server, which can be easily set up for the majority of email clients or sending providers (like Sendgrid, Outlook, Gmail, etc.) SMTP configuration will be very simple and similar. For more detailed instructions on how to use Nodemailer, refer to the “Sending emails with Nodemailer explained” blog post.

Here we will demonstrate how to send emails with Gmail as it requires some tricks related to authentication.

Sending emails with Gmail

To be able to use Gmail to send messages via your app, you should start with several account configurations.

If you use a plain password , then you should allow access for less secure apps.

If you are using 2-Step Verification , you should sign in with App Passwords. To create your password:

Go to the Security section of your Gmail account.
Choose App Passwords in the Signing into Google block.
Select the app and device from the list and press Generate.

Please note that you can use it for your personal account only. It’s not available for accounts that are a part of an organization.

What else you should remember when setting the Gmail SMTP:

Gmail will automatically set the authenticated username as the From email address. To change it, you should “Add another address you own”. You will find it in your Gmail account -> Settings-> Accounts. For more details, refer to this Google Help Center article.
Gmail has its own email limits. For free (trial) accounts, it’s only 500 emails per day. If you reach the limit, your account might be suspended.

Now, when you made all necessary configurations, let’s set up the Gmail SMTP as a transport in the Node.js app.

Gmail SMTP hostname is smtp.gmail.com, the port should be 465 for SSL connection or 587 for TLS.

var nodemailer = require('nodemailer');
var transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 465,
    secure: true, // use SSL
    auth: {
        user: 'yourusername@gmail.com',
        pass: 'yourpassword'
    }
});

To avoid authentication issues, it is recommended to use oAuth2. Nodemailer requires an Access Token to perform authentication. Read the instructions on the Nodemailer documentation to proceed with this method.

Once you have retrieved client ID and client Secret, refresh token and enable Gmail API at API console. It is recommended to use bunyan logger:

const bunyan = require('bunyan');
const nodemailer = require('../lib/nodemailer');

let logger = bunyan.createLogger({
    name: 'nodemailer'
});
logger.level('trace');
// Create a SMTP transporter object
let transporter = nodemailer.createTransport(
    {
        service: 'Gmail',
        auth: {
            type: 'OAuth2',
            user: 'mail',
            clientId: 'clientid',
            clientSecret: 'clientsecret',
            refreshToken: 'refreshtoken',
            accessToken: 'accesstoken',
            expires: 12345
        },

Otherwise, to get an access token, you can use xoauth2 package.

Sending emails without SMTP

If you stick to one of the popular email sending providers like Sendgrid, Mandrill, Mailgun, or Postmark, you can integrate your Node.js app with their API directly.

For AWS SES, there is a wrapper around Nodemailer, node-ses. You can use aws-sdk directly, but node-ses provides a simpler way to send complex email templates with images and attachments.

Bottom line

If you are adding the email sending functionality to your Node.js app, most likely you will use Nodemailer. It is the simplest and most popular sending option compatible with other packages.

Besides, there are still options for how to send emails in Node.js without Nodemailer and without the SMTP server as well. Choose the option which best suits your current environment and needs. Just don’t forget to inspect and debug your test emails before delivering them to your customers.