Simple project demonstrates how to send email using Nodejs

Facebook
Reddit
Twitter
Whatsapp
Cover image

Sometimes we may need an email form or contact form for our website

Scenario-1: We wish our users to be able to communicate to the admin, author, managers of our website.

Scenario-2: We wish to send emails to our users regarding

  • Signup success
  • Forgot password
  • Reset password success
  • Invalid activity

Run

Download and extract the zip file Open command prompt and browse to the extracted folder write the command node . Open Chrome browser and point to http://localhost:8080/

Tutorial

We will be creating a simple AngularJS web application which will send an email to the website administrator when any users wish to contact regarding any issue. We are going to implement the above functionality in just 3 steps

Craft the user interface (front end client side) Configure the email client (Sendgrid) Create the server and make the server talk to Sendgrid and AngularJS frontend (Using NodeJS)

Step-1

Let’s build the user interface using google’s material design and our friend AngularJS

Let’s use the material design CSS library provided by materializecss.com

Step-2

To send email we will use some node libraries

nodemailer
nodemailer-sendgrid-transport

For this we need to create a sendgrid account and generate a api key and use in index.js

Project Structure

client – style css – app.js – index.html

  • index.js
  • package.json

index.js (NodeJS)

var express = require('express');
var bodyParser = require('body-parser');
var nodemailer = require('nodemailer');
var sgTransport = require('nodemailer-sendgrid-transport');
var app = express();
app.use(express.static(__dirname + '/client'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Sendmail route
app.post('/sendmail', function(req, res){
var options = {
auth: {
api_key: 'YOUR_SENDGRID_API_KEY'
}
}
var mailer = nodemailer.createTransport(sgTransport(options));
mailer.sendMail(req.body, function(error, info){
if(error){
res.status('401').json({err: info});
}else{
res.status('200').json({success: true});
}
});
});
// Start server
var port = 8080, ip = "127.0.0.1";
app.listen(port, ip, function() {
console.log('Express server listening on http://localhost:%d', port);
});
view raw sendmail-index.js hosted with ❤ by GitHub

package.json

{
"name": "sendmail",
"version": "1.0.0",
"dependencies": {
"body-parser": "^1.14.2",
"express": "^4.13.4",
"nodemailer": "^2.1.0",
"nodemailer-sendgrid-transport": "^0.2.0"
}
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Send email using NodeJS</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body ng-app="sendmailApp" ng-controller="MailController">
<header>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="http://www.angularcode.com/" class="brand-logo">AngularCode | Demo</a>
<ul class="right">
<li><a class="dropdown-button" href="http://www.angularcode.com/send-email-from-website-using-angularjs-and-nodejs"
data-activates="dropdown1">Tutorial<i class="material-icons left">airplay</i></a></li>
</ul>
</div>
</nav>
</header>
<main>
<div class="section no-pad-bot valign-wrapper">
<div class="container">
<br><br>
<div class="center"><i class="material-icons center large">email</i>
<h1 class="header orange-text">Email Us</h1>
</div>
<div class="center success">
<div class="preloader-wrapper small active" ng-if="loading">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<div ng-cloak ng-if="!loading && serverMessage"><i class="material-icons center">done</i>{{serverMessage}}</div>
</div>
<div class="row center">
<div class="input-field col s12 z-depth-2">
<textarea ng-model="mail.message" class="materialize-textarea"></textarea>
</div>
</div>
<div class="row center">
<button ng-click="send(mail)" class="btn-large waves-effect waves-light orange"><i class="material-icons left">send</i>
<div class="circle"></div>Send Mail</button>
</div>
<br><br>
</div>
</div>
</main>
<footer class="page-footer orange">
<div class="footer-copyright">
<div class="container center">
Crafted by <a class="orange-text text-lighten-3" href="http://angularcode.com">AngularCode</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
view raw sendmail-index.html hosted with ❤ by GitHub

app.js (AngularJS)

'use strict';
angular.module('sendmailApp', [])
.controller('MailController', function ($scope,$http) {
$scope.loading = false;
$scope.send = function (mail){
$scope.loading = true;
$http.post('/sendmail', {
from: 'CodeNx <admin@angularcode.com>',
to: 'support@codenx.com',
subject: 'Message from AngularCode',
text: mail.message
}).then(res=>{
$scope.loading = false;
$scope.serverMessage = 'Email sent successfully';
});
}
})
view raw sendmail-app.js hosted with ❤ by GitHub
Subscribe my updates via Email