Sending HTML emails from Node.JS using MailGun

Question

I send email notifications to my users from my app but currently I only send it as a text. I would like to send it HTML emails which are styled.

Currently I tried this:

var data = {
              from: 'my app',
              to: user.email,
              subject: 'Welcome',
              html: '<div style="width: 500px; height: 400px: background: #ebebeb; color: #ddd"><p>Hi  + "user.firstName" + \n ,this email is to inform you that has added their bio to the knowledge Base \n</p></div>'
           };

Compiling the above code does not work, it does not like the styles I have put in. I have created a separate HTML file within my local directory for each type of email I want send and I would like to be able to attach that html file to my email.

Something like this:

var data = {
              from: 'my app',
              to: user.email,
              subject: 'Welcome',
              html: welcomeToSiteEmail.html
           };

Is the above possible? Any help will be greatly appreciated.

I also ran into this and the mailgun-js module didn't support the very important template property (I believe this is what you want, instead of the html property). I found this github project github.com/mailgun/node-prelaunch has a working solution where they combine the templating of nodemailer with the mailgun-js transport. If this answers your question, I can pull out the code which specifically handles this and create an answer. — santeko
– santeko, Commented Sep 10, 2016 at 1:56

duncanhall · Accepted Answer · 2017-09-18 09:43:20Z

12

You can use mailgun-js together with mailcomposer to send HTML formatted emails.

The mailgun-js docs include an example:

var domain = 'mydomain.mailgun.org';
var mailgun = require('mailgun-js')({ apiKey: "YOUR API KEY", domain: domain });
var mailcomposer = require('mailcomposer');

var mail = mailcomposer({
  from: '[email protected]',
  to: '[email protected]',
  subject: 'Test email subject',
  body: 'Test email text',
  html: '<b> Test email text </b>'
});

mail.build(function(mailBuildError, message) {

    var dataToSend = {
        to: '[email protected]',
        message: message.toString('ascii')
    };

    mailgun.messages().sendMime(dataToSend, function (sendError, body) {
        if (sendError) {
            console.log(sendError);
            return;
        }
    });
});

edited Sep 18, 2017 at 9:43

answered Apr 21, 2016 at 10:08

duncanhall

11.5k6 gold badges61 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MaleihMaxime · Accepted Answer · 2019-11-11 11:16:47Z

7

Alternately, you could check out nodemailer on npm. It's a great package: easy to use and extensive documentation. With nodemailer, you can do something like this

var nodemailer = require('nodemailer');

var transport = nodemailer.createTransport({
      host: 'smtp.mailgun.org',
      port: 587,
      secure: false,
      tls: { ciphers: 'SSLv3' },
      auth: {
        user: '<Mailgun SMTP login>',
        pass: '<Mailgun SMTP password>'
      }
    });

transport.sendMail({
        from: '<Mailgun SMTP login>',
        to: ['[email protected]', '[email protected]', /*etc*/],
        subject: 'Fancy Email',
        text: 'still send some text to be on the safe side',
        html: { path: 'path/to/email.html' }
    }, callback)
// also returns a promise.

However, I would suggest being very thorough in your design of html emails. Writing html email is very different from html in the web. There's a much wider variety of email clients that do will render your html differently, and some, Outlook for Windows and gmail web for example, will not treat your html very nicely. Litmus has some nice resources regarding best practices for designing html emails.

My suggestion would be to use foundation for emails for your styling, use inky to simplify the semantics of writing html email, and inline-css to inline all of your styles. Even if you use alternate methods of sending the mail, check out these resources for designing it. They will save you lots of headache.

edited Nov 11, 2019 at 11:16

MaleihMaxime

631 silver badge13 bronze badges

answered Sep 17, 2016 at 2:48

Hayden Braxton

1,16110 silver badges14 bronze badges

3 Comments

scipilot Over a year ago

Great extra tips - I've used Litmus for a long time - what a time saver! Also I just found this for storing the auth credentials: npmjs.com/package/buttercup

scipilot Over a year ago

I had to use "pass" not "password" for the SMPT transport options.

Chanoch Over a year ago

I would strongly second Hayden Braxton I use mailchimp to layout out HTML - their wysiwyg email creator is excellent and renders very well. You can send yourself a test email and then view the HTML to extract it.

Collectives™ on Stack Overflow

Sending HTML emails from Node.JS using MailGun

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related