DEV Community

Cover image for Legendary Emails in Node js with mjml πŸ“©
Ali nazari
Ali nazari

Posted on

70 2 3 3 3

Legendary Emails in Node js with mjml πŸ“©

Sometimes I receive emails from various companies and start-ups that look very attractive and audience-friendly. πŸ˜Άβ€πŸŒ«οΈ

In their emails, they used a unique font along with images and buttons. What stood out the most was how their email format was responsive, adapting well to different devices.

After seeing the emails, I decided to send similar emails to users for the store project I was developing 😎

you can check it out if you like from the link below:
https://github.com/Silent-Watcher/express-shop

Anyway, I stumbled upon a tool called MJML that could be used to implement this feature.

As stated in its documentation:

MJML is a markup language designed to reduce the pain of coding a responsive email.

As developers, we don't have to be involved in complex responsive email designs but you can spend some time learning the syntax if you’d like.

Good news for Node.js developers: MJML is coded in Node.js. However, if you use other languages such as Python, you can utilize the MJML API.

For more information, you can refer to this post on the Medium website

To begin, we will need to install two packages: eta and mjml.



bun add eta@latest mjml@latest


Enter fullscreen mode Exit fullscreen mode

After that, I created a file named mail.tpl.js where we initialize MJML and ETA to create our email template.

mjml

The template I used is the hello world template from the MJML documentation, which looks something like this

mjml email preview

After accessing your email template in HTML format, if you are using *Nodemailer * for sending emails, you can create a β€˜sendmail’ function that can be utilized later in the project

To achieve this, I created a file named β€˜mailer.js’ and initialized the Nodemailer package:

Nodemailer

Now, you can utilize this function wherever you wish to send emails. To define your template, simply use the β€˜html’ option within the first parameter.

send mail in node js

that’s pretty much it. let me know what you think. πŸ€—

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (16)

Collapse
 
silentwatcher_95 profile image
Ali nazari β€’

by the way the MJML stands for *mailjet markup language * πŸšΆπŸ»β€β™‚οΈ

Collapse
 
jyoung4242 profile image
Justin Young β€’

i'll file this away for my next project... thanks for the article

Collapse
 
alexswensen profile image
Alexander Swensen β€’

I've used MJML in the past. It's effectively my go-to for beautiful emails both for campaigns and transactional emails (ie password resets, verification, etc)

Collapse
 
silentwatcher_95 profile image
Ali nazari β€’

That's great to hear! MJML is definitely a powerful tool for creating visually appealing emails.

Collapse
 
ajmalleonard profile image
Ajmal Leonard β€’

I think this is awesome, man. Can anyone write a post outlining how to use SMTPS (custom domain emails with Nodemailer)?
Kindly for anyone who achieved this show up , I'll appreciate 🦾

Collapse
 
george_taschina profile image
George Cosmin Taschina β€’ β€’ Edited

Hi,
thank you for sharing and writing this article.

I was just curios, why not use some mail template providers to begin with?
Like SendGrid or MailJet

Thanks again!

Collapse
 
neurabot profile image
Neurabot β€’

Impressive. Innovant.

Collapse
 
silentwatcher_95 profile image
Ali nazari β€’

Thank you for your positive feedback! πŸ€—

Collapse
 
msamgan profile image
Mohammed Samgan Khan β€’

MJML is an excellent resource for mailing. That is why I put it in default in Framework X. Check it out.

Collapse
 
ronaldohoch profile image
Ronaldo Hoch β€’

I'm using this in my work, it's awesome.

Collapse
 
davitacols profile image
David Ansa β€’

Is it free and integrate google's smtp for personal email use case testing?
I can be interested can it be used with PHP Laravel

Collapse
 
silentwatcher_95 profile image
Ali nazari β€’

I think it can be used for any email services and to integrate MJML into your PHP app, you have to use its API.
happy coding ! πŸ€—

Collapse
 
stupid_evening profile image
Stupid Evening β€’

thanks for sharing.. im glad to reach your posting.

Collapse
 
silentwatcher_95 profile image
Ali nazari β€’

You're welcome! I'm glad you found it helpful.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay