{"id":56,"date":"2022-02-09T07:32:00","date_gmt":"2022-02-09T07:32:00","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/sylee89\/?p=56"},"modified":"2022-02-13T22:37:11","modified_gmt":"2022-02-13T22:37:11","slug":"how-to-use-nodemailer","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/sylee89\/2022\/02\/09\/how-to-use-nodemailer\/","title":{"rendered":"How to use Nodemailer"},"content":{"rendered":"\n<p>One of my tasks for the project I am working on was to create a function that allows users to send an invitation link to their candidates. So, for this functionality, I had to implement &#8220;send email&#8221; on our web application. In order to achieve the task, I had researched. I found there are two packages: nodemailer and emailjs. Long story short, I decided to use nodemalier because it is free and there is no limit on sending emails (but emailjs, you have to pay to use it or if you are willing to use the free version, it is limited to 200 emails per month).<\/p>\n\n\n\n<p><strong>What is the nodemailer?<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/nodemailer.com\/nm_logo_200x136.png\" alt=\"Nodemailer\" \/><\/figure>\n\n\n\n<p>Nodemailer is a module for Node.js applications to allow sending email. <\/p>\n\n\n\n<p><strong>How to implement sending email function with nodemailer?<\/strong><\/p>\n\n\n\n<p>You might be able to find many video lectures online, but most videos are dealing the function when if it is in the same server(or Port). However, if you working on react, as you already know, the front-end and back-end are running on the different server ports. In my case, the front-end is running on port:3000 and the server is running on port:7000.<\/p>\n\n\n\n<p><br>So I have to pass JSON data from 3000 to 7000. So, without middleware, you cannot achieve that.<\/p>\n\n\n\n<p><br>In this case, Axios can be a good solution since you can send the data to the server port with Axios. And, here is the code I implemented:<br>Write Axios code on your front-end function where you want to evoke sending email<\/p>\n\n\n\n<pre class=\"wp-block-code has-bucktooth-white-color has-paddletail-black-background-color has-text-color has-background\"><code> <span style=\"background-color: inherit;font-size: inherit;letter-spacing: -0.015em\">axios({                               \/\/call axios<\/span><code>   method: \"POST\",\n   \/\/set url with your server port\n   url:\"http:\/\/localhost:7000\/send\",              \n   data: {                            \/\/build a data form\n    name: emailSubject,               \/\/Send send           \n    email: emailAddress,\n    messageHtml: emailContext\n   }\n }).then((response)=&gt;{                    \/\/ Waiting response  \n    if (response.data.msg === 'success'){    \/\/display result     \n        alert(\"Email sent, awesome!\");            \n    }else if(response.data.msg === 'fail'){\n        alert(`Oops, something went wrong with`)\n    }\n})<\/code><\/code><\/pre>\n\n\n\n<p>Server side code:<\/p>\n\n\n\n<pre class=\"wp-block-code has-paddletail-black-background-color has-background\"><code><code>const express = require('express');         \/\/load packages\nconst nodemailer = require('nodemailer');\n\napp.use(express.json());\n\napp.post('\/send', (req, res)=&gt;{            \/\/catch post send\n    console.log(req.body)\n\n    const transporter = nodemailer.createTransport({\n        service: 'gmail',\n        auth:{\n            user: \"from email address\",\n            pass: \"password\"\n        }\n    })\n\n    const mailOptions = {\n                 \/\/build mail option\n        from: \"quizbanana467@gmail.com\",\n        to: req.body.email,       \/\/use data from front-end\n        subject: `${req.body.name}`,\n        text: req.body.message\n\n    }\n\n    \n    \/\/send email\n    transporter.sendMail(mailOptions, (error, info) =&gt;{\n         \/\/send feedback to front-end        \n         if(error){\n            console.log(error);\n            res.json({msg: 'fail'});     \n        }else{\n            console.log(\"good\")\n            res.json({msg: 'success'});\n\n        }\n    })\n})\n<\/code><\/code><\/pre>\n\n\n\n<p>Based on the email service you are using, there would be some limitations so please refer to the official nodemailer site.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\/\/references <\/p>\n\n\n\n<p><iframe loading=\"lazy\" title=\"Creating A Contact Form With JavaScript \/ Nodemailer\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/30VeUWxZjS8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe> <\/p>\n\n\n\n<p>mailtrap.io\/blog\/react-send-mail<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of my tasks for the project I am working on was to create a function that allows users to send an invitation link to their candidates. So, for this functionality, I had to implement &#8220;send email&#8221; on our web application. In order to achieve the task, I had researched. I found there are two [&hellip;]<\/p>\n","protected":false},"author":12021,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-56","post","type-post","status-publish","format-standard","hentry","category-capstone-project","category-tech-knowledge"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/sylee89\/wp-json\/wp\/v2\/posts\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/sylee89\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/sylee89\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/sylee89\/wp-json\/wp\/v2\/users\/12021"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/sylee89\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":5,"href":"https:\/\/blogs.oregonstate.edu\/sylee89\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/blogs.oregonstate.edu\/sylee89\/wp-json\/wp\/v2\/posts\/56\/revisions\/63"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/sylee89\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/sylee89\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/sylee89\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}