Sending email via app written in Electron/React/TS

Figured it out (finally!). I'm writing it down here in hope it will help someone in future.

The main reason why all tries and methods failed on me was that I was implementing them on the rendering/browser process rather then main electron/node process (from Electron's documentation). When I moved implementation described in details in this article (approach utilising nodemailer) to the main process, which in my case was pretty much comprised just of electron.js, and triggered it via ipc (Inter-process communication) from the rendering process it miraculously started to work!

Thanks Robert for pointing this issue out, as the following statement put me on the right path.

I was facing the same issue when trying to implement the nodemailer code client side. The reason was because nodemailer doesn't seem to work in the browser (only in node). Moving it serverside (into an express app) solved the issue.

// electron.js
var nodemailer = require("nodemailer");

function SendIt() {
  var transporter = nodemailer.createTransport({
    service: "gmail",
    auth: {
      user: "your_email@gmail.com",
      pass: "your_password",
    },
  });

  const mailOptions = {
    from: "your_email@gmail.com", 
    to: "recepient@gmail.com",
    subject: "Subject of your email",
    html: "<p>Your html here</p>",
  };

  transporter.sendMail(mailOptions, function (err, info) {
    if (err) console.log(err);
    else console.log(info);
  });
}

electron.ipcMain.on("SendIt", (event, args) => {
  console.log("ipcMain: Executing SendIt");
  SendIt();
});

If anyone is using Quasar/Electron and wants to use nodemailer. This works for me. I'm replying to this post because it's relevant to electron. As stated by the original author, nodemailer must be run as a node process and can't be run on the renderer process.

I put the nodemailer code inside the electron-preload.js file (under the src-electron directory).

Electron uses Context Isolation. Therefore, the nodemailer code needs to be put into the electron-preload.js file. Just putting it in any old .vue file will cause an error. The error I was getting was: nodemailer.createTransport is not a function

In order to overcome the Context Isolation, I had to use the Context Bridge as explained in this electron documentation: https://www.electronjs.org/docs/latest/tutorial/context-isolation

For testing purposes, I'm using ethereal.email as suggested in the nodemailer docs.

electron-preload.js:

import { contextBridge } from 'electron'

contextBridge.exposeInMainWorld('myAPI', {
    doAThing: (emailFrom, emailTo, emailSubject, emailHTML) => {
         var nodemailer = require("nodemailer")

 let transporter = nodemailer.createTransport({
    host: "smtp.ethereal.email",
    port: 587,
    secure: false, // true for 465, false for other ports
     auth: {
          user: 'user@ethereal.email',
          pass: 'password'
      },
  })
  
    const mailOptions = {
      from: emailFrom, 
      to: emailTo,
      subject: emailSubject,
      html: emailHTML,
    }
  
    transporter.sendMail(mailOptions, function (err, info) {
      if (err) console.log(err);
      else console.log(info);
    })
      console.log("in the PreLoad Script")
    }
 }) // end contextBridge.exposeInMainWorld

Then, in my .vue file (I'm calling mine personDetails.vue), I have a button, and when clicks it fires off this method:

 async sendEmailMethodSMTP() {
      myAPI.doAThing(this.emailFrom, this.emailTo, this.emailSubject, this.emailHTML )
    }, // end sendEmailMethodSMTP

I'm collecting the variable information in the information I'm passing from the .vue file (this.emailFrom, this.emailTo, this.emailSubject, this.emailHTML), to the doAThing method in the electron-proload.js file.

When the button is pressed, the information is passed to the preloader, nodemailer is fired off, and the email is sent.

I have not compiled my Quasar/Electron app to make sure this works in a live environment, but running quasar in dev mode this is working great.