https://angularfirebase.com/lessons/angular4-transactional-email-with-cloud-functions-and-sendgrid/

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.
2024-02-04T08:35:56.761Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
19573e41-940b-46c2-aa70-8180be9dff3b
caa2f2cbd4e197046cef10ee69dbeea56f7d099867f0851bd156f547bbf0d740
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, I'm going to show you how to send transactional email in Angular 4 as a background task in the cloud.
To facilitate this, the emails will be sent 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 chose SendGrid for this tutorial because They have a solid helper library and a detailed node example in their documentation.
They also offer a free trial with no credit card required, So you can get your API key and follow along without having to pay anything out of pocket.
So what is a Cloud Function exactly?
Google Cloud Functions is a serverless architecture that allows you to run isolated code in a Node JS runtime as opposed to deploying your own server from scratch.
It's Google's answer to AWS Lambda and it's only been available to the public for less than a year.
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 one of task that you wanna delegate to its own background task or micro service.
We can trigger Cloud Functions in many different ways, but this lesson will straight to use of Cloud Functions via HTTP.
It's also useful to know that you can trigger Cloud Functions on database rights, 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 to a new user or sending an email when they've reached at max capacity on file uploads or some other app limitation like that.
I plan on covering these scenarios in future videos.
At this point, I'm assuming you have an Angular app started with the Firebase Tools package installed.
Start by running the Firebase init command and then scrolling down to functions.
This will create a functions directory and give us an index dot JS file, which is where the functions are defined.
The function's directory is its own isolated node environment completely separate from your Angular app.
Its logic has no direct connection to Angular whatsoever.
This is great because it keeps your front end app lightweight and allows you to have a separate environment where you can delegate CPU and memory intensive operations.
First, we need to install the SendGrid package.
So we c v into the functions directory, then run npm install.
First, I required the SendGrid package and as of the API key.
Next, I define a parse body helper to convert the email parameters into JSON with SendGrid's mail helper.
This is actually a pretty powerful feature from SendGrid when it comes to formatting emails.
So check out all the options in the documentation for attachments and things like that.
To create a cloud function, you use the exports keyword followed by the function name.
In this case, I'm gonna call it H T T P email.
Our function will return a promise when triggered via H T T P And if it's successful, it will tell the SendGrid API where to send the email.
The request must be of type post and should have query parameters that define the email addresses, subject, content, and any other variables in the email.
SendGrid will then return its own response letting us know that email was successful or if an exception has occurred.
Before we can wire up the cloud function with Angular, we first need to deploy it.
Run the Firebase deploy command flagging only functions.
It'll take a couple minutes, but when the deployment is complete, the console will print out the URL used to trigger the function.
Make note of this URL because We're gonna use Angular's HTTP library to trigger this URL in the next step.
Now that the function's deployed, We can call this function from anywhere within our Angular app.
Here, I have a brand new send email component that will trigger the function.
First, I import the HTTP module and create a function that will send a post request to the URL that we just deployed.
I'm also going to hard code some query parameters just to show you how to send data over HTTP to the function at solve.
In this example, I'm just going to console log the response 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.

Speaker 0: In this episode, I'm going to show you how to send transactional email in Angular 4 as a background task in the cloud. To facilitate this, the emails will be sent 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 chose SendGrid for this tutorial because They have a solid helper library and a detailed node example in their documentation. They also offer a free trial with no credit card required, So you can get your API key and follow along without having to pay anything out of pocket.

So what is a Cloud Function exactly? Google Cloud Functions is a serverless architecture that allows you to run isolated code in a Node JS runtime as opposed to deploying your own server from scratch. It's Google's answer to AWS Lambda and it's only been available to the public for less than a year. 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 one of task that you wanna delegate to its own background task or micro service.

We can trigger Cloud Functions in many different ways, but this lesson will straight to use of Cloud Functions via HTTP. It's also useful to know that you can trigger Cloud Functions on database rights, 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 to a new user or sending an email when they've reached at max capacity on file uploads or some other app limitation like that. I plan on covering these scenarios in future videos. At this point, I'm assuming you have an Angular app started with the Firebase Tools package installed.

Start by running the Firebase init command and then scrolling down to functions. This will create a functions directory and give us an index dot JS file, which is where the functions are defined. The function's directory is its own isolated node environment completely separate from your Angular app. Its logic has no direct connection to Angular whatsoever. This is great because it keeps your front end app lightweight and allows you to have a separate environment where you can delegate CPU and memory intensive operations.

First, we need to install the SendGrid package. So we c v into the functions directory, then run npm install. First, I required the SendGrid package and as of the API key. Next, I define a parse body helper to convert the email parameters into JSON with SendGrid's mail helper. This is actually a pretty powerful feature from SendGrid when it comes to formatting emails.

So check out all the options in the documentation for attachments and things like that. To create a cloud function, you use the exports keyword followed by the function name. In this case, I'm gonna call it H T T P email. Our function will return a promise when triggered via H T T P And if it's successful, it will tell the SendGrid API where to send the email. The request must be of type post and should have query parameters that define the email addresses, subject, content, and any other variables in the email.

SendGrid will then return its own response letting us know that email was successful or if an exception has occurred. Before we can wire up the cloud function with Angular, we first need to deploy it. Run the Firebase deploy command flagging only functions. It'll take a couple minutes, but when the deployment is complete, the console will print out the URL used to trigger the function. Make note of this URL because We're gonna use Angular's HTTP library to trigger this URL in the next step.

Now that the function's deployed, We can call this function from anywhere within our Angular app. Here, I have a brand new send email component that will trigger the function. First, I import the HTTP module and create a function that will send a post request to the URL that we just deployed. I'm also going to hard code some query parameters just to show you how to send data over HTTP to the function at solve. In this example, I'm just going to console log the response 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.
In this episode, I'm going to show you how to send transactional email in Angular 4 as a background task in the cloud. To facilitate this, the emails will be sent 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 chose SendGrid for this tutorial because They have a solid helper library and a detailed node example in their documentation. They also offer a free trial with no credit card required, So you can get your API key and follow along without having to pay anything out of pocket.
email
So what is a Cloud Function exactly? Google Cloud Functions is a serverless architecture that allows you to run isolated code in a Node JS runtime as opposed to deploying your own server from scratch. It's Google's answer to AWS Lambda and it's only been available to the public for less than a year. 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 one of task that you wanna delegate to its own background task or micro service. We can trigger Cloud Functions in many different ways, but this lesson will straight to use of Cloud Functions via HTTP. It's also useful to know that you can trigger Cloud Functions on database rights, 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 to a new user or sending an email when they've reached at max capacity on file uploads or some other app limitation like that.
databases
email
I plan on covering these scenarios in future videos. At this point, I'm assuming you have an Angular app started with the Firebase Tools package installed. Start by running the Firebase init command and then scrolling down to functions. This will create a functions directory and give us an index dot JS file, which is where the functions are defined. The function's directory is its own isolated node environment completely separate from your Angular app. Its logic has no direct connection to Angular whatsoever. This is great because it keeps your front end app lightweight and allows you to have a separate environment where you can delegate CPU and memory intensive operations. First, we need to install the SendGrid package. So we c v into the functions directory, then run npm install. First, I required the SendGrid package and as of the API key. Next, I define a parse body helper to convert the email parameters into JSON with SendGrid's mail helper. This is actually a pretty powerful feature from SendGrid when it comes to formatting emails. So check out all the options in the documentation for attachments and things like that. To create a cloud function, you use the exports keyword followed by the function name.
In this case, I'm gonna call it H T T P email. Our function will return a promise when triggered via H T T P And if it's successful, it will tell the SendGrid API where to send the email. The request must be of type post and should have query parameters that define the email addresses, subject, content, and any other variables in the email. SendGrid will then return its own response letting us know that email was successful or if an exception has occurred. Before we can wire up the cloud function with Angular, we first need to deploy it.
email
Run the Firebase deploy command flagging only functions. It'll take a couple minutes, but when the deployment is complete, the console will print out the URL used to trigger the function. Make note of this URL because We're gonna use Angular's HTTP library to trigger this URL in the next step. Now that the function's deployed, We can call this function from anywhere within our Angular app.
Here, I have a brand new send email component that will trigger the function. First, I import the HTTP module and create a function that will send a post request to the URL that we just deployed. I'm also going to hard code some query parameters just to show you how to send data over HTTP to the function at solve.
email
In this example, I'm just going to console log the response 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.
In this episode, I'm going to show you how to send transactional email in Angular 4 as a background task in the cloud. To facilitate this, the emails will be sent 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 chose SendGrid for this tutorial because They have a solid helper library and a detailed node example in their documentation. They also offer a free trial with no credit card required, So you can get your API key and follow along without having to pay anything out of pocket. So what is a Cloud Function exactly? Google Cloud Functions is a serverless architecture that allows you to run isolated code in a Node JS runtime as opposed to deploying your own server from scratch. It's Google's answer to AWS Lambda and it's only been available to the public for less than a year. 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 one of task that you wanna delegate to its own background task or micro service. We can trigger Cloud Functions in many different ways, but this lesson will straight to use of Cloud Functions via HTTP. It's also useful to know that you can trigger Cloud Functions on database rights, 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 to a new user or sending an email when they've reached at max capacity on file uploads or some other app limitation like that. I plan on covering these scenarios in future videos. At this point, I'm assuming you have an Angular app started with the Firebase Tools package installed. Start by running the Firebase init command and then scrolling down to functions. This will create a functions directory and give us an index dot JS file, which is where the functions are defined. The function's directory is its own isolated node environment completely separate from your Angular app. Its logic has no direct connection to Angular whatsoever. This is great because it keeps your front end app lightweight and allows you to have a separate environment where you can delegate CPU and memory intensive operations. First, we need to install the SendGrid package. So we c v into the functions directory, then run npm install. First, I required the SendGrid package and as of the API key. Next, I define a parse body helper to convert the email parameters into JSON with SendGrid's mail helper. This is actually a pretty powerful feature from SendGrid when it comes to formatting emails. So check out all the options in the documentation for attachments and things like that. To create a cloud function, you use the exports keyword followed by the function name. In this case, I'm gonna call it H T T P email. Our function will return a promise when triggered via H T T P And if it's successful, it will tell the SendGrid API where to send the email. The request must be of type post and should have query parameters that define the email addresses, subject, content, and any other variables in the email. SendGrid will then return its own response letting us know that email was successful or if an exception has occurred. Before we can wire up the cloud function with Angular, we first need to deploy it. Run the Firebase deploy command flagging only functions. It'll take a couple minutes, but when the deployment is complete, the console will print out the URL used to trigger the function. Make note of this URL because We're gonna use Angular's HTTP library to trigger this URL in the next step. Now that the function's deployed, We can call this function from anywhere within our Angular app. Here, I have a brand new send email component that will trigger the function. First, I import the HTTP module and create a function that will send a post request to the URL that we just deployed. I'm also going to hard code some query parameters just to show you how to send data over HTTP to the function at solve. In this example, I'm just going to console log the response 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.
In
in
this
this
episode,
episode
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
send
send
transactional
transactional
email
email
in
in
Angular
angular
4
4
as
as
a
a
background
background
task
task
in
in
the
the
cloud.
cloud
To
to
facilitate
facilitate
this,
this
the
the
emails
emails
will
will
be
be
sent
sent
with
with
Google
google
Cloud
cloud
functions
functions
for
for
Firebase
firebase
and
and
the
the
email
email
service
service
SendGrid.
sendgrid
You
you
can
can
use
use
any
any
email
email
provider
provider
you
you
want
want
such
such
as
as
Mailgun
mailgun
or
or
Postmark
postmark
or
or
even
even
Gmail.
gmail
But
but
I
i
chose
chose
SendGrid
sendgrid
for
for
this
this
tutorial
tutorial
because
because
They
they
have
have
a
a
solid
solid
helper
helper
library
library
and
and
a
a
detailed
detailed
node
node
example
example
in
in
their
their
documentation.
documentation
They
they
also
also
offer
offer
a
a
free
free
trial
trial
with
with
no
no
credit
credit
card
card
required,
required
So
so
you
you
can
can
get
get
your
your
API
api
key
key
and
and
follow
follow
along
along
without
without
having
having
to
to
pay
pay
anything
anything
out
out
of
of
pocket.
pocket
So
so
what
what
is
is
a
a
Cloud
cloud
Function
function
exactly?
exactly
Google
google
Cloud
cloud
Functions
functions
is
is
a
a
serverless
serverless
architecture
architecture
that
that
allows
allows
you
you
to
to
run
run
isolated
isolated
code
code
in
in
a
a
Node
node
JS
js
runtime
runtime
as
as
opposed
opposed
to
to
deploying
deploying
your
your
own
own
server
server
from
from
scratch.
scratch
It's
it's
Google's
google's
answer
answer
to
to
AWS
aws
Lambda
lambda
and
and
it's
it's
only
only
been
been
available
available
to
to
the
the
public
public
for
for
less
less
than
than
a
a
year.
year
It's
it's
an
an
awesome
awesome
tool
tool
for
for
Firebase
firebase
developers
developers
because
because
it
it
allows
allows
you
you
to
to
run
run
code
code
in
in
the
the
background
background
that
that
would
would
otherwise
otherwise
slow
slow
down
down
an
an
Angular
angular
app.
app
And
and
email
email
is
is
definitely
definitely
one
one
of
of
task
task
that
that
you
you
wanna
wanna
delegate
delegate
to
to
its
its
own
own
background
background
task
task
or
or
micro
micro
service.
service
We
we
can
can
trigger
trigger
Cloud
cloud
Functions
functions
in
in
many
many
different
different
ways,
ways
but
but
this
this
lesson
lesson
will
will
straight
straight
to
to
use
use
of
of
Cloud
cloud
Functions
functions
via
via
HTTP.
http
It's
it's
also
also
useful
useful
to
to
know
know
that
that
you
you
can
can
trigger
trigger
Cloud
cloud
Functions
functions
on
on
database
database
rights,
rights
storage
storage
uploads,
uploads
authentication
authentication
events,
events
and
and
even
even
analytic
analytic
events,
events
all
all
of
of
which
which
are
are
common
common
use
use
cases
cases
for
for
transactional
transactional
email.
email
Some
some
examples
examples
include
include
sending
sending
a
a
welcome
welcome
email
email
to
to
a
a
new
new
user
user
or
or
sending
sending
an
an
email
email
when
when
they've
they've
reached
reached
at
at
max
max
capacity
capacity
on
on
file
file
uploads
uploads
or
or
some
some
other
other
app
app
limitation
limitation
like
like
that.
that
I
i
plan
plan
on
on
covering
covering
these
these
scenarios
scenarios
in
in
future
future
videos.
videos
At
at
this
this
point,
point
I'm
i'm
assuming
assuming
you
you
have
have
an
an
Angular
angular
app
app
started
started
with
with
the
the
Firebase
firebase
Tools
tools
package
package
installed.
installed
Start
start
by
by
running
running
the
the
Firebase
firebase
init
init
command
command
and
and
then
then
scrolling
scrolling
down
down
to
to
functions.
functions
This
this
will
will
create
create
a
a
functions
functions
directory
directory
and
and
give
give
us
us
an
an
index
index
dot
dot
JS
js
file,
file
which
which
is
is
where
where
the
the
functions
functions
are
are
defined.
defined
The
the
function's
function's
directory
directory
is
is
its
its
own
own
isolated
isolated
node
node
environment
environment
completely
completely
separate
separate
from
from
your
your
Angular
angular
app.
app
Its
its
logic
logic
has
has
no
no
direct
direct
connection
connection
to
to
Angular
angular
whatsoever.
whatsoever
This
this
is
is
great
great
because
because
it
it
keeps
keeps
your
your
front
front
end
end
app
app
lightweight
lightweight
and
and
allows
allows
you
you
to
to
have
have
a
a
separate
separate
environment
environment
where
where
you
you
can
can
delegate
delegate
CPU
cpu
and
and
memory
memory
intensive
intensive
operations.
operations
First,
first
we
we
need
need
to
to
install
install
the
the
SendGrid
sendgrid
package.
package
So
so
we
we
c
c
v
v
into
into
the
the
functions
functions
directory,
directory
then
then
run
run
npm
npm
install.
install
First,
first
I
i
required
required
the
the
SendGrid
sendgrid
package
package
and
and
as
as
of
of
the
the
API
api
key.
key
Next,
next
I
i
define
define
a
a
parse
parse
body
body
helper
helper
to
to
convert
convert
the
the
email
email
parameters
parameters
into
into
JSON
json
with
with
SendGrid's
sendgrid's
mail
mail
helper.
helper
This
this
is
is
actually
actually
a
a
pretty
pretty
powerful
powerful
feature
feature
from
from
SendGrid
sendgrid
when
when
it
it
comes
comes
to
to
formatting
formatting
emails.
emails
So
so
check
check
out
out
all
all
the
the
options
options
in
in
the
the
documentation
documentation
for
for
attachments
attachments
and
and
things
things
like
like
that.
that
To
to
create
create
a
a
cloud
cloud
function,
function
you
you
use
use
the
the
exports
exports
keyword
keyword
followed
followed
by
by
the
the
function
function
name.
name
In
in
this
this
case,
case
I'm
i'm
gonna
gonna
call
call
it
it
H
h
T
t
T
t
P
p
email.
email
Our
our
function
function
will
will
return
return
a
a
promise
promise
when
when
triggered
triggered
via
via
H
h
T
t
T
t
P
p
And
and
if
if
it's
it's
successful,
successful
it
it
will
will
tell
tell
the
the
SendGrid
sendgrid
API
api
where
where
to
to
send
send
the
the
email.
email
The
the
request
request
must
must
be
be
of
of
type
type
post
post
and
and
should
should
have
have
query
query
parameters
parameters
that
that
define
define
the
the
email
email
addresses,
addresses
subject,
subject
content,
content
and
and
any
any
other
other
variables
variables
in
in
the
the
email.
email
SendGrid
sendgrid
will
will
then
then
return
return
its
its
own
own
response
response
letting
letting
us
us
know
know
that
that
email
email
was
was
successful
successful
or
or
if
if
an
an
exception
exception
has
has
occurred.
occurred
Before
before
we
we
can
can
wire
wire
up
up
the
the
cloud
cloud
function
function
with
with
Angular,
angular
we
we
first
first
need
need
to
to
deploy
deploy
it.
it
Run
run
the
the
Firebase
firebase
deploy
deploy
command
command
flagging
flagging
only
only
functions.
functions
It'll
it'll
take
take
a
a
couple
couple
minutes,
minutes
but
but
when
when
the
the
deployment
deployment
is
is
complete,
complete
the
the
console
console
will
will
print
print
out
out
the
the
URL
url
used
used
to
to
trigger
trigger
the
the
function.
function
Make
make
note
note
of
of
this
this
URL
url
because
because
We're
we're
gonna
gonna
use
use
Angular's
angular's
HTTP
http
library
library
to
to
trigger
trigger
this
this
URL
url
in
in
the
the
next
next
step.
step
Now
now
that
that
the
the
function's
function's
deployed,
deployed
We
we
can
can
call
call
this
this
function
function
from
from
anywhere
anywhere
within
within
our
our
Angular
angular
app.
app
Here,
here
I
i
have
have
a
a
brand
brand
new
new
send
send
email
email
component
component
that
that
will
will
trigger
trigger
the
the
function.
function
First,
first
I
i
import
import
the
the
HTTP
http
module
module
and
and
create
create
a
a
function
function
that
that
will
will
send
send
a
a
post
post
request
request
to
to
the
the
URL
url
that
that
we
we
just
just
deployed.
deployed
I'm
i'm
also
also
going
going
to
to
hard
hard
code
code
some
some
query
query
parameters
parameters
just
just
to
to
show
show
you
you
how
how
to
to
send
send
data
data
over
over
HTTP
http
to
to
the
the
function
function
at
at
solve.
solve
In
in
this
this
example,
example
I'm
i'm
just
just
going
going
to
to
console
console
log
log
the
the
response
response
for
for
debugging.
debugging
Now
now
we
we
can
can
trigger
trigger
the
the
cloud
cloud
function
function
with
with
a
a
button
button
click
click
or
or
any
any
other
other
event
event
for
for
that
that
matter.
matter
If
if
all
all
went
went
according
according
to
to
plan,
plan
you
you
should
should
see
see
an
an
email
email
in
in
your
your
inbox.
inbox
If
if
not,
not
make
make
sure
sure
to
to
check
check
the
the
console
console
or
or
the
the
Firebase
firebase
Cloud
cloud
Functions
functions
logs
logs
for
for
any
any
exceptions.
exceptions
That's
that's
it
it
for
for
transactional
transactional
email.
email
Thanks
thanks
for
for
watching.
watching
success
In this tutorial, the speaker explains how to send transactional emails in Angular 4 as a background task in the cloud using Google Cloud functions and SendGrid. The speaker also discusses how to trigger the cloud function using the SendGrid package and demonstrates how to create a function directory for sending emails. The tutorial also covers how to deploy the SendGrid package and use it to trigger the cloud function.
Angular 4 Transactional Email with Google Firebase Cloud Functions
In this episode, I'm going to show you how to send transactional email in Angular 4 as a background task in the cloud. To facilitate this, the emails will be sent 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 chose SendGrid for this tutorial because They have a solid helper library and a detailed node example in their documentation. They also offer a free trial with no credit card required, So you can get your API key and follow along without having to pay anything out of pocket. So what is a Cloud Function exactly? Google Cloud Functions is a serverless architecture that allows you to run isolated code in a Node JS runtime as opposed to deploying your own server from scratch. It's Google's answer to AWS Lambda and it's only been available to the public for less than a year. 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 one of task that you wanna delegate to its own background task or micro service. We can trigger Cloud Functions in many different ways, but this lesson will straight to use of Cloud Functions via HTTP. It's also useful to know that you can trigger Cloud Functions on database rights, 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 to a new user or sending an email when they've reached at max capacity on file uploads or some other app limitation like that. I plan on covering these scenarios in future videos. At this point, I'm assuming you have an Angular app started with the Firebase Tools package installed. Start by running the Firebase init command and then scrolling down to functions. This will create a functions directory and give us an index dot JS file, which is where the functions are defined. The function's directory is its own isolated node environment completely separate from your Angular app. Its logic has no direct connection to Angular whatsoever. This is great because it keeps your front end app lightweight and allows you to have a separate environment where you can delegate CPU and memory intensive operations. First, we need to install the SendGrid package. So we c v into the functions directory, then run npm install. First, I required the SendGrid package and as of the API key. Next, I define a parse body helper to convert the email parameters into JSON with SendGrid's mail helper. This is actually a pretty powerful feature from SendGrid when it comes to formatting emails. So check out all the options in the documentation for attachments and things like that. To create a cloud function, you use the exports keyword followed by the function name. In this case, I'm gonna call it H T T P email. Our function will return a promise when triggered via H T T P And if it's successful, it will tell the SendGrid API where to send the email. The request must be of type post and should have query parameters that define the email addresses, subject, content, and any other variables in the email. SendGrid will then return its own response letting us know that email was successful or if an exception has occurred. Before we can wire up the cloud function with Angular, we first need to deploy it. Run the Firebase deploy command flagging only functions. It'll take a couple minutes, but when the deployment is complete, the console will print out the URL used to trigger the function. Make note of this URL because We're gonna use Angular's HTTP library to trigger this URL in the next step. Now that the function's deployed, We can call this function from anywhere within our Angular app. Here, I have a brand new send email component that will trigger the function. First, I import the HTTP module and create a function that will send a post request to the URL that we just deployed. I'm also going to hard code some query parameters just to show you how to send data over HTTP to the function at solve. In this example, I'm just going to console log the response 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.
In this tutorial, the speaker explains how to send transactional emails in Angular 4 as a background task in the cloud using Google Cloud functions and SendGrid. The speaker also discusses how to trigger the cloud function using the SendGrid package and demonstrates how to create a function directory for sending emails. The tutorial also covers how to deploy the SendGrid package and use it to trigger the cloud function.