How to send an email via form input with angular and node once deployed on heroku?

Question

I deployed an app on heroku with angular for the front-end and node(express) as the back-end. On the contact page, I have a form that will be sent via email once the send button is pressed, which then sends the info via HTTP to node for the user inputs to be passed through the node function - I'm using SendGrid addon for the email process to send the email. I tried multiple time, but I just can't get it to work and can't find a tutorial with angular. It worked before with nodemailer on the localhost , but I can't figure it out once it is deployed. Thank you a lot for your time.

node code app.js

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const sgMail = require('@sendgrid/mail');


const port = process.env.PORT || 3000;

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));


app.use(express.static(path.join(__dirname, 'client')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/index.html'));
});

app.post('/client-contact', (req, res) => {

const clientMsg = `
<p> Email sent from your portfolio website</p>
<h3>Contact details</h3>
<ul>
    <li>Name ${req.body.name}</li>
    <li>Email: ${req.body.email}</li>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;

sgMail.setApiKey(process.env.SENDGRID_API_KEY);
const msg = {
  to: 'mrwanzein@outlook.com',
  from: 'mrwanzein@outlook.com',
  subject: 'Angular portfolio form user response',
  html: clientMsg,
};

sgMail.send(msg);

});


app.listen(port, () => {
  console.log(`Server is on on port ${port}`);
});

the function that register the user input and then sends it to node (and handles some validations, the interest is the last line) contact.component.ts

sendMail() {
  var name = <HTMLInputElement>document.getElementById('inputName'),
    email = <HTMLInputElement>document.getElementById('inputEmail'),
    msg = <HTMLInputElement>document.getElementById('inputMsg');

  var obj = {
    name: name.value,
    email: email.value,
    message: msg.value
  } 

  let validateEmail = () => {
    const re = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?
        ^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])/;
    return re.test(email.value);
  }

  if(!name.value || !email.value || !msg.value || !validateEmail()) {    
    this.bool = true;
  } else {
    this.bool = false;

    setTimeout(() => {
      window.location.reload()
     }, 1500);

    return this.http.post('https://mrwanzein.herokuapp.com/client-contact', obj).subscribe();
  }
}

Answer 1

You need to configure an SMTP server for your application.

The easiest way is with a heroku addin such as mailgun

Answer 2

I fixed it, basically the code is fine, I had to remove the res.send() around sgMail.send(msg) and I forgot to ng build(angular) to update the HTTP address when I changed it. I was pushing changes to the repo without the missing updated code, oh dear... :P