Send mails with Mailjet from your React NestJS app in 10 min

leonidascostas

Leonidas Costas

Posted on March 29, 2021

Send mails with Mailjet from your React NestJS app in 10 min

In this article I will share with you a module that sends mail to customers using MailJet. On my side, I used this module on top of the React/Node/MySQL starter. This starter has been presented to you last week in this article.

Maybe you are wondering... why using Mailjet ? Because it's free until 6000 mails/months and no credit card is required :D

Prerequisite

By getting the web starter I was mentioning above, you'll be able to plug this mail system module directly on top of it and have a functional project with an authentication and a mail system in less than 10 minutes.

Note that using the starter is not mandatory, you can also use the module as standalone. The integration won't be as easy as with the starter, but it should still be simple to integrate it in your already created project :)

The starter is available here.
The module is available here.

How does it work?

In this module, we'll use Mailjet service. We can configure mail templates on their website which will be identified by a unique ID. Those templates can be filled with static content and dynamic content that will change for every mails (pretty usefull to set usernames or callback url on a button).

The backend will call Mailjet API to sends mails giving :

  • receiver
  • template ID
  • variables (dynamic data)
  • ...

Setup the mailing system

  1. Mailjet configuration
    Create a MailJet account.
    Create your mail transactional template and publish it.
    Keep the ID of your template in a safe place, we'll need it after.

  2. Mailjet dependency
    Install the node-mailjet dependency in your backend : npm install node-mailjet@3.3.1

  3. Mailjet API credentials
    Set your mailjet API credentials you get from first step into your environments files located here : ./backend/src/environments. If you already forgot your API credentials, you can find them back using this link

  4. Backend service
    Copy the mailer folder of this module in your backend. You can know setup the template ID from your published template into templates.enum.ts.

That's it ! You are now enable to send mail to a specific user, using your pre-defined template a the MailerService available in your backend :)

Conclusion

I hope this module will help you saving some time while trying to implement a mailing system in your project.

Note that all modules currently available on the React/NestJS/MySQL web starter are listed here. Do not hesitate to ask for a tutorial on another module on this starter in the comment section !

Links:

  • The platform sharing the starter and it's modules : Fast Modular Project
  • "Send mails with MailJet" module open source code available here.

Do not hesitate to pin and like if you appreciated the article ❤️

💖 💪 🙅 🚩
leonidascostas
Leonidas Costas

Posted on March 29, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related