Tutoriel : Comment bien envoyer vos e-mails en HTML/CSS avec NodeJS

Lorsque vous devez concevoir un site, une application ou une simple API web, il y a de grandes chances pour que vous deviez configurer un envoi d'e-mails transactionnels.

Les e-mails transactionnels sont, par opposition aux e-mails commerciaux, des e-mails contenant une information relative à une action d'un utilisateur sur votre site. Ex : e-mail d'inscription, de récupération de mot de passe, de notification,...

Un envoi d'e-mails est assez facile à configurer, mais la tâche se complique lorsque ces derniers se multiplient, qu'ils doivent être jolis et efficaces et que le code se doit d'être propre et maintenable.

Je vais donc vous montrer différents outils qui vous serviront à créer un module d'envoi d'e-mails personnalisés en quelques lignes de code !

Les outils

nodemailer

Cette bibliothèque est l'une des plus utilisées pour envoyer des e-mails transactionnels en Nodejs car elle est complète, reste simple d'accès et il existe de nombreux plugins pour se connecter facilement à différents services d'envoi d'e-mails.

Nous utiliseront deux méthodes de la bibliothèque : "createTransport(options)" pour créer la connexion au serveur SMTP, et "sendMail(data)" pour envoyer les e-mails en question.

Vous pourrez retrouver le code d'exemple dans la deuxième partie de ce tutoriel, mais vous pouvez aussi aller directement consulter la documentation :

https://www.npmjs.com/package/nodemailer

hogan.js

Comme la principale fonction des e-mails transactionnels est d'amener l'utilisateur à effectuer une action ou de lui transmettre une information sur son activité, ces e-mails doivent contenir des informations personnalisées.

"hogan.js" est un moteur de templating simple qui va nous permettre d'injecter des données dynamique dans un template HTML grâce à un système de moustaches (handlebars) du type {{data}}.

Cette bibliothèque va nous permettre de garder des templates clairs et est capable de compiler des données simples, comme de décomposer des objets ou itérer sur une liste d'objets.

Pour voir la documentation, le lien est juste ici :

https://twitter.github.io/hogan.js/

inline-css

Les clients mails ont pour but de supprimer un maximum de données inutiles dans les e-mails, à la fois pour éviter les failles de sécurité dûes aux ressources externes, mais aussi pour diminuer leurs besoin en stockage.

C'est pour celà que de nombreux clients suppriment les éléments mais aussi parfois les balises du contenu des e-mails, obligeant les développeurs à écrire le style de ces derniers directement en inline.

Mais afin de garder la lisibilité du code HTML, de séparer les données du style et surtout de garder un code maintenable, nous allons utiliser la bibliothèque "inline-css" qui va nous permettre de parser les balises