Enviar Emails en React

¿Se pueden enviar emails de forma nativa?

La respuesta es no, React.JS no incluye los paquetes necesarios para poder enviar emails. Aparte de que React es la parte cliente (el navegador Web), por lo que no hay un servidor que esté a la escucha para realizar los envíos.

En este post vamos a ver una forma de poder realizar envíos de email usando una aplicación de React como cliente web y usando ciertos paquetes para poder tener un servidor a la escucha, así cuando un usuario mande un formulario desde el cliente web el servidor recogerá los datos y realizará la lógica para enviar el email.

Estructura de los directorios y archivos

La estructura será como se describe en la imagen de más abajo.

Primero nos centraremos en el client, que será el que se encargue de mandar a la dirección de correo electrónico que especifiquemos el mensaje que el usuario introduzca.

Una vez hecho eso veremos para qué sirven los otros dos archivos.

Creación de la aplicación React

Lo primero es asegurarse de tener instalado Node.js, en caso de no tenerlo podéis instalarlo desde aquí: https://nodejs.org/es/ (instalar la versión LTS).

También tener instalado Visual Studio Code para poder editar los archivos: https://code.visualstudio.com

Una vez hecho eso abrimos el Símbolo de Sistema (o cmd) de Windows como administrador, para evitar problemas de permisos, y nos colocamos en la carpeta donde vamos a crear la aplicación de React. Para moverse entre las carpetas en el cmd se utiliza el siguiente comando:

cd [ruta]
Ejemplo: cd C:\Users\[Usuario]\Documents “con esto irias a los documentos del usuario introducido”

Una vez en la ruta deseada ejecutamos el siguiente comando:

npx create-react-app client

Este comando nos instalará los paquetes necesarios y nos creará los archivos para poder utilizar React.

Una vez que se haya creado entraremos a la carpeta client con cd client

Instalación de paquetes en la aplicación React

Los paquetes que necesitamos en la aplicación React necesitamos dos cosas:

• Bootstrap (opcional): Añadirá Bootstrap a la app para poder tener un diseño más amigable.
• Axios: Nos permitirá hacer peticiones HTTP que recibirá nuestro servidor (más adelante se mencionará más). Página web: https://github.com/axios/axios

Para instalar Bootstrap tenemos que ejecutar el siguiente comando:

npm install --save Bootstrap

Después ejecutamos el siguiente comando:

code .

Se nos abrirá Visual Studio Code. Cuando se haya abierto nos dirigiremos a src/index.js y realizaremos el siguiente import:

import 'bootstrap/dist/css/bootstrap.min.css';

Ahora volvemos al cmd y ejecutamos el siguiente comando para instalar axios:

npm –save install axios

Cuando se instale ya tendríamos los paquetes necesarios en la aplicación de React.

Programando el diseño y la lógica de la aplicación React

Lo primero que tenemos que hacer es cambiar App.js para que sea un componente. Para ello, importamos Component de React:

import React, { Component } from “react”

Después importamos axios, para ello escribimos el siguiente import:

import axios from “axios”

Ahora modificamos la function para que sea una clase y creamos el render() para poder escribir el return con el código HTML.

Una vez hecho esto escribiremos el formulario HTML con sus referencias para poder obtener los datos que escriba el usuario. Guardaremos los datos introducidos del usuario en el state.

También escribiremos el método comprobarCambios(). Se encargará de comprobar si el usuario introduce algún dato e irá actualizando el state.

Por último crearemos el método enviarEmail() que usará los datos guardados en el state para realizar el envío del email. También escribiremos el constructor para ligar el método al callback, si no sería ‘undefined’.

El método obtendrá los datos del state y se mandarán a nuestro servidor para realizar el envío.

Programando el servidor para enviar el email

Ahora tenemos que configurar el servidor para que reciba los datos de la aplicación de React y realice el envío del email.

Lo primero es dirigirnos al package.json de la aplicación y añadir un proxy después de private.

"proxy": "http://localhost:3001"

Una vez hecho esto (en VS Code) debemos salir de la aplicación de react (client) y crear un archivo index.js.

Cuando se haya creado debemos ir al cmd, situarnos donde se encuentre el index.js recién creado y escribimos el siguiente comando:

npm init -y

Este comando nos generará un package.json. De momento lo dejamos ahí ya que primero tenemos que instalar unos paquetes.

Paquetes necesarios en el servidor

Los paquetes que instalaremos serán los siguientes:

• Express: Nos permitirá tener una API para que podamos recibir los datos de la aplicación de React. http://expressjs.com
• Body-parser: Se encargará de parsear los datos que recibamos para poder utilizarlos. https://github.com/expressjs/body-parser#readme
• Nodemailer: Nos permitirá configurar y realizar envíos de email de forma sencilla. https://nodemailer.com/about/
• Nodemon: Mantiene el servidor corriendo y a la escucha. En caso de que ocurra algún cambio reiniciaría automáticamente el servidor. https://nodemon.io
• Concurrently: Nos permite ejecutar múltiples servicios desde un solo comando. https://github.com/kimmobrunfeldt/concurrently#readme

Para instalar los paquetes utilizaremos el siguiente comando:

npm –save install express body-parser nodemailer nodemon concurrently

Una vez que se hayan instalado los paquetes abriremos el package.json que se ha creado anteriormente.

Modificaremos los scripts que incluye el archivo por los siguientes:

"scripts": {
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  }

Una vez hecho esto ya solo queda configurar index.js

Configurando el servidor

Lo primero es añadir los paquetes que vamos a utilizar, para ellos creamos constantes que utilicen esos paquetes. Después creamos la constante app en la que llamamos a express.

Una vez hecho eso añadimos el body-parser a la app para que nos realice el parseo de los contenidos que reciba.

Ahora configuraremos el método post para que la API realice el envío del email. Usará la misma ruta que configuramos en el client.

Ya podemos empezar a configurar el nodemailer para poder realizar el envió del email. Lo primero va a ser usar el método createTestAccount() de nodemailer. En el estará toda la configuración del email.

Después escribiremos el código HTML que será el estilo que tendrá el email que reciba el usuario. Para ello nos creamos una constante llamada htmlEmail que tendrá ese diseño.

Todos los datos que recibimos del cliente están guardados en req.body

Ahora crearemos una variable transporter que tendrá la configuración SMTP (en este caso Gmail) para poder acceder a su servicio de email.

Una vez hecho el paso anterior, configuraremos las opciones del email como lo requiere nodemailer.

Por último utilizamos el método sendMail() del transporter al que le pasaremos las opciones del email creadas anteriormente.

Con esto hemos terminado la configuración de nodemailer. Sólo queda hacer que el servidor esté a la escucha en el puerto 3001.

Para ello crearemos una constante PORT en la que le asignaremos el puerto 3001 o el que ya esté configurado en Node.js.

Por último usaremos el método listen() al que le pasaremos el PORT y mostraremos un mensaje en la consola para saber que está a la escucha.

Con esto ya estaría configurado todo, solo queda probarlo.

Prueba de funcionalidad

Para ello nos dirigiremos al CMD y ejecutaremos el siguiente comando:

npm run dev

Si todo está bien configurado debería arrancarse tanto el servidor como el cliente en esa misma consola.

Se nos habrá abierto en el navegador una pestaña en el que estará el formulario que hicimos anteriormente en el client.

Por último, ya queda comprobar cómo funciona. Para ello mandaré un email de prueba a uno de mis correos para ver si funciona.

Si todo ha salido bien nos habrá llegado un correo como este.

Y con esto podemos enviar emails usando un cliente React.

Conclusiones

La parte que más me costó sacar era el tener un servidor a la escucha, es algo que nunca había hecho en Node.js por lo que era lo que más me preocupaba. Los paquetes utilizados fueron bastantes sencillos de utilizar siguiendo su documentación.

La ventaja de realizar el envío llamando a una API es que podría realizarse de forma muy parecida en un servidor real, reemplazando la parte del servidor pero manteniendo de forma muy parecida la parte del cliente.

Autor: Adrian Moreno Gallardo
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2019 – 2020
Código / recursos utilizados / Otros datos de interés:  

• Github: Enlace a Github
• Paquetes:
  • axios: https://github.com/axios/axios
  • express: http://expressjs.com
  • body-parser: https://github.com/expressjs/body-parser#readme
  • nodemon: https://nodemon.io
  • nodemailer: https://nodemailer.com/about/
  • concurrently: https://github.com/kimmobrunfeldt/concurrently#readme

Redes Sociales: LinkedIn