Sending emails from contact form, with the firebase functions and nodemailer

George C. picture George C. · Apr 30, 2017 · Viewed 11.8k times · Source

I use these technologies:

  • Angular 4
  • Firebase
  • firebase hosting
  • firebase functions
  • firebase real time database
  • firebase storage

I host my website on firebase hosting, and I have a contact form like the picture below, I want every time the user submits that form, to send an email to the admin of the web site

How I will send emails with firebase and Nodemailer

Should I require the nodemailer inside the index.js on functions folder or that is wrong?

This is my contact form.

enter image description here

Answer

Bilger Yahov picture Bilger Yahov · Jun 2, 2017

It's always good to ask, when you are not sure about how something is done. Here I will try to give you some simple steps about how this can be achieved.

First of all make sure to initialize Firebase functions inside your project. If you do not know how to do that, just Google it, on their corporate website they do have amazing explanations on each topic.

Having done that, set up a single Firebase function with an HTTP trigger. Make sure that inside the Firebase functions folder in your project, you run npm install [email protected] --save. It's a crucial point that you install indeed version 2.4.1, since all the ones afterwards crash when trying to deploy the function itself. (I still haven't figured out why)

EDIT:

I just found out what was the reason for Firebase functions crashing with a newer version of Nodemailer. It was the version of Node I was running. After updating my Node, everything was fine. The issue is mentioned here as well: Link to official GitHub page

So, still it is up to you which version you prefer, just make sure that if you are running the latest Nodemailer, it also requires a newer Node. ;)

After having done that, open your Firebase function's code, go to the official website of Nodemailer, take a look how a single message is composed and sent. There is an amazing example right there, which is actually mostly copy-paste into your code, with some additional configurations (username and password stuff).

Make sure that from your front-end Angular app, you make a POST request with the data from those fields that you have on the form. You also need to make sure that when your Firebase function receives the request, it configures the e-mail message, sends it and at the end responds with a proper status code and message.

Everything that I have written might sound a bit complex, I have no idea about your ICT competence, but make sure that you read it carefully, you Google what you do not understand and if you still cannot find the answers, make sure that you reply here, so me or other people can give you a help.

I will put here also a link, which you can use to guide yourself during this process.

Click here to see an example from Google themselves

I wish you best of luck.