I'm trying to implement email/gmail sending mechanism in my application. This is a desktop application with the hosted content written with the help of React and Electron. I've been trying to implement it in a various ways described on the web, using various modules, googleapi etc but always ended up with some weird error and even more enigmatic issue description - the code was usually based on the "Node.js" section of the article. I don't know if I fully understand the architecture side of this problem and if it is even possible to trigger the sending mechanism or is it something that has to be implemented in form of a server-side service. If anyone could shed some light on the issue I would greatly appreciate it as I've already spent too many hours on the issue. Thanks in advance!

I'm trying to implement email/gmail sending mechanism in my application. This is a desktop application with the hosted content written with the help of React and Electron. I've been trying to implement it in a various ways described on the web, using various modules, googleapi etc but always ended up with some weird error and even more enigmatic issue description - the code was usually based on the "Node.js" section of the article. I don't know if I fully understand the architecture side of this problem and if it is even possible to trigger the sending mechanism or is it something that has to be implemented in form of a server-side service. If anyone could shed some light on the issue I would greatly appreciate it as I've already spent too many hours on the issue. Thanks in advance!

• javascript
• node.js
• typescript
• google-api
• gmail

• you should choice some method like nodemailer./about or any... there is many. and then if you stuck show us minimal repreduction of your error then we can help. now you only describe that you have some error with some solutions so ... now i can say "I'm sorry for that" :( – Robert Commented Dec 18, 2020 at 15:39
• I suspect that you have problem with SMTP. First step in nodemailer : "Create a Nodemailer transporter using either SMTP or some other transport mechanism" – Robert Commented Dec 18, 2020 at 15:40
• Hey Robert, yes I've tried to use nodemailer as described in codeburst.io/…, but ended up with an exception "Uncaught TypeError: net.isIP is not a function" described in more here: github./facebook/react/issues/16579 – Eric Commented Dec 18, 2020 at 15:41
• maybe just do the same, move sending mails to small node api (stackoverflow./questions/55163689/…) – Robert Commented Dec 18, 2020 at 15:48
• 1 I just had an epiphany, I will get back in a second... – Eric Commented Dec 18, 2020 at 15:58

2 Answers 2

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 prised just of electron.js, and triggered it via ipc (Inter-process munication) 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: "[email protected]",
      pass: "your_password",
    },
  });

  const mailOptions = {
    from: "[email protected]", 
    to: "[email protected]",
    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 overe the Context Isolation, I had to use the Context Bridge as explained in this electron documentation: https://www.electronjs/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: '[email protected]',
          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 piled my Quasar/Electron app to make sure this works in a live environment, but running quasar in dev mode this is working great.