Angular 4 – Automated mails with attachments

Hi Friends,

Hope you are all well. In this post we’ll see how to send automated mails from your app using Firebase Cloud Functions and emailjs. We’ll also see how to attach a generated pdf file along with the email using pdfkit.

Let’s begin.

 

Code for this post is available – here.

First of all let’s scaffold out an angular 4 app using the ng-cli tool with the below command.

Once the app is created install firebase and angularfire 2

Once this is done add firebase app config to your app. You can do this in  separate file and import it into your app.module.ts file or simply do it from app.module.ts file as shown below.

Now that this is done, let me explain what we are about to do now.

Just to demonstrate this, we’ll be sending an email when a user logs in into our app. This email will be sent by a function running on firebase cloud. This function will generate a pdf and attach it along with the email that we send.

First let’s do the login thing.

Open up app.html and add the below code.

Again, this is just a demo. In a real app never write any code in the app.html page (except the router-outlet tags ofcourse)

Now open up app.component.ts file and add the below code.

Here we have done nothing but written some code to write the email of the logged-in user onto a collection called sendmail whenever a user logs into our app.

Writing a trigger function:

A trigger function in simple terms is simply a function that runs whenever you do a particular task on a collection which is being watched by the trigger function. (Trigger duh!)

Now to do this in our app, simply give the below command.

(Please note that this requires us to install firebase-tools beforehand, kindly install if not already)

Now the next thing you will be shown is this

Screenshot 2017-10-13 01:10:06

Ensure that you select functions as shown above and simply follow the next steps like choosing a firebase app (the one whose config you mentioned in app.module.ts file)

2

Next you will be asked whether to install all the deps. Give Yes.

3

Once this is done, if you notice in your project structure now, a new folder called functions would have been created as shown below.

5

This functions directory is the one which we’ll be deploying onto firebase.

now navigate into functions directory in your terminal (cd functions) and install emailjs and pdfkit as shown below.

Now open index.js (in the functions dir) and add the below code.

Let’s break this down.

First I am configuring a server instance (SMTP) using google.

Then, I am creating a pdf document with just a line in it using pdfkit.

Then, I am using the server instance to send an email to the logged-in user. I am also attaching the generated pdf along with the email.

That’s it. Now to deploy this function use the below command.

Whoo.. we have now deployed a function that will get triggered whenever an emailid is written onto the sendmail collection.

Now to test this, simply go to your firebase console and navigate to authentication then add a user with your email.

6

7

Now run our app locally using ng serve and try logging in. You should see a mail in the mailid which you used to login.

This mail will also contain the pdf as an attachment.

Hope this helped you guys. If you found this helpful, kindly share it with someone else and help them too.

Thanks for reading guys. Peace. :)

 

 

Liked it? Take a second to support admin on Patreon!