nodemailer: correo electrónico en Node JS

Cuando hablamos del uso de correo electrónico dentro del desarrollo con Node js, nodemailer es una de las mejores opciones. Si bien podemos encontrar alternativas, nodemailer nos permite usar fácilmente un correo electrónico para nuestra aplicación con pocas líneas de código.

Aunque es fácil de configurar, también debemos tener cuidado con los datos proporcionados para una buena ejecución y en algunos casos, configuraciones por fuera de la aplicación, como en nuestra cuenta de google por ejemplo, para workspace.

Hoy veremos cómo configurar un correo electrónico vía SMTP usando Nodemailer, para así enviar correos electrónicos desde nuestra aplicación con Node JS. Vamos a comenzar!

Lo que vas a necesitar

Comparto contigo varios de los elementos que vas a necesitar para poder ejecutar bien este post. Si tienes dudas, recuerda que puedes preguntar en la sección de preguntas, en la parte inferior del post.

  1. Repositorio: haz click aquí para ver el repositorio en GitHub. Si quieres aprender a clonar el repositorio, haz click aquí para ver el post con video!
  2. Web de nodemailer: Haz click aquí para ir a la web oficial.

Instalar Nodemailer

cómo instalar nodemailer
Qué es Gas y GasPrice: transacciones y congestión en blockchain

Cuando ejecutamos transacciones en blockchain es probable que desconozcamos los costos o tiempos de …

truffle ganache nodejs
Entorno de prueba blockchain con truffle ganache Nodejs: sesión 1

Si estás iniciando en la programación blockchain, es demasiado importante conocer los entornos de pr…

Cómo subir y eliminar imágenes en AWS S3 NODEJS y React

En la construcción de nuestra aplicación web, el gestor de archivos es tal vez uno de los pasos más …

Cabe aclarar que para la instalación y uso de nodemailer ya debes tener instalado en tu pc Node js. Ahora, para iniciar puedes ingresar el siguiente comando en la terminal:

npm i nodemailer

A continuación deberás requerirlo o importarlo dependiendo si estás usando react o ejs. En el caso del video de este post, lo uso con ejs y todos los paquetes son requeridos, no importados, entonces puedes usar la siguiente línea justo al inicio del archivo js del servidor o enrutamiento, o bien, la función que hablaremos más adelante.

const nodemailer = require('nodemailer');

Una vez esté instalado y requerido hay varias formas de inicializa pero voy a compartir contigo 2 de los fragmentos más importantes para su uso. Ambos deben ser usados y ambos me funcionan a la perfección. Vamos a verlos!

Configuración correo nodemailer

Este primer fragmento permitirá la autenticación del correo electrónico vía SMTP. Recuerda que dependiendo del gestor de correo electrónico que uses, como google workspace, oultook, todos cuentan con un puerto diferente. En este caso revisaremos cómo hacerlo con google workspace.

const transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 587,
    auth: {
      user: '',
      pass: '',
    },
});

En el código anterior podrás ver las siguientes propiedades en el objeto:

  • host: este es diferente de cada empresa, como lo mencioné al inicio. En este caso, el host es el de google y el mismo de workspace. Recordemos que workspace es de pago. Si quieres ver cómo tener una cuenta con descuento, haz click aquí para ver el post.
  • port: al mismo tiempo, el puerto el diferente para cada empresa que aloja tu correo electrónico, y como lo hemos visto con las secciones de wordpress, puede que funcionen algunos puertos como en otros casos, presenten problemas. En el código anterior, el puerto funciona correctamente.
  • auth: esta parte es la autenticación y consiste en compartir dentro de las comillas el correo electrónico principal de la cuenta de google workspace y en pass, la contraseña de dicho correo.

Envío de correo electrónico

El segundo fragmento es clave para su conclusión ya que solicita varios pasos. El primer fragmento básicamente es de autenticación mientras que este segundo consta de toda la información que necesitamos para enviar un correo electrónico correctamente.

    transporter.verify().then(console.log).catch(console.error);
    transporter.sendMail({
    from: '"Nombre de tu empresa" <[email protected]>', // sender address
    to: "email al cual vas a enviar", // list of receivers
    subject: "asunto del correo electrónico", // Subject line
    text: "texto plano del correo", // plain text body
    html: "añade aquí la versión html del correo electrónico", // html body
    attachments: [
    {
        filename: 'fb.png',
        path: './public/images/fb.png',
        cid: 'fb' //same cid value as in the html img src
    },
    {
        filename: 'ig.png',
        path: './public/images/ig.png',
        cid: 'ig' //same cid value as in the html img src
    },
    ],
    }).then(info => {
    console.log({info});
    }).catch(console.error);

Este segundo fragmento está compuesto de los siguientes elementos:

  • from: desde donde se enviará el correo electrónico. Dentro de las comillas, ingresa el nombre de tu empresa o cómo quieres que te vean en el correo electrónico. No modifiques nada más ya que esto viene desde la autenticación en el primer fragmento.
  • to: esta propiedad contendrá el valor de los correos electrónicos en string, o dentro de las comillas.
  • subject: El asunto del correo electrónico se guardará como valor en esta propiedad.
  • text: es claro que no todos los correos pueden recibir un html o tal vez la configuración de seguridad no se los permita, entonces este mensaje en texto plano será el que llegue como mensaje.
  • html: este será el que veamos en la plantilla en el siguiente punto.

Imágenes en nodemailer: attachments

imágenes nodemailer

Esta pequeña sección la hago independiente porque aunque la contiene el fragmento anterior es importante mencionarlo. Si deseas añadir imágenes al correo electrónico estos pueden ser como archivos adjuntos o bien, que estén dentro del html del correo. En el caso del html, cada una de las imágenes que vas a agregar DEBEN ESTAR DENTRO DE LA APLICACIÓN. Es decir dentro del folder principal, que ves en VS Code, por ejemplo.

Adicional, cada imagen irá en un objeto independiente dentro de la propiedad attachments en el fragmento de envío de correo electrónico, de la siguiente forma:

  • filename: el nombre del archivo, generalmente añade la extensión del archivo para evitar errores.
  • path: la ruta dentro de la carpeta principal. Si cuentas con una función o configuración para archivos estáticos, omítela en este caso y pon la ruta completa.
  • cid: esta será la variable que será reemplazada dentro del htm, siendo el valor de cid.

Plantilla html para nodemailer

plantilla html nodemailer

La anterior imagen muestra el resultado de mi plantilla html para nodemailer. Voy a compartirla a continuación y luego te hablaré de algunos puntos clave que debes tener en cuenta:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        p, a, h1, h2, h3, h4, h5, h6 {font-family: 'Roboto', sans-serif !important;}
        h1{ font-size: 30px !important;}
        h2{ font-size: 25px !important;}
        h3{ font-size: 18px !important;}
        h4{ font-size: 16px !important;}
        p, a{font-size: 15px !important;}

        .claseBoton{
            width: 30%;
                background-color: #fcae3b;
                border: 2px solid #fcae3b;
                color: black; 
                padding: 16px 32px;
                text-align: center;
                text-decoration: none;
                font-weight: bold;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                transition-duration: 0.4s;
                cursor: pointer;
        }
        .claseBoton:hover{
            background-color: #000000;
            color: #ffffff;
        }
        .imag{
            width: 20px;
            height: 20px;
        }
        .contA{
            margin: 0px 5px 0 5px;
        }
        .afooter{
            color: #ffffff !important; 
            text-decoration: none;
            font-size: 13px !important;
        }
    </style>
</head>
<body>
    <div style="width: 100%; background-color: #e3e3e3;">
        <div style="padding: 20px 10px 20px 10px;">
            <!-- Imagen inicial -->
            <div style="background-color: #000000; padding: 10px 0px 10px 0px; width: 100%; text-align: center;">
                <img src="/public/images/pretwor.png" alt="" style="width: 200px; height: 60px;">
            </div>
            <!-- Imagen inicial -->

            <!-- Contenido principal -->
            <div style="background-color: #ffffff; padding: 20px 0px 5px 0px; width: 100%; text-align: center;">
                <h1>Titulo de la notificación</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit augue, venenatis porta tellus bibendum 
                    consequat ultricies nec fringilla sagittis, varius elementum et eget vel taciti blandit. Neque 
                    fusce hac magna ligula ultricies gravida facilisi eget molestie, vivamus sodales ornare faucibus 
                    sollicitudin netus mauris odio, tortor iaculis quisque penatibus convallis posuere nostra volutpat.
                    Primis urna laoreet donec aliquet id placerat natoque fusce, habitant volutpat ridiculus at massa nullam eget, 
                    penatibus parturient a in purus vulputate per. Erat cras elementum facilisi eleifend etiam cursus, mus sed dictum et justo, 
                    penatibus fusce sociosqu aliquam conubia.
                </p>

                <!-- Gracias -->
                <p>Gracias por tu tiempo.</p>
                <p style="margin-bottom: 50px;"><i>Atentamente:</i><br>Equipo Pretwor</p>

                <!-- Botón -->
                <a class="claseBoton" href="https://www.pretwor.com/">Pretwor</a>
            </div>
            <!-- Contenido principal -->

            <!-- Footer -->
            <div style="background-color: #282828; color: #ffffff; padding: 5px 0px 0px 0px; width: 100%; text-align: center;">
                <!-- Redes sociales -->
                <a href="https://www.facebook.com/pretwor" class="contA"><img src="/public/images/fb.png" class="imag" /></a>
                <a href="https://www.instagram.com/pretwor/" class="contA"><img src="/public/images/ig.png" class="imag" /></a>
                <a href="https://wa.me/573224294332" class="contA"><img src="/public/images/wapp.png" class="imag" /></a>
                <a href="mailto:[email protected]" class="contA"><img src="/public/images/em.png" class="imag" /></a>
                <!-- Redes sociales -->

                <h4>Soporte</h4>
                <p style="font-size: 13px; padding: 0px 20px 0px 20px;">
                    Comunícate con nosotros por los siguientes medios:<br>
                    Correo: <a class="afooter" href="mailto:[email protected]">[email protected]</a><br>
                    Whatsapp: <a class="afooter" href="https://wa.me/573224294332">+57 322 429 4332</a><br>
                </p>
                <p style="background-color: black; padding: 10px 0px 10px 0px; font-size: 12px !important;">
                    © 2022 Pretwor, todos los derechos reservados.
                </p>
            </div>
            <!-- Footer -->



        </div>
    </div>
</body>
</html>

La anterior plantilla html para nodemailer en si, no es compleja de entender pero si hay puntos que debes tener en cuenta:

  1. Una vez sean ingresadas al código de envío como variable, es importante que cambies la fuente de la imagen por cid:nombredelcid. Como lo vimos anteriormente, las imágenes dentro del correo van con un único cid. Este es el que se debe reemplazar en la plantilla para que funcione correctamente.
  2. Evita CDN: aunque aquí uso el de google fonts, intenté usar por mucho tiempo bootstrap dentro de la plantilla pero no fue posible. Todas las clases deben ser manuales y deben estar dentro del mismo html, no como hoja de estilos indpendiente.

Video de ayuda

Este proceso puede llegar a ser complejo cuando queremos ejecutarlo ya que requiere de varios pasos si queremos añadir html, imágenes y demás. Para esto hice el siguiente video que te ayudará bastante a entender el funcionamiento de nodemailer con todas sus características. si te gusta no olvides dar like y suscribirte!

nodemailer

Producto sugerido

Comparto algunos de los productos que uso en mi set-up de desarrollador y este es uno de esos. Mi ratón ahora mismo y funciona perfecto para macbook pro m1. Si quieres ver la reseña completa haz click aquí para ver el post con video!

SSL – 39 valoraciones

Logitech Signature M650 – Ratón inalámbrico

  • Desplázate más inteligente: con el mouse inalámbrico Logitech Signature M650 obtienes precisión línea por línea para documentos y desplazamiento súper rápido para páginas web largas; simplemente cambia los modos con un movimiento de la SmartWheel
  • Ajuste óptimo para tu mano: este cómodo ratón está diseñado para manos pequeñas y medianas, para un ajuste óptimo
  • Mejora tu comodidad: este mouse de trabajo proporciona largas horas de comodidad gracias a una forma contorneada, zona de pulgar suave y agarres laterales de goma que mantienen tu mano cómoda y en su lugar
  • Conecta la forma que quieras: conecta este mouse inalámbrico para computadora en un instante a través del receptor USB Bluetooth de baja energía o Logi Bolt
  • Menos ruido, más enfoque: ya sea trabajando en la oficina o en casa, Logitech Signature M650 es un mouse silencioso, lo que te permite disfrutar del 90% menos de ruido de clic con la tecnología SilentTouch*

VER EN AMAZON

Conclusión

El correo electrónico es clave para cualquier negocio digital. En marketing, suele ser el mayor retorno por inversión hasta la fecha y si lo unimos con el desarrollo, las posibilidades son infinitas. Por esto, este post se encarga de mostrar algunas de sus funcionalidades junto con una plantilla para que puedas usar totalmente gratis!

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuar!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

Resumen
Nodemailer | Correo Node JS | PLANTILLA HTML | configuración
Nombre del artículo
Nodemailer | Correo Node JS | PLANTILLA HTML | configuración
Descripción
Si estás buscando usar correo electrónico con tu aplicación de Node JS, debes considerar nodemailer. Haz click aquí para ver cómo hacerlo ✅
Autor
Publisher Name
Eduardo Arias
Publisher Logo

Deja un comentario

Carrito de compra