Send Email from Quasar App Example Needed

sebag

don’t think you can send an e-mail directly from the frontend, you need some backend API (Node JS, PHP) and SMTP server, that will send an e-mail for you

pazarbasifatih

The thing you want to setup for you app on your own is a multi million dollar business You have to be very dedicated with it.
If nothing else works, give up the IndexedDB for good and try Firebase Extensions for that.
You can either Trigger an email upon an event in the Firestore database and make use of an email template by populating the HTML markup with the data from your Firestore.
Or directly share login email and displayName data with Mailchimp and manage everything visually by creating marketing campaigns etc from there, but it’s a payed service.

The question is… how much time do you want to spend on all of that?

cynderkromi

@sebag I sometimes want to send emails via SMTP, as my users will be sending about 50 emails at a time sometimes. But I also want the option to fire the local email client and have them send emails that way too. Thanks for the info.

@pazarbasifatih I have to use indexedDB, it’s going to be a desktop app. And I am spending a lot of time on because I enjoy it.

beets

If this is a user facing app, you definitely need some sort of backend to decide that it’s okay to send an email.

If this is an admin only app, and is protected behind at least basic auth, you probably could send emails direct via amazon SES, mailgun, or other similar API services. But be aware that you’d be putting sensitive credentials in javascript with is just asking for abuse unless only trusted users are allowed to download that javascript.

pazarbasifatih

@cynderkromi
Oh ok, I didn’t realize you wanted an email client. I thought it was for mailing campaigns.
You can use Nodemailer with a Nodejs backend. (You’ll need cors to unblock the requests coming from the browser. I don’t know the nature of your app, try it with or without.)

const nodemailer = require('nodemailer');
const cors = require('cors')({origin: true});

Then you’ll need some sort of smtp configuration for the source mail. you can retrieve them and save them in the env maybe… I don’t know… eg:

let transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: process.env.EMAIL_USERNAME,
        pass: process.env.EMAIL_PASSWORD
//     user: 'yourgmailaccount@gmail.com',
//     pass: 'yourgmailaccpassword'
    }
});

Then you’ll be sending the mail. You’ll define the receiver via a request to this Nodejs module. The request will include the destination. You can ask for these informations in a Quasar input element and vmodel it to a data, then send the request when user hits the send Quasar button. Take a look at this stackover link later on if you’re looking for different confs.

let sendMail =((req, res) => {
    cors(req, res, () => { //cors may or may not be necessary
const dest = req.query.dest;

        const mailOptions = {
            from: process.env.EMAIL_USERNAME, // Something like: Jane Doe <janedoe@gmail.com>
            to: dest,
            subject: 'Spam mail my client sends', // email subject
            html: `<p style="font-size: 16px;">Buy this now!!</p>
                <br />
                <img src="....png" />
            ` 
// email content in HTML
        };
})})//check the paranthesis please


module.exports = sendMail;

cynderkromi

@beets It’s user-facing, but there are limited users. It’s a dog trial secretarial software where the secretaries take dog trial entries (people, dogs, runs) and send emails to the people who have entered with their entry information. I currently have a working one in FileMaker but I don’t like it much, so am rewriting it in Quasar. (liking Quasar a LOT better so far). Thanks for your information!

@pazarbasifatih oh yeah nope for a mailing campaign I’d definitely use Mail Chimp. I have read about NodeMailer and that looks good, thanks so much for your example! I will work on that.

This is a huge learning curve for me so my development speed is super slow, but it’s fun.

Long answer longer… I’m excited that I have a very basic working application now, even uploaded it to my host: Demo App. The only things that work now are the People and Dogs buttons to add people and dogs. I wanted to make sure it will publish okay before going on. And it’s cool that with Quasar I can write it for all types of distribution, though it will be a Desktop App in the end.

I will have a super limited market for this and I definitely won’t be getting fully compensated for my time. Most of the software that exists like this is written in MSAccess and runs in Windows only. I’m a retired programmer and a dog trial secretary and I use a Mac, so I figured I would write a nice one myself.

cynderkromi

@pazarbasifatih So I am able to use your example and set up nodemailer to send email through my Quasar project when I run my project via electron on my MacBook. However, when I run the application without electron, and develop in the browser, I get an error when using the same code:

Error: Cannot find module 'net'
    at webpackEmptyContext (eval at ./node_modules/defaultable sync recursive (2.js:22), <anonymous>:2:10)
    at Object.workaround_require (defaultable.js?b308:49)
    at require (defaultable.js?b308:77)
    at eval (server.js?c5b7:9)
    at defaulter (defaultable.js?b308:83)
    at defaultable (defaultable.js?b308:63)
    at good (defaultable.js?b308:174)
    at Object.eval (server.js?c5b7:5)
    at eval (server.js:242)
    at Object../node_modules/hbo-dnsd/server.js (vendor.js:3081)

What do I need to do differently to run it through the browser? I am also working on a small Quasar app that will allow people to join a club via an online form. My big app will be run on the desktop, but now I want this little app to run on the web. Thanks!

beets

@cynderkromi Note that pazarbasifatih’s example used nodemailer, which is meant for node. The net module is also a node module, which won’t work on the browser.

Again, I’d rethink this since it’s a user facing app. Trying to skip a simple nodejs backend to send emails means you’re bundling private credentials to the whole internet. On the nodejs backend, you can keep using nodemailer, and just make a simple POST endpoint that will send an email for you.

cynderkromi

Hmm okay. PHP does this fairly easily, so I’m not sure why I can’t do it from Quasar. There has got to be a way to send the occasional email from an online Quasar app. I will keep hunting.

beets

@cynderkromi said in Send Email from Quasar App Example Needed:

There has got to be a way to send the occasional email from an online Quasar app. I will keep hunting.

Well there is, if you use a service like AWS, sendgrid, mailgun, etc. Then you’d use axios to post to their API to send a mail. But I must re-iterate again, by doing so, your secret credentials are public, and anyone could grab them, use them for spam or phishing (since it will show up as sent by you) and rack up a bill in your name. I’d highly suggest to make just a simple PHP / nodejs backend that accepts a few parameters, and sends out the email.

cynderkromi

Okay, I am using https://www.emailjs.com/ and it’s working great so far. I need to now also add a PayPal button to it so I can combine the email and the Payment!

beets

@cynderkromi +1, they are basically just a paid backend. Will work fine if you are in one of the cheaper tiers. If more than that I’d recommend rolling your own PHP script.

They also explain what I was trying to say in their FAQ:

Can’t I use services like Sendgrid or Mandrill directly?

All email services require some sort of authentication to send the emails on your behalf. That makes it a really bad idea to use them directly from client side – revealing your password or your secret keys will allow anyone send emails on your behalf.

EmailJS keeps your authentication details on the server side, and the client side code just triggers a predefined email template, similarly to how any client-server application is working.

cynderkromi

They allow for 200 emails a month. If we get 200 a year we’ll be doing well!

cynderkromi

It’s done!! I’m so excited. LOL. The little application now will take payment via PayPal AND send me an email, and the person joining an email. Since we don’t usually get more than 40 members per year, this will work great.

http://bristlenosedog.com/join/#/

pazarbasifatih

Sorry, I was busy for a while.
@cynderkromi have you considered making a messages module so your users can message each other?
You can send email notifications to the users when they receive a message…
~You’ve got a message from the {{user}} which says {{first100CharMessage}} Click and learn more~
You can’t control the outbound traffic with you current knowledge and It might be an invitation for trouble sent to your home address. You’ll have to log a lot of things. With user messages you’ll at least restrict the message traffic to be in between the users.

Quasar is a frontend framework. What you want to do involves mostly backend.

cynderkromi

@pazarbasifatih I didn’t know Quasar could do that! That would be a really fun thing to put in, and it would help me learn another part of Quasar. Thanks!

pazarbasifatih

@cynderkromi Yes you can create the messaging module with Quasar and store the messages in a backend solution. Then each time a user sends a message to another, the backend can trigger a mail notification. The easiest solution is Firebase. You can find courses telling exactly how you can set this up step by step. (search udemy first)

cynderkromi

@pazarbasifatih That’s really cool. What is used to fire off the email itself?

pazarbasifatih

Believe me if you’re asking this particular question you’re better off using a managed backend. Try Firebase. It’s easy to learn and goes a long long way.
But if you insist on taking the hard way, you might want to check the Nodemailer. You’re going to have a lot of fun (!) debugging stuff in your Authentication services and Database
And if you do so please… don’t ever give to end user the control of your mail module… like never…

cynderkromi

@pazarbasifatih what does Firebase do to make email work online?

I have a desktop app that I’m using IndexedDB (Dexie) with that’s working well. But I have a couple of online apps now. I could use Firebase but they don’t really need a database.

No More Posting New Topics!

Send Email from Quasar App Example Needed