Sending Email using sendgrid | Code Snippets | Projects

Sending email using sendgrid's API and node.js

Node.js : You can download it from here.
Express : After downloading node.js we can install express using the following command on our terminal :
```
											
npm install express
											
										
```
You can learn more about express here.

@sendgrid/mail npm package : We can install it in the following way :

											
npm install @sendgrid/mail

Sendgrid API key : You can get it from your sendgrid's account. For more details click here.

That's it. We are all set to start.

									
<html>
	<head>
		<title> Sending mail using sendgrid | nodejsera </title>
		
		<!-- Including bootstrap v3.3.7 -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		
		<!-- Including Custom css -->
		<link rel="stylesheet" type="text/css" href="styles.css">
		
	</head>
	<body>
	
		<br>
		<br>
		<br>
		<div class="container" >
			<div class="row">
				<div class="col-md-3">
					<!-- Blank DIV -->
				</div>
				
				<div class="col-md-6 main">
					<!-- Form Tag starts here -->
					<!-- Action attribute is the route on backend. Method is POST -->
					<form action="/mail" method="post">
					
						<h1>Sending Email using node.js and sendgrid </h1>					
							
						<input class="box" type="email" name="email" id="email" placeholder="To " required /><br>
							
						<input class="box" type="text" name="subject" id="Subject"  placeholder="Subject" required/><br>
                        <br>
						<textarea rows="4" cols="60" id="content" name="content" placeholder="Enter the content here"> </textarea>
						<br>
						<input type="submit" id="submitDetails"  name="submitDetails" value="Submit Your Details" /><br>
					
					</form>
					
				</div>
				
				
				<div class="col-md-3">
					<!-- Blank DIV -->
				</div>
				
			</div>
		</div>
	</body>
</html>

									
<html>
	<head>
		<title> Send mail using sendgrid | nodejsera </title>
		
		<!-- Including bootstrap v3.3.7 -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		
		<!-- Including Custom css -->
		<link rel="stylesheet" type="text/css" href="styles.css">
		
	</head>
	<body>
	
		<br>
		<br>
		<br>
		<div class="container" >
			<div class="row">
				<div class="col-md-3">
					<!-- Blank DIV -->
				</div>
				
				<div class="col-md-6 main">
					<!-- Form Tag starts here -->
					<!-- Action attribute is the route on backend. Method is POST -->
					<h1> Email has been sent successfully </h1><br>

                   <h1> <a href="index.html">  send another mail  </a> </h1>
					
				</div>
				
				
				<div class="col-md-3">
					<!-- Blank DIV -->
				</div>
				
			</div>
		</div>
	</body>
</html>

									
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab');

.main{
	padding:20px;
	font-family: 'Josefin Slab', serif;
	border : 50px solid #50d8a4;
	border-radius: 15px;
	
}
.main h1{
	font-size: 50px;
	text-align:center;
	font-family: 'Josefin Slab', serif;
	color: #549978;
}
input{
	font-family: 'Josefin Slab', serif;
    width: 100%;
	font-size: 30px;
    padding: 12px 20px;
    margin: 8px 0;
    border: none;
    border-bottom: 2px solid #50d8a4;
}

textarea{
	font-family: 'Josefin Slab', serif;
    width: 100%;
	font-size: 30px;
    padding: 12px 20px;
    margin: 8px 0;
    border: none;
    border: 2px solid #50d8a4;
}
input[type=submit] {
	font-family: 'Josefin Slab', serif;
	width: 100%;
    background-color: #549978;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 15px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

input:hover {
	font-family: 'Josefin Slab', serif;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border: none;
    border-bottom: 2px solid #549978;
}

input[type=submit]:hover {
	font-family: 'Josefin Slab', serif;
	width: 100%;
    background-color: #549978;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 15px;
}

									
var express =  require('express');
var bodyParser = require('body-parser');
var app = express();


//Sendgrid Email system
const sgMail = require('@sendgrid/mail');
var key = 'YOUR_API_KEY_HERE';		//Your API key from sendrid comes here
sgMail.setApiKey(key);


app.get('/', function(req,res){
    res.set({
        'Access-Control-Allow-Origin' :'*'
    });
    return res.redirect('/public/index.html');
}).listen(3000);

console.log('Server listening at : 3000');

app.use('/public', express.static(__dirname + '/public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended : true
}));


app.post('/mail', function(req,res){
   
	var email= req.body.email;
    var subject = req.body.subject;
	var content = req.body.content;

    //console.log("SENDGRID_ENV : " + key);
    const msg = {
        to: email,
        from: 'ENTER_YOUR_EMAIL',				//Your email comes here
        subject: subject,
        html: content ,
    };

    sgMail.send(msg);

    return res.redirect('/public/success.html');

})

									
>node server.js

index.html
URL is : http://127.0.0.1:3000/public/index.html
Success.html :
URL is : http://127.0.0.1:3000/public/success.html
SnapShot of the backend up and running :

Get it from :

Code snippet for How to send email using sendgrid email service and node.js

Inside this article!