Send email to your app users via SendGrid with a Firestore Cloud Function trigger. Learn how to create transactional templates and send them to your users with ease. https://angularfirebase.com/lessons/sendgrid-v3-nodejs-transactional-email-cloud-function/

SendGrid: https://sendgrid.com/
CloudFunction: https://firebase.google.com/docs/functions/
2024-02-04T07:54:18.425Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
7da51c6e-4391-4d4a-8b40-9fb9e3efa4c7
1885d73967385ff07773210506d326ba28ed3b0be1dc38301aa6a9cbdf0f7bed
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Sending email is a fundamental feature that's required by almost every app.
Today, I'm going to show you how to combine the powers of SendGrid and Firebase Cloud Functions to send transactional email to your customers.
It works like this.
A new document is created in Firestore that triggers a cloud function.
The cloud function then makes an API called the SendGrid, and SendGrid sends the emails to your users.
In this video, we're going to use a Firestore database trigger, but you can also trigger the function over HTTP, and I already wrote the code for that, which is at angularfirebase.com.
If you're just finding me for the first time, make sure to subscribe, and then head over to SendGrid to sign up for a free account.
It's free if you send less than a 100 emails per day, and then after that, you pay based on volume.
From there, you'll need to initialize Firebase functions in your project.
I'm gonna be working in the context of an Angular 5 app, but this code will work for any Firebase enabled project.
From there, you can cd into the functions directory, then we'll install SendGrid's Node.
Js library.
SendGrid has several other packages for Node, but the mail package should handle 90% of your use cases.
If we go into package JSON, it should look something like this.
We have SendGrid Mail, and then I also have CORS installed for HTTP, but we're not going Cover that in this video, but check out the link in the description if you need the HTTP version of this Cloud Function.
From there, you'll wanna go into your SendGrid account and create a new API key.
Keep in mind, this is a sensitive API key, so don't expose it in your front end code or any other public facing application.
Then you'll set it to your functions environment by calling Firebase functions config set SendGrid key with your corresponding API key.
Now before we write the Cloud Function, I wanna I wanna show you how I manage transactional templates in SendGrid.
A template holds all the default HTML and styles associated with an email, and then we can pass it dynamic data from our Cloud Function to display specific user information inside of the email.
In this demo, We're going to send an email to the user every time they receive a new follower.
SendGrid has a drag and drop editor that makes editing your templates very easy.
Managing email, HTML, and CSS can often be very frustrating, but the editor can significantly increase your productivity.
For example, if we want to add an image to our email, we can simply drag and drop that from the saved images on our SendGrid account.
That allows you to provide consistent branding and reusable components across all of your emails.
The most important thing I wanna look at is how we pass dynamic data to our email template.
First, look at the name with the double curly brackets.
That's going to be our custom dynamic data that we send from the Cloud Function.
You can add as much custom data with this syntax to your email as you want.
Then SendGrid has a few built in variables, for example, the body which is wrapped here in the percent sign.
It might be easier to use the body tag if you're generating all of your email content on the server.
At this point, we can save the template and then make a note of the ID.
Now we can switch back to our Firebase Cloud Function code And the first thing we'll do is import the admin database and then we're going to set our SendGrid API key by calling functions config SendGridKey.
Then we can initialize the SendGrid client by importing it and then calling s gmail set API key.
I'm going to give our Cloud Function a name of Firestore email and it's going to be triggered whenever a user gets a new follower.
And a follower is a document that's nested under the main user document.
It's a somewhat contrived example, but I just wanna show you how to trigger the actual email sending process.
When that event happens, we want to send an email to the user who received the follower.
The first thing I'm doing is setting the user ID as a variable and then I'm going to make a reference to the Firestore database.
From there, I query the user's document by calling DB collection users with that corresponding user ID and then we call git to receive the snapshot.
And then with that document, we get the actual data on the document by calling doc data.
Now the message object is what we actually send to SendGrid, So this has to be formatted in a specific way.
It needs to have a to email which will be the user's email from this document, and then it'll be from angular firebase.com.
The subject will be a new follower, but you can also set that on the template itself.
Then you use the email template by setting that template ID property with that ID that we copied in the previous a step.
You can use your own custom templating syntax by adding them to substitution wrappers.
I'm just sticking with the double curly brackets like they would work in an Angular app.
Then the substitutions object will contain all your custom dynamic data.
We're just adding the user's display name, but you could also add things like their follower count, or any other relevant information to this email.
Sending the email as easy as calling s gmail send with this message object.
That's going to return a Promise, so we'll go ahead and console log message sent or console log the error if an error happened to occur here.
And that's all it takes.
Now we just have to deploy the function and then we'll verify that it works by creating a new document in Firestore.
Going into Firestore, I'm here on the users collection and then under my user account.
Then I'm going to nest a followers collection under it and then add a document to it.
It doesn't matter what's inside this document.
I'm just going to add a field that says hello world.
Clicking create should invoke the function and we should see an email in our inbox.
Before I do that, I'm going to go over to the Cloud Function logs and make sure that we don't have any errors.
We see email sent in the function logs, meaning that SendGrid did send a successful response back to the function.
Keep in mind that you need to have billing enabled in Firebase to send side API calls.
So if you have any errors at this point, make sure to double check that.
If I go to my Gmail account, I see I get the email here from angularfirebase com via sendgrid.net and my name is interpolated where the curly brackets were.
That's it for Firebase Cloud Functions with SendGrid.
If this video helped you, please like and subscribe.
And if you want to learn more advanced techniques with transactional email, consider becoming a pro member at angularfirebase comm.
You'll get a free copy of my book, exclusive content, and 1 on 1 project consulting.
Thanks for watching, and I'll see you soon.

Speaker 0: Sending email is a fundamental feature that's required by almost every app. Today, I'm going to show you how to combine the powers of SendGrid and Firebase Cloud Functions to send transactional email to your customers. It works like this. A new document is created in Firestore that triggers a cloud function. The cloud function then makes an API called the SendGrid, and SendGrid sends the emails to your users.

In this video, we're going to use a Firestore database trigger, but you can also trigger the function over HTTP, and I already wrote the code for that, which is at angularfirebase.com. If you're just finding me for the first time, make sure to subscribe, and then head over to SendGrid to sign up for a free account. It's free if you send less than a 100 emails per day, and then after that, you pay based on volume. From there, you'll need to initialize Firebase functions in your project. I'm gonna be working in the context of an Angular 5 app, but this code will work for any Firebase enabled project.

From there, you can cd into the functions directory, then we'll install SendGrid's Node. Js library. SendGrid has several other packages for Node, but the mail package should handle 90% of your use cases. If we go into package JSON, it should look something like this. We have SendGrid Mail, and then I also have CORS installed for HTTP, but we're not going Cover that in this video, but check out the link in the description if you need the HTTP version of this Cloud Function.

From there, you'll wanna go into your SendGrid account and create a new API key. Keep in mind, this is a sensitive API key, so don't expose it in your front end code or any other public facing application. Then you'll set it to your functions environment by calling Firebase functions config set SendGrid key with your corresponding API key. Now before we write the Cloud Function, I wanna I wanna show you how I manage transactional templates in SendGrid. A template holds all the default HTML and styles associated with an email, and then we can pass it dynamic data from our Cloud Function to display specific user information inside of the email.

In this demo, We're going to send an email to the user every time they receive a new follower. SendGrid has a drag and drop editor that makes editing your templates very easy. Managing email, HTML, and CSS can often be very frustrating, but the editor can significantly increase your productivity. For example, if we want to add an image to our email, we can simply drag and drop that from the saved images on our SendGrid account. That allows you to provide consistent branding and reusable components across all of your emails.

The most important thing I wanna look at is how we pass dynamic data to our email template. First, look at the name with the double curly brackets. That's going to be our custom dynamic data that we send from the Cloud Function. You can add as much custom data with this syntax to your email as you want. Then SendGrid has a few built in variables, for example, the body which is wrapped here in the percent sign.

It might be easier to use the body tag if you're generating all of your email content on the server. At this point, we can save the template and then make a note of the ID. Now we can switch back to our Firebase Cloud Function code And the first thing we'll do is import the admin database and then we're going to set our SendGrid API key by calling functions config SendGridKey. Then we can initialize the SendGrid client by importing it and then calling s gmail set API key. I'm going to give our Cloud Function a name of Firestore email and it's going to be triggered whenever a user gets a new follower.

And a follower is a document that's nested under the main user document. It's a somewhat contrived example, but I just wanna show you how to trigger the actual email sending process. When that event happens, we want to send an email to the user who received the follower. The first thing I'm doing is setting the user ID as a variable and then I'm going to make a reference to the Firestore database. From there, I query the user's document by calling DB collection users with that corresponding user ID and then we call git to receive the snapshot.

And then with that document, we get the actual data on the document by calling doc data. Now the message object is what we actually send to SendGrid, So this has to be formatted in a specific way. It needs to have a to email which will be the user's email from this document, and then it'll be from angular firebase.com. The subject will be a new follower, but you can also set that on the template itself. Then you use the email template by setting that template ID property with that ID that we copied in the previous a step.

You can use your own custom templating syntax by adding them to substitution wrappers. I'm just sticking with the double curly brackets like they would work in an Angular app. Then the substitutions object will contain all your custom dynamic data. We're just adding the user's display name, but you could also add things like their follower count, or any other relevant information to this email. Sending the email as easy as calling s gmail send with this message object.

That's going to return a Promise, so we'll go ahead and console log message sent or console log the error if an error happened to occur here. And that's all it takes. Now we just have to deploy the function and then we'll verify that it works by creating a new document in Firestore. Going into Firestore, I'm here on the users collection and then under my user account. Then I'm going to nest a followers collection under it and then add a document to it.

It doesn't matter what's inside this document. I'm just going to add a field that says hello world. Clicking create should invoke the function and we should see an email in our inbox. Before I do that, I'm going to go over to the Cloud Function logs and make sure that we don't have any errors. We see email sent in the function logs, meaning that SendGrid did send a successful response back to the function.

Keep in mind that you need to have billing enabled in Firebase to send side API calls. So if you have any errors at this point, make sure to double check that. If I go to my Gmail account, I see I get the email here from angularfirebase com via sendgrid.net and my name is interpolated where the curly brackets were. That's it for Firebase Cloud Functions with SendGrid. If this video helped you, please like and subscribe.

And if you want to learn more advanced techniques with transactional email, consider becoming a pro member at angularfirebase comm. You'll get a free copy of my book, exclusive content, and 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
Sending email is a fundamental feature that's required by almost every app. Today, I'm going to show you how to combine the powers of SendGrid and Firebase Cloud Functions to send transactional email to your customers. It works like this. A new document is created in Firestore that triggers a cloud function.
email
The cloud function then makes an API called the SendGrid, and SendGrid sends the emails to your users. In this video, we're going to use a Firestore database trigger, but you can also trigger the function over HTTP, and I already wrote the code for that, which is at angularfirebase.com. If you're just finding me for the first time, make sure to subscribe, and then head over to SendGrid to sign up for a free account. It's free if you send less than a 100 emails per day, and then after that, you pay based on volume. From there, you'll need to initialize Firebase functions in your project. I'm gonna be working in the context of an Angular 5 app, but this code will work for any Firebase enabled project. From there, you can cd into the functions directory, then we'll install SendGrid's Node. Js library. SendGrid has several other packages for Node, but the mail package should handle 90% of your use cases. If we go into package JSON, it should look something like this. We have SendGrid Mail, and then I also have CORS installed for HTTP, but we're not going Cover that in this video, but check out the link in the description if you need the HTTP version of this Cloud Function. From there, you'll wanna go into your SendGrid account and create a new API key. Keep in mind, this is a sensitive API key, so don't expose it in your front end code or any other public facing application. Then you'll set it to your functions environment by calling Firebase functions config set SendGrid key with your corresponding API key. Now before we write the Cloud Function, I wanna I wanna show you how I manage transactional templates in SendGrid.
A template holds all the default HTML and styles associated with an email, and then we can pass it dynamic data from our Cloud Function to display specific user information inside of the email. In this demo, We're going to send an email to the user every time they receive a new follower. SendGrid has a drag and drop editor that makes editing your templates very easy. Managing email, HTML, and CSS can often be very frustrating, but the editor can significantly increase your productivity. For example, if we want to add an image to our email, we can simply drag and drop that from the saved images on our SendGrid account. That allows you to provide consistent branding and reusable components across all of your emails. The most important thing I wanna look at is how we pass dynamic data to our email template. First, look at the name with the double curly brackets. That's going to be our custom dynamic data that we send from the Cloud Function. You can add as much custom data with this syntax to your email as you want. Then SendGrid has a few built in variables, for example, the body which is wrapped here in the percent sign. It might be easier to use the body tag if you're generating all of your email content on the server. At this point, we can save the template and then make a note of the ID. Now we can switch back to our Firebase Cloud Function code And the first thing we'll do is import the admin database and then we're going to set our SendGrid API key by calling functions config SendGridKey.
email
blogging
Then we can initialize the SendGrid client by importing it and then calling s gmail set API key. I'm going to give our Cloud Function a name of Firestore email and it's going to be triggered whenever a user gets a new follower.
And a follower is a document that's nested under the main user document. It's a somewhat contrived example, but I just wanna show you how to trigger the actual email sending process. When that event happens, we want to send an email to the user who received the follower. The first thing I'm doing is setting the user ID as a variable and then I'm going to make a reference to the Firestore database.
email
From there, I query the user's document by calling DB collection users with that corresponding user ID and then we call git to receive the snapshot. And then with that document, we get the actual data on the document by calling doc data. Now the message object is what we actually send to SendGrid, So this has to be formatted in a specific way.
data
data management
It needs to have a to email which will be the user's email from this document, and then it'll be from angular firebase.com. The subject will be a new follower, but you can also set that on the template itself. Then you use the email template by setting that template ID property with that ID that we copied in the previous a step.
email
You can use your own custom templating syntax by adding them to substitution wrappers. I'm just sticking with the double curly brackets like they would work in an Angular app. Then the substitutions object will contain all your custom dynamic data.
We're just adding the user's display name, but you could also add things like their follower count, or any other relevant information to this email. Sending the email as easy as calling s gmail send with this message object. That's going to return a Promise, so we'll go ahead and console log message sent or console log the error if an error happened to occur here. And that's all it takes. Now we just have to deploy the function and then we'll verify that it works by creating a new document in Firestore.
email
Going into Firestore, I'm here on the users collection and then under my user account. Then I'm going to nest a followers collection under it and then add a document to it. It doesn't matter what's inside this document. I'm just going to add a field that says hello world. Clicking create should invoke the function and we should see an email in our inbox. Before I do that, I'm going to go over to the Cloud Function logs and make sure that we don't have any errors. We see email sent in the function logs, meaning that SendGrid did send a successful response back to the function. Keep in mind that you need to have billing enabled in Firebase to send side API calls. So if you have any errors at this point, make sure to double check that.
If I go to my Gmail account, I see I get the email here from angularfirebase com via sendgrid.net and my name is interpolated where the curly brackets were. That's it for Firebase Cloud Functions with SendGrid. If this video helped you, please like and subscribe. And if you want to learn more advanced techniques with transactional email, consider becoming a pro member at angularfirebase comm.
email
You'll get a free copy of my book, exclusive content, and 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
Sending email is a fundamental feature that's required by almost every app. Today, I'm going to show you how to combine the powers of SendGrid and Firebase Cloud Functions to send transactional email to your customers. It works like this. A new document is created in Firestore that triggers a cloud function. The cloud function then makes an API called the SendGrid, and SendGrid sends the emails to your users. In this video, we're going to use a Firestore database trigger, but you can also trigger the function over HTTP, and I already wrote the code for that, which is at angularfirebase.com. If you're just finding me for the first time, make sure to subscribe, and then head over to SendGrid to sign up for a free account. It's free if you send less than a 100 emails per day, and then after that, you pay based on volume. From there, you'll need to initialize Firebase functions in your project. I'm gonna be working in the context of an Angular 5 app, but this code will work for any Firebase enabled project. From there, you can cd into the functions directory, then we'll install SendGrid's Node. Js library. SendGrid has several other packages for Node, but the mail package should handle 90% of your use cases. If we go into package JSON, it should look something like this. We have SendGrid Mail, and then I also have CORS installed for HTTP, but we're not going Cover that in this video, but check out the link in the description if you need the HTTP version of this Cloud Function. From there, you'll wanna go into your SendGrid account and create a new API key. Keep in mind, this is a sensitive API key, so don't expose it in your front end code or any other public facing application. Then you'll set it to your functions environment by calling Firebase functions config set SendGrid key with your corresponding API key. Now before we write the Cloud Function, I wanna I wanna show you how I manage transactional templates in SendGrid. A template holds all the default HTML and styles associated with an email, and then we can pass it dynamic data from our Cloud Function to display specific user information inside of the email. In this demo, We're going to send an email to the user every time they receive a new follower. SendGrid has a drag and drop editor that makes editing your templates very easy. Managing email, HTML, and CSS can often be very frustrating, but the editor can significantly increase your productivity. For example, if we want to add an image to our email, we can simply drag and drop that from the saved images on our SendGrid account. That allows you to provide consistent branding and reusable components across all of your emails. The most important thing I wanna look at is how we pass dynamic data to our email template. First, look at the name with the double curly brackets. That's going to be our custom dynamic data that we send from the Cloud Function. You can add as much custom data with this syntax to your email as you want. Then SendGrid has a few built in variables, for example, the body which is wrapped here in the percent sign. It might be easier to use the body tag if you're generating all of your email content on the server. At this point, we can save the template and then make a note of the ID. Now we can switch back to our Firebase Cloud Function code And the first thing we'll do is import the admin database and then we're going to set our SendGrid API key by calling functions config SendGridKey. Then we can initialize the SendGrid client by importing it and then calling s gmail set API key. I'm going to give our Cloud Function a name of Firestore email and it's going to be triggered whenever a user gets a new follower. And a follower is a document that's nested under the main user document. It's a somewhat contrived example, but I just wanna show you how to trigger the actual email sending process. When that event happens, we want to send an email to the user who received the follower. The first thing I'm doing is setting the user ID as a variable and then I'm going to make a reference to the Firestore database. From there, I query the user's document by calling DB collection users with that corresponding user ID and then we call git to receive the snapshot. And then with that document, we get the actual data on the document by calling doc data. Now the message object is what we actually send to SendGrid, So this has to be formatted in a specific way. It needs to have a to email which will be the user's email from this document, and then it'll be from angular firebase.com. The subject will be a new follower, but you can also set that on the template itself. Then you use the email template by setting that template ID property with that ID that we copied in the previous a step. You can use your own custom templating syntax by adding them to substitution wrappers. I'm just sticking with the double curly brackets like they would work in an Angular app. Then the substitutions object will contain all your custom dynamic data. We're just adding the user's display name, but you could also add things like their follower count, or any other relevant information to this email. Sending the email as easy as calling s gmail send with this message object. That's going to return a Promise, so we'll go ahead and console log message sent or console log the error if an error happened to occur here. And that's all it takes. Now we just have to deploy the function and then we'll verify that it works by creating a new document in Firestore. Going into Firestore, I'm here on the users collection and then under my user account. Then I'm going to nest a followers collection under it and then add a document to it. It doesn't matter what's inside this document. I'm just going to add a field that says hello world. Clicking create should invoke the function and we should see an email in our inbox. Before I do that, I'm going to go over to the Cloud Function logs and make sure that we don't have any errors. We see email sent in the function logs, meaning that SendGrid did send a successful response back to the function. Keep in mind that you need to have billing enabled in Firebase to send side API calls. So if you have any errors at this point, make sure to double check that. If I go to my Gmail account, I see I get the email here from angularfirebase com via sendgrid.net and my name is interpolated where the curly brackets were. That's it for Firebase Cloud Functions with SendGrid. If this video helped you, please like and subscribe. And if you want to learn more advanced techniques with transactional email, consider becoming a pro member at angularfirebase comm. You'll get a free copy of my book, exclusive content, and 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
Sending
sending
email
email
is
is
a
a
fundamental
fundamental
feature
feature
that's
that's
required
required
by
by
almost
almost
every
every
app.
app
Today,
today
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
combine
combine
the
the
powers
powers
of
of
SendGrid
sendgrid
and
and
Firebase
firebase
Cloud
cloud
Functions
functions
to
to
send
send
transactional
transactional
email
email
to
to
your
your
customers.
customers
It
it
works
works
like
like
this.
this
A
a
new
new
document
document
is
is
created
created
in
in
Firestore
firestore
that
that
triggers
triggers
a
a
cloud
cloud
function.
function
The
the
cloud
cloud
function
function
then
then
makes
makes
an
an
API
api
called
called
the
the
SendGrid,
sendgrid
and
and
SendGrid
sendgrid
sends
sends
the
the
emails
emails
to
to
your
your
users.
users
In
in
this
this
video,
video
we're
we're
going
going
to
to
use
use
a
a
Firestore
firestore
database
database
trigger,
trigger
but
but
you
you
can
can
also
also
trigger
trigger
the
the
function
function
over
over
HTTP,
http
and
and
I
i
already
already
wrote
wrote
the
the
code
code
for
for
that,
that
which
which
is
is
at
at
angularfirebase.com.
angularfirebase.com
If
if
you're
you're
just
just
finding
finding
me
me
for
for
the
the
first
first
time,
time
make
make
sure
sure
to
to
subscribe,
subscribe
and
and
then
then
head
head
over
over
to
to
SendGrid
sendgrid
to
to
sign
sign
up
up
for
for
a
a
free
free
account.
account
It's
it's
free
free
if
if
you
you
send
send
less
less
than
than
a
a
100
100
emails
emails
per
per
day,
day
and
and
then
then
after
after
that,
that
you
you
pay
pay
based
based
on
on
volume.
volume
From
from
there,
there
you'll
you'll
need
need
to
to
initialize
initialize
Firebase
firebase
functions
functions
in
in
your
your
project.
project
I'm
i'm
gonna
gonna
be
be
working
working
in
in
the
the
context
context
of
of
an
an
Angular
angular
5
5
app,
app
but
but
this
this
code
code
will
will
work
work
for
for
any
any
Firebase
firebase
enabled
enabled
project.
project
From
from
there,
there
you
you
can
can
cd
cd
into
into
the
the
functions
functions
directory,
directory
then
then
we'll
we'll
install
install
SendGrid's
sendgrid's
Node.
node
Js
js
library.
library
SendGrid
sendgrid
has
has
several
several
other
other
packages
packages
for
for
Node,
node
but
but
the
the
mail
mail
package
package
should
should
handle
handle
90%
90%
of
of
your
your
use
use
cases.
cases
If
if
we
we
go
go
into
into
package
package
JSON,
json
it
it
should
should
look
look
something
something
like
like
this.
this
We
we
have
have
SendGrid
sendgrid
Mail,
mail
and
and
then
then
I
i
also
also
have
have
CORS
cors
installed
installed
for
for
HTTP,
http
but
but
we're
we're
not
not
going
going
Cover
cover
that
that
in
in
this
this
video,
video
but
but
check
check
out
out
the
the
link
link
in
in
the
the
description
description
if
if
you
you
need
need
the
the
HTTP
http
version
version
of
of
this
this
Cloud
cloud
Function.
function
From
from
there,
there
you'll
you'll
wanna
wanna
go
go
into
into
your
your
SendGrid
sendgrid
account
account
and
and
create
create
a
a
new
new
API
api
key.
key
Keep
keep
in
in
mind,
mind
this
this
is
is
a
a
sensitive
sensitive
API
api
key,
key
so
so
don't
don't
expose
expose
it
it
in
in
your
your
front
front
end
end
code
code
or
or
any
any
other
other
public
public
facing
facing
application.
application
Then
then
you'll
you'll
set
set
it
it
to
to
your
your
functions
functions
environment
environment
by
by
calling
calling
Firebase
firebase
functions
functions
config
config
set
set
SendGrid
sendgrid
key
key
with
with
your
your
corresponding
corresponding
API
api
key.
key
Now
now
before
before
we
we
write
write
the
the
Cloud
cloud
Function,
function
I
i
wanna
wanna
I
i
wanna
wanna
show
show
you
you
how
how
I
i
manage
manage
transactional
transactional
templates
templates
in
in
SendGrid.
sendgrid
A
a
template
template
holds
holds
all
all
the
the
default
default
HTML
html
and
and
styles
styles
associated
associated
with
with
an
an
email,
email
and
and
then
then
we
we
can
can
pass
pass
it
it
dynamic
dynamic
data
data
from
from
our
our
Cloud
cloud
Function
function
to
to
display
display
specific
specific
user
user
information
information
inside
inside
of
of
the
the
email.
email
In
in
this
this
demo,
demo
We're
we're
going
going
to
to
send
send
an
an
email
email
to
to
the
the
user
user
every
every
time
time
they
they
receive
receive
a
a
new
new
follower.
follower
SendGrid
sendgrid
has
has
a
a
drag
drag
and
and
drop
drop
editor
editor
that
that
makes
makes
editing
editing
your
your
templates
templates
very
very
easy.
easy
Managing
managing
email,
email
HTML,
html
and
and
CSS
css
can
can
often
often
be
be
very
very
frustrating,
frustrating
but
but
the
the
editor
editor
can
can
significantly
significantly
increase
increase
your
your
productivity.
productivity
For
for
example,
example
if
if
we
we
want
want
to
to
add
add
an
an
image
image
to
to
our
our
email,
email
we
we
can
can
simply
simply
drag
drag
and
and
drop
drop
that
that
from
from
the
the
saved
saved
images
images
on
on
our
our
SendGrid
sendgrid
account.
account
That
that
allows
allows
you
you
to
to
provide
provide
consistent
consistent
branding
branding
and
and
reusable
reusable
components
components
across
across
all
all
of
of
your
your
emails.
emails
The
the
most
most
important
important
thing
thing
I
i
wanna
wanna
look
look
at
at
is
is
how
how
we
we
pass
pass
dynamic
dynamic
data
data
to
to
our
our
email
email
template.
template
First,
first
look
look
at
at
the
the
name
name
with
with
the
the
double
double
curly
curly
brackets.
brackets
That's
that's
going
going
to
to
be
be
our
our
custom
custom
dynamic
dynamic
data
data
that
that
we
we
send
send
from
from
the
the
Cloud
cloud
Function.
function
You
you
can
can
add
add
as
as
much
much
custom
custom
data
data
with
with
this
this
syntax
syntax
to
to
your
your
email
email
as
as
you
you
want.
want
Then
then
SendGrid
sendgrid
has
has
a
a
few
few
built
built
in
in
variables,
variables
for
for
example,
example
the
the
body
body
which
which
is
is
wrapped
wrapped
here
here
in
in
the
the
percent
percent
sign.
sign
It
it
might
might
be
be
easier
easier
to
to
use
use
the
the
body
body
tag
tag
if
if
you're
you're
generating
generating
all
all
of
of
your
your
email
email
content
content
on
on
the
the
server.
server
At
at
this
this
point,
point
we
we
can
can
save
save
the
the
template
template
and
and
then
then
make
make
a
a
note
note
of
of
the
the
ID.
id
Now
now
we
we
can
can
switch
switch
back
back
to
to
our
our
Firebase
firebase
Cloud
cloud
Function
function
code
code
And
and
the
the
first
first
thing
thing
we'll
we'll
do
do
is
is
import
import
the
the
admin
admin
database
database
and
and
then
then
we're
we're
going
going
to
to
set
set
our
our
SendGrid
sendgrid
API
api
key
key
by
by
calling
calling
functions
functions
config
config
SendGridKey.
sendgridkey
Then
then
we
we
can
can
initialize
initialize
the
the
SendGrid
sendgrid
client
client
by
by
importing
importing
it
it
and
and
then
then
calling
calling
s
s
gmail
gmail
set
set
API
api
key.
key
I'm
i'm
going
going
to
to
give
give
our
our
Cloud
cloud
Function
function
a
a
name
name
of
of
Firestore
firestore
email
email
and
and
it's
it's
going
going
to
to
be
be
triggered
triggered
whenever
whenever
a
a
user
user
gets
gets
a
a
new
new
follower.
follower
And
and
a
a
follower
follower
is
is
a
a
document
document
that's
that's
nested
nested
under
under
the
the
main
main
user
user
document.
document
It's
it's
a
a
somewhat
somewhat
contrived
contrived
example,
example
but
but
I
i
just
just
wanna
wanna
show
show
you
you
how
how
to
to
trigger
trigger
the
the
actual
actual
email
email
sending
sending
process.
process
When
when
that
that
event
event
happens,
happens
we
we
want
want
to
to
send
send
an
an
email
email
to
to
the
the
user
user
who
who
received
received
the
the
follower.
follower
The
the
first
first
thing
thing
I'm
i'm
doing
doing
is
is
setting
setting
the
the
user
user
ID
id
as
as
a
a
variable
variable
and
and
then
then
I'm
i'm
going
going
to
to
make
make
a
a
reference
reference
to
to
the
the
Firestore
firestore
database.
database
From
from
there,
there
I
i
query
query
the
the
user's
user's
document
document
by
by
calling
calling
DB
db
collection
collection
users
users
with
with
that
that
corresponding
corresponding
user
user
ID
id
and
and
then
then
we
we
call
call
git
git
to
to
receive
receive
the
the
snapshot.
snapshot
And
and
then
then
with
with
that
that
document,
document
we
we
get
get
the
the
actual
actual
data
data
on
on
the
the
document
document
by
by
calling
calling
doc
doc
data.
data
Now
now
the
the
message
message
object
object
is
is
what
what
we
we
actually
actually
send
send
to
to
SendGrid,
sendgrid
So
so
this
this
has
has
to
to
be
be
formatted
formatted
in
in
a
a
specific
specific
way.
way
It
it
needs
needs
to
to
have
have
a
a
to
to
email
email
which
which
will
will
be
be
the
the
user's
user's
email
email
from
from
this
this
document,
document
and
and
then
then
it'll
it'll
be
be
from
from
angular
angular
firebase.com.
firebase.com
The
the
subject
subject
will
will
be
be
a
a
new
new
follower,
follower
but
but
you
you
can
can
also
also
set
set
that
that
on
on
the
the
template
template
itself.
itself
Then
then
you
you
use
use
the
the
email
email
template
template
by
by
setting
setting
that
that
template
template
ID
id
property
property
with
with
that
that
ID
id
that
that
we
we
copied
copied
in
in
the
the
previous
previous
a
a
step.
step
You
you
can
can
use
use
your
your
own
own
custom
custom
templating
templating
syntax
syntax
by
by
adding
adding
them
them
to
to
substitution
substitution
wrappers.
wrappers
I'm
i'm
just
just
sticking
sticking
with
with
the
the
double
double
curly
curly
brackets
brackets
like
like
they
they
would
would
work
work
in
in
an
an
Angular
angular
app.
app
Then
then
the
the
substitutions
substitutions
object
object
will
will
contain
contain
all
all
your
your
custom
custom
dynamic
dynamic
data.
data
We're
we're
just
just
adding
adding
the
the
user's
user's
display
display
name,
name
but
but
you
you
could
could
also
also
add
add
things
things
like
like
their
their
follower
follower
count,
count
or
or
any
any
other
other
relevant
relevant
information
information
to
to
this
this
email.
email
Sending
sending
the
the
email
email
as
as
easy
easy
as
as
calling
calling
s
s
gmail
gmail
send
send
with
with
this
this
message
message
object.
object
That's
that's
going
going
to
to
return
return
a
a
Promise,
promise
so
so
we'll
we'll
go
go
ahead
ahead
and
and
console
console
log
log
message
message
sent
sent
or
or
console
console
log
log
the
the
error
error
if
if
an
an
error
error
happened
happened
to
to
occur
occur
here.
here
And
and
that's
that's
all
all
it
it
takes.
takes
Now
now
we
we
just
just
have
have
to
to
deploy
deploy
the
the
function
function
and
and
then
then
we'll
we'll
verify
verify
that
that
it
it
works
works
by
by
creating
creating
a
a
new
new
document
document
in
in
Firestore.
firestore
Going
going
into
into
Firestore,
firestore
I'm
i'm
here
here
on
on
the
the
users
users
collection
collection
and
and
then
then
under
under
my
my
user
user
account.
account
Then
then
I'm
i'm
going
going
to
to
nest
nest
a
a
followers
followers
collection
collection
under
under
it
it
and
and
then
then
add
add
a
a
document
document
to
to
it.
it
It
it
doesn't
doesn't
matter
matter
what's
what's
inside
inside
this
this
document.
document
I'm
i'm
just
just
going
going
to
to
add
add
a
a
field
field
that
that
says
says
hello
hello
world.
world
Clicking
clicking
create
create
should
should
invoke
invoke
the
the
function
function
and
and
we
we
should
should
see
see
an
an
email
email
in
in
our
our
inbox.
inbox
Before
before
I
i
do
do
that,
that
I'm
i'm
going
going
to
to
go
go
over
over
to
to
the
the
Cloud
cloud
Function
function
logs
logs
and
and
make
make
sure
sure
that
that
we
we
don't
don't
have
have
any
any
errors.
errors
We
we
see
see
email
email
sent
sent
in
in
the
the
function
function
logs,
logs
meaning
meaning
that
that
SendGrid
sendgrid
did
did
send
send
a
a
successful
successful
response
response
back
back
to
to
the
the
function.
function
Keep
keep
in
in
mind
mind
that
that
you
you
need
need
to
to
have
have
billing
billing
enabled
enabled
in
in
Firebase
firebase
to
to
send
send
side
side
API
api
calls.
calls
So
so
if
if
you
you
have
have
any
any
errors
errors
at
at
this
this
point,
point
make
make
sure
sure
to
to
double
double
check
check
that.
that
If
if
I
i
go
go
to
to
my
my
Gmail
gmail
account,
account
I
i
see
see
I
i
get
get
the
the
email
email
here
here
from
from
angularfirebase
angularfirebase
com
com
via
via
sendgrid.net
sendgrid.net
and
and
my
my
name
name
is
is
interpolated
interpolated
where
where
the
the
curly
curly
brackets
brackets
were.
were
That's
that's
it
it
for
for
Firebase
firebase
Cloud
cloud
Functions
functions
with
with
SendGrid.
sendgrid
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
want
want
to
to
learn
learn
more
more
advanced
advanced
techniques
techniques
with
with
transactional
transactional
email,
email
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase
angularfirebase
comm.
comm
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book,
book
exclusive
exclusive
content,
content
and
and
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speaker explains how to combine SendGrid and franc CloudGeneration to send transactional emails to customers. They provide a code for managing transactional templates and how to pass dynamic data to email templates. The speaker also explains how to set a variables for a message and how to send an email to users. The speaker emphasizes the importance of setting billing enabled in obtain the right information for email sending.
SendGrid Transactional Email via a Firestore Cloud Function
Sending email is a fundamental feature that's required by almost every app. Today, I'm going to show you how to combine the powers of SendGrid and Firebase Cloud Functions to send transactional email to your customers. It works like this. A new document is created in Firestore that triggers a cloud function. The cloud function then makes an API called the SendGrid, and SendGrid sends the emails to your users. In this video, we're going to use a Firestore database trigger, but you can also trigger the function over HTTP, and I already wrote the code for that, which is at angularfirebase.com. If you're just finding me for the first time, make sure to subscribe, and then head over to SendGrid to sign up for a free account. It's free if you send less than a 100 emails per day, and then after that, you pay based on volume. From there, you'll need to initialize Firebase functions in your project. I'm gonna be working in the context of an Angular 5 app, but this code will work for any Firebase enabled project. From there, you can cd into the functions directory, then we'll install SendGrid's Node. Js library. SendGrid has several other packages for Node, but the mail package should handle 90% of your use cases. If we go into package JSON, it should look something like this. We have SendGrid Mail, and then I also have CORS installed for HTTP, but we're not going Cover that in this video, but check out the link in the description if you need the HTTP version of this Cloud Function. From there, you'll wanna go into your SendGrid account and create a new API key. Keep in mind, this is a sensitive API key, so don't expose it in your front end code or any other public facing application. Then you'll set it to your functions environment by calling Firebase functions config set SendGrid key with your corresponding API key. Now before we write the Cloud Function, I wanna I wanna show you how I manage transactional templates in SendGrid. A template holds all the default HTML and styles associated with an email, and then we can pass it dynamic data from our Cloud Function to display specific user information inside of the email. In this demo, We're going to send an email to the user every time they receive a new follower. SendGrid has a drag and drop editor that makes editing your templates very easy. Managing email, HTML, and CSS can often be very frustrating, but the editor can significantly increase your productivity. For example, if we want to add an image to our email, we can simply drag and drop that from the saved images on our SendGrid account. That allows you to provide consistent branding and reusable components across all of your emails. The most important thing I wanna look at is how we pass dynamic data to our email template. First, look at the name with the double curly brackets. That's going to be our custom dynamic data that we send from the Cloud Function. You can add as much custom data with this syntax to your email as you want. Then SendGrid has a few built in variables, for example, the body which is wrapped here in the percent sign. It might be easier to use the body tag if you're generating all of your email content on the server. At this point, we can save the template and then make a note of the ID. Now we can switch back to our Firebase Cloud Function code And the first thing we'll do is import the admin database and then we're going to set our SendGrid API key by calling functions config SendGridKey. Then we can initialize the SendGrid client by importing it and then calling s gmail set API key. I'm going to give our Cloud Function a name of Firestore email and it's going to be triggered whenever a user gets a new follower. And a follower is a document that's nested under the main user document. It's a somewhat contrived example, but I just wanna show you how to trigger the actual email sending process. When that event happens, we want to send an email to the user who received the follower. The first thing I'm doing is setting the user ID as a variable and then I'm going to make a reference to the Firestore database. From there, I query the user's document by calling DB collection users with that corresponding user ID and then we call git to receive the snapshot. And then with that document, we get the actual data on the document by calling doc data. Now the message object is what we actually send to SendGrid, So this has to be formatted in a specific way. It needs to have a to email which will be the user's email from this document, and then it'll be from angular firebase.com. The subject will be a new follower, but you can also set that on the template itself. Then you use the email template by setting that template ID property with that ID that we copied in the previous a step. You can use your own custom templating syntax by adding them to substitution wrappers. I'm just sticking with the double curly brackets like they would work in an Angular app. Then the substitutions object will contain all your custom dynamic data. We're just adding the user's display name, but you could also add things like their follower count, or any other relevant information to this email. Sending the email as easy as calling s gmail send with this message object. That's going to return a Promise, so we'll go ahead and console log message sent or console log the error if an error happened to occur here. And that's all it takes. Now we just have to deploy the function and then we'll verify that it works by creating a new document in Firestore. Going into Firestore, I'm here on the users collection and then under my user account. Then I'm going to nest a followers collection under it and then add a document to it. It doesn't matter what's inside this document. I'm just going to add a field that says hello world. Clicking create should invoke the function and we should see an email in our inbox. Before I do that, I'm going to go over to the Cloud Function logs and make sure that we don't have any errors. We see email sent in the function logs, meaning that SendGrid did send a successful response back to the function. Keep in mind that you need to have billing enabled in Firebase to send side API calls. So if you have any errors at this point, make sure to double check that. If I go to my Gmail account, I see I get the email here from angularfirebase com via sendgrid.net and my name is interpolated where the curly brackets were. That's it for Firebase Cloud Functions with SendGrid. If this video helped you, please like and subscribe. And if you want to learn more advanced techniques with transactional email, consider becoming a pro member at angularfirebase comm. You'll get a free copy of my book, exclusive content, and 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
The speaker explains how to combine SendGrid and franc CloudGeneration to send transactional emails to customers. They provide a code for managing transactional templates and how to pass dynamic data to email templates. The speaker also explains how to set a variables for a message and how to send an email to users. The speaker emphasizes the importance of setting billing enabled in obtain the right information for email sending.