Send mails with Mailjet from your React NestJS app in 10 min
Tags: webdev, node, typescript, saas
Published: 2021-03-29 14:05:38

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](https://dev.to/fastmodularproject/web-starter-react-nestjs-mysql-3o9i).

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](https://fast-modular-project.com).
The module is available [here](https://fast-modular-project.com/modules/mailjet-mailing).

# 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](https://app.mailjet.com/account/api_keys)

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](https://fast-modular-project.com/modules). 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](https://fast-modular-project.com)
* "Send mails with MailJet" module open source code available [here](https://fast-modular-project.com/modules/mailjet-mailing).

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