Angular 4 Transactional Email with Google Firebase Cloud Functions

https://angularfirebase.com/le....ssons/angular4-trans

In this episode, I am going to show you how send transactional email in Angular as a background task in cloud. To facilitate this, the emails will be send with Google Cloud Functions for Firebase and the email service Sendgrid. You can use any email provider you want such as mailgun or postmark or even Gmail, but I will chose Sendgrid for this tutorial because they have a solid helper library and a detailed NodeJS example in their documentation. They also offer a free trail with no credit card requirements, so get your API key to follow along with this lesson.

What is a Cloud Function?

Google Cloud Functions is a serverless architecture that allows you to run isolated code in a NodeJS runtime - as opposed to deploying your own server. It is Google's answer to AWS Lambda and has only been available to the public since 2017. It's an awesome tool for Firebase developers because it allows you to run code in the background that would otherwise slow down an Angular app, and email is definitely a task that should be delegated to its own background task or micro service.

We can trigger cloud functions in many different ways, but this lesson will demonstrate the use of cloud functions via HTTP. When the function is deployed, Google Cloud Platform will give us a URL endpoint that we can hit with query params that tell SendGrid how to deliver the email. The process is no different than working with any other RESTful API.

It's also useful to know that you can trigger cloud functions on database writes, storage uploads, authentication events, and even analytic events, all of which are common use cases for transactional email. Some examples include sending a welcome email after a new user signs up or when they've reached the max capacity on file uploads. I plan on covering these scenarios in future videos.

First, I am assuming you have an Angular app started with the firebase-tools installed.

Start by run the firebase init command and select functions.

This will create a functions directory and give us an index.js file, which is were the functions are defined. The functions directory is its own isolated Node environment, completely separate from your angular app - its logic has no direct connection to angular. That's great because it keeps your frontend app lightweight and delegates CPU or Memory intensive operations to the cloud.

First we need to install the sendgrid package, so we cd into the functions directory then run NPM install.

cd functions
npm install sendgrid

First, I import the send grid package and pass it my API key.

Next, I define a parseBody helper to convert the email params into JSON with SendGrid's mail helper. This is a pretty powerful feature of SendGrid when it comes to formatting emails, so check out all the options in the documentation.

To create a function, you use the exports keyword followed by the function name, in this case, Im calling the function httpEmail. Our function will return a promise when triggered via HTTP, and if its successful, it will tell the send grid API to send an email.The request must be of type POST and should have query params that define the email addresses, subject, and content the email. Send grid will then return its own response letting us know if the email was successful or an exception occurred.

Before we can wire up the cloud function with Angular, we need to deploy it.

Run the firebase deploy command, flagging --only functions.

When deployment is complete, the console will print the URL used trigger the function via HTTP. Make a note of this url because you will need it in the next step.


In angular, we can call this function for anywhere in the app. Here I have a brand new send-email component that will trigger the function.

Import the HTTP module and create a function that sends a POST request to the URL of the deployed function. I am also going to hard code some query parameters just to show how to send data to the function over http. In this example, I am just console logging the response or error for debugging.

Now we can trigger the cloud function with a button click or any other event for that matter.

If all went according to plan, you should see an email in your inbox. If not, make sure to check the console or the Firebase cloud functions logs for any exceptions.

That's it for transactional email. Thanks for watching.