Styling NodeMailer Email

Question

Below I have referenced an example from the NodeMailer package in NodeJS. It is designed to automate email sending. As you can see, in the mailOptions object, you are able to write HTML into the message body. This is an awesome feature that I plan on using.

However, I do have a question on how I might style this HTML. Are there any styling options that I can use on this HTML and how would i go about this. The most logical way I would think would be inline styling.

Has anybody tried this before and had any success?

var nodemailer = require('nodemailer');

// create reusable transporter object using the default SMTP transport
var transporter = 
nodemailer.createTransport('smtps://user%40gmail.com:pass@smtp.gmail.com');

// setup e-mail data with unicode symbols
var mailOptions = {
    from: '"Fred Foo ?" <foo@blurdybloop.com>', // sender address
    to: 'bar@blurdybloop.com, baz@blurdybloop.com', // list of receivers
    subject: 'Hello ✔', // Subject line
    text: 'Hello world ?', // plaintext body
    html: '<b>Hello world ?</b>' // html body
};

// send mail with defined transport object
transporter.sendMail(mailOptions, function(error, info){
    if(error){
        return console.log(error);
    }
    console.log('Message sent: ' + info.response);
});

You could use one of the template generators, like EJS for example. Make a template, feed it the data and get the HTML exactly as you wish. — Amiga500, Dec 17 '18 at 16:53
If it is a basic layout, you can use JavaScript template literals to help create a simple html layout with some inline css (email clients require a lot to get them to display correctly in all), store it in a var and pass it in. However if it is a more complex design with content and data changing regularly, as Vendran explained, using a templating engine such as ejs to create a more robust layout and pass that in. — Ashley Redman BSc, Dec 17 '18 at 17:29
@VedranMaricevic Would ejs be necessary though. Is this section static html, or am i still able to use js (similiar to jsx). In that case, it would most certainly be easier to use an es6 string literal. — Hysii, Dec 17 '18 at 20:13
I could not answer you with precise code, since the topic is to broad. Instead, I provided you with some hints that could help you on your way. — Amiga500, Dec 18 '18 at 16:43

score 2 · Answer 1 · answered Dec 18 '18 at 16:42

I will provide you with some hints, hopefully you should be able to implement it in your project as well.

First things first, you would need an EJS (there are other template engines around). You would required it like this in your project:

const ejs = require('ejs');

I have implementation in a class, that loads desired template dynamically, and then feeds it data.

This is how my render method (that outputs the HTML ) looks like:

renderTemplate(template, parameters, options) {
        return ejs.render(template, parameters, options);
    }

You could check a EJS for more details. That would be very basic implementation, that should get you going in good direction. Later on, you can include the headers or footers for that matter.

Have fun

score 1 · Answer 2 · answered Dec 17 '18 at 20:13

1

For styling emails, you would want to either write the styling in-line, or it looks like there is some NPM packages for helping with this. (nodemailer-juice), looks like it will take your css file and make it inline for you.

answered Dec 17 '18 at 20:13

ChrisBurns

299
2
11

Styling NodeMailer Email

2 Answers2

Linked