2024-02-04T08:14:20.742Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c2ff12e4-115d-4e36-b60c-57d56dacc05b
84330c001fb6fa3fb3f8847b2a45804c877027d4403c0db94fbf113cfdcd3240
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
When we write Firebase Cloud Functions, we normally do it in plain JavaScript, but this tends to make them hard to debug.
What if we could actually write them in TypeScript and also throw in webpack to make them a little more modular?
In this quick lesson, I'm going to show you how to set up your Cloud Function environment for TypeScript and webpack, and then we'll deploy a few Cloud Functions to Firebase?
I first wanna point out that there's an article on Medium that was the main inspiration for this video, so I'll add a link to that in the description.
And if you're brand new to Cloud Functions, I recommend checking out any of the blue videos on my channel, which are specifically focused on Firebase Cloud Functions.
So to get started, I'm assuming you have an existing project that you're working on.
Then you'll bring up the command line and run firebase init functions, then select all the default options during the project setup?
This is going to create a new directory in the root of the project called functions, and that's in isolated node environment where we can build our cloud functions?
So the next step is to c d into that directory, and then we'll create a new directory called source and we'll put a file in there called index.ts instead of index.js.
Then we can go ahead and remove the index dot JS file for now.
Webpack will actually generate the index dot JS file automatically based on our underlying TypeScript code, and that's the file that actually gets deployed to Firebase?
Now let's open up the package dot JSON file, then we can install TypeScript and Webpack.
And we'll specify them only for the development environment?
So your final node environment should look something like this.
And we can add a TS config file?
Nothing really special here.
You can go with the default options and customize it any way you want.
Then the last step is to create the webpack config.
This will tell webpack how to compile our TypeScript to a single index dot JS file that can be deployed to Firebase?
Check out the link in the description for more detail on this code.
So now we can actually start building Cloud Functions.
We can do this by creating directories inside the source directory based on the concerns that we wanna separate.
In this example, I'm separating my email cloud functions from my images cloud functions?
So now we can start writing cloud functions just like we normally would.
The only difference is we can use TypeScript, and we also use the webpack import syntax?
If you've developed Angular apps before, this should look very familiar because it's the exact approach used by the Angular CLI.
In this example, I just created a couple of cloud functions that don't do anything named update image and resize image.
And just for this example, we'll go ahead and add one more useless cloud function in the email directory.
So now we need to register through these functions in the main index dot ts file in the source directory?
This process is very similar to an NG module.
We just import the functions that we wanna deploy and then register them in this file.
Any constant that's exported in this file will be picked up by Webpack, and that'll be included in our main index dot JS file that gets deployed?
So now that we have our functions defined, we can go ahead and deploy them.
There's only one extra step.
We just have to call the webpack command, which will compile the code into that index dot JS file.
If we check it out, we can see it's mostly a bunch of Webpack code but our actual functions that we wrote are embedded in there.
And the final step is to deploy to Firebase by running Firebase deploy only functions.
And after a few seconds, we should get a confirmation on the command line?
And if we go into the Firebase console, we should see these three functions there as well.
Overall, this gives you a much more easy to maintain and debug environment for writing Cloud Functions.
That's it for TypeScript and Firebase Cloud Functions.
If this video helped you, please like and subscribe.
And if you want help building own custom Cloud Functions?
Consider becoming a pro member at angularfirebase.com.
Thanks for watching, and I'll see you soon.

Speaker 0: When we write Firebase Cloud Functions, we normally do it in plain JavaScript, but this tends to make them hard to debug. What if we could actually write them in TypeScript and also throw in webpack to make them a little more modular? In this quick lesson, I'm going to show you how to set up your Cloud Function environment for TypeScript and webpack, and then we'll deploy a few Cloud Functions to Firebase? I first wanna point out that there's an article on Medium that was the main inspiration for this video, so I'll add a link to that in the description. And if you're brand new to Cloud Functions, I recommend checking out any of the blue videos on my channel, which are specifically focused on Firebase Cloud Functions.

So to get started, I'm assuming you have an existing project that you're working on. Then you'll bring up the command line and run firebase init functions, then select all the default options during the project setup? This is going to create a new directory in the root of the project called functions, and that's in isolated node environment where we can build our cloud functions? So the next step is to c d into that directory, and then we'll create a new directory called source and we'll put a file in there called index.ts instead of index.js. Then we can go ahead and remove the index dot JS file for now.

Webpack will actually generate the index dot JS file automatically based on our underlying TypeScript code, and that's the file that actually gets deployed to Firebase? Now let's open up the package dot JSON file, then we can install TypeScript and Webpack. And we'll specify them only for the development environment? So your final node environment should look something like this. And we can add a TS config file?

Nothing really special here. You can go with the default options and customize it any way you want. Then the last step is to create the webpack config. This will tell webpack how to compile our TypeScript to a single index dot JS file that can be deployed to Firebase? Check out the link in the description for more detail on this code.

So now we can actually start building Cloud Functions. We can do this by creating directories inside the source directory based on the concerns that we wanna separate. In this example, I'm separating my email cloud functions from my images cloud functions? So now we can start writing cloud functions just like we normally would. The only difference is we can use TypeScript, and we also use the webpack import syntax?

If you've developed Angular apps before, this should look very familiar because it's the exact approach used by the Angular CLI. In this example, I just created a couple of cloud functions that don't do anything named update image and resize image. And just for this example, we'll go ahead and add one more useless cloud function in the email directory. So now we need to register through these functions in the main index dot ts file in the source directory? This process is very similar to an NG module.

We just import the functions that we wanna deploy and then register them in this file. Any constant that's exported in this file will be picked up by Webpack, and that'll be included in our main index dot JS file that gets deployed? So now that we have our functions defined, we can go ahead and deploy them. There's only one extra step. We just have to call the webpack command, which will compile the code into that index dot JS file.

If we check it out, we can see it's mostly a bunch of Webpack code but our actual functions that we wrote are embedded in there. And the final step is to deploy to Firebase by running Firebase deploy only functions. And after a few seconds, we should get a confirmation on the command line? And if we go into the Firebase console, we should see these three functions there as well. Overall, this gives you a much more easy to maintain and debug environment for writing Cloud Functions.

That's it for TypeScript and Firebase Cloud Functions. If this video helped you, please like and subscribe. And if you want help building own custom Cloud Functions? Consider becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you soon.
When we write Firebase Cloud Functions, we normally do it in plain JavaScript, but this tends to make them hard to debug. What if we could actually write them in TypeScript and also throw in webpack to make them a little more modular? In this quick lesson, I'm going to show you how to set up your Cloud Function environment for TypeScript and webpack, and then we'll deploy a few Cloud Functions to Firebase?
I first wanna point out that there's an article on Medium that was the main inspiration for this video, so I'll add a link to that in the description. And if you're brand new to Cloud Functions, I recommend checking out any of the blue videos on my channel, which are specifically focused on Firebase Cloud Functions.
youtube
streaming
So to get started, I'm assuming you have an existing project that you're working on. Then you'll bring up the command line and run firebase init functions, then select all the default options during the project setup? This is going to create a new directory in the root of the project called functions, and that's in isolated node environment where we can build our cloud functions? So the next step is to c d into that directory, and then we'll create a new directory called source and we'll put a file in there called index.ts instead of index.js. Then we can go ahead and remove the index dot JS file for now. Webpack will actually generate the index dot JS file automatically based on our underlying TypeScript code, and that's the file that actually gets deployed to Firebase? Now let's open up the package dot JSON file, then we can install TypeScript and Webpack. And we'll specify them only for the development environment? So your final node environment should look something like this. And we can add a TS config file? Nothing really special here. You can go with the default options and customize it any way you want. Then the last step is to create the webpack config. This will tell webpack how to compile our TypeScript to a single index dot JS file that can be deployed to Firebase? Check out the link in the description for more detail on this code. So now we can actually start building Cloud Functions. We can do this by creating directories inside the source directory based on the concerns that we wanna separate. In this example, I'm separating my email cloud functions from my images cloud functions? So now we can start writing cloud functions just like we normally would. The only difference is we can use TypeScript, and we also use the webpack import syntax? If you've developed Angular apps before, this should look very familiar because it's the exact approach used by the Angular CLI. In this example, I just created a couple of cloud functions that don't do anything named update image and resize image. And just for this example, we'll go ahead and add one more useless cloud function in the email directory. So now we need to register through these functions in the main index dot ts file in the source directory? This process is very similar to an NG module. We just import the functions that we wanna deploy and then register them in this file. Any constant that's exported in this file will be picked up by Webpack, and that'll be included in our main index dot JS file that gets deployed?
So now that we have our functions defined, we can go ahead and deploy them. There's only one extra step. We just have to call the webpack command, which will compile the code into that index dot JS file. If we check it out, we can see it's mostly a bunch of Webpack code but our actual functions that we wrote are embedded in there.
programming
And the final step is to deploy to Firebase by running Firebase deploy only functions. And after a few seconds, we should get a confirmation on the command line? And if we go into the Firebase console, we should see these three functions there as well. Overall, this gives you a much more easy to maintain and debug environment for writing Cloud Functions.
That's it for TypeScript and Firebase Cloud Functions. If this video helped you, please like and subscribe. And if you want help building own custom Cloud Functions? Consider becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you soon.
youtube
When we write Firebase Cloud Functions, we normally do it in plain JavaScript, but this tends to make them hard to debug. What if we could actually write them in TypeScript and also throw in webpack to make them a little more modular? In this quick lesson, I'm going to show you how to set up your Cloud Function environment for TypeScript and webpack, and then we'll deploy a few Cloud Functions to Firebase? I first wanna point out that there's an article on Medium that was the main inspiration for this video, so I'll add a link to that in the description. And if you're brand new to Cloud Functions, I recommend checking out any of the blue videos on my channel, which are specifically focused on Firebase Cloud Functions. So to get started, I'm assuming you have an existing project that you're working on. Then you'll bring up the command line and run firebase init functions, then select all the default options during the project setup? This is going to create a new directory in the root of the project called functions, and that's in isolated node environment where we can build our cloud functions? So the next step is to c d into that directory, and then we'll create a new directory called source and we'll put a file in there called index.ts instead of index.js. Then we can go ahead and remove the index dot JS file for now. Webpack will actually generate the index dot JS file automatically based on our underlying TypeScript code, and that's the file that actually gets deployed to Firebase? Now let's open up the package dot JSON file, then we can install TypeScript and Webpack. And we'll specify them only for the development environment? So your final node environment should look something like this. And we can add a TS config file? Nothing really special here. You can go with the default options and customize it any way you want. Then the last step is to create the webpack config. This will tell webpack how to compile our TypeScript to a single index dot JS file that can be deployed to Firebase? Check out the link in the description for more detail on this code. So now we can actually start building Cloud Functions. We can do this by creating directories inside the source directory based on the concerns that we wanna separate. In this example, I'm separating my email cloud functions from my images cloud functions? So now we can start writing cloud functions just like we normally would. The only difference is we can use TypeScript, and we also use the webpack import syntax? If you've developed Angular apps before, this should look very familiar because it's the exact approach used by the Angular CLI. In this example, I just created a couple of cloud functions that don't do anything named update image and resize image. And just for this example, we'll go ahead and add one more useless cloud function in the email directory. So now we need to register through these functions in the main index dot ts file in the source directory? This process is very similar to an NG module. We just import the functions that we wanna deploy and then register them in this file. Any constant that's exported in this file will be picked up by Webpack, and that'll be included in our main index dot JS file that gets deployed? So now that we have our functions defined, we can go ahead and deploy them. There's only one extra step. We just have to call the webpack command, which will compile the code into that index dot JS file. If we check it out, we can see it's mostly a bunch of Webpack code but our actual functions that we wrote are embedded in there. And the final step is to deploy to Firebase by running Firebase deploy only functions. And after a few seconds, we should get a confirmation on the command line? And if we go into the Firebase console, we should see these three functions there as well. Overall, this gives you a much more easy to maintain and debug environment for writing Cloud Functions. That's it for TypeScript and Firebase Cloud Functions. If this video helped you, please like and subscribe. And if you want help building own custom Cloud Functions? Consider becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you soon.
When
when
we
we
write
write
Firebase
firebase
Cloud
cloud
Functions,
functions
we
we
normally
normally
do
do
it
it
in
in
plain
plain
JavaScript,
javascript
but
but
this
this
tends
tends
to
to
make
make
them
them
hard
hard
to
to
debug.
debug
What
what
if
if
we
we
could
could
actually
actually
write
write
them
them
in
in
TypeScript
typescript
and
and
also
also
throw
throw
in
in
webpack
webpack
to
to
make
make
them
them
a
a
little
little
more
more
modular?
modular
In
in
this
this
quick
quick
lesson,
lesson
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
set
set
up
up
your
your
Cloud
cloud
Function
function
environment
environment
for
for
TypeScript
typescript
and
and
webpack,
webpack
and
and
then
then
we'll
we'll
deploy
deploy
a
a
few
few
Cloud
cloud
Functions
functions
to
to
Firebase?
firebase
I
i
first
first
wanna
wanna
point
point
out
out
that
that
there's
there's
an
an
article
article
on
on
Medium
medium
that
that
was
was
the
the
main
main
inspiration
inspiration
for
for
this
this
video,
video
so
so
I'll
i'll
add
add
a
a
link
link
to
to
that
that
in
in
the
the
description.
description
And
and
if
if
you're
you're
brand
brand
new
new
to
to
Cloud
cloud
Functions,
functions
I
i
recommend
recommend
checking
checking
out
out
any
any
of
of
the
the
blue
blue
videos
videos
on
on
my
my
channel,
channel
which
which
are
are
specifically
specifically
focused
focused
on
on
Firebase
firebase
Cloud
cloud
Functions.
functions
So
so
to
to
get
get
started,
started
I'm
i'm
assuming
assuming
you
you
have
have
an
an
existing
existing
project
project
that
that
you're
you're
working
working
on.
on
Then
then
you'll
you'll
bring
bring
up
up
the
the
command
command
line
line
and
and
run
run
firebase
firebase
init
init
functions,
functions
then
then
select
select
all
all
the
the
default
default
options
options
during
during
the
the
project
project
setup?
setup
This
this
is
is
going
going
to
to
create
create
a
a
new
new
directory
directory
in
in
the
the
root
root
of
of
the
the
project
project
called
called
functions,
functions
and
and
that's
that's
in
in
isolated
isolated
node
node
environment
environment
where
where
we
we
can
can
build
build
our
our
cloud
cloud
functions?
functions
So
so
the
the
next
next
step
step
is
is
to
to
c
c
d
d
into
into
that
that
directory,
directory
and
and
then
then
we'll
we'll
create
create
a
a
new
new
directory
directory
called
called
source
source
and
and
we'll
we'll
put
put
a
a
file
file
in
in
there
there
called
called
index.ts
index.ts
instead
instead
of
of
index.js.
index.js
Then
then
we
we
can
can
go
go
ahead
ahead
and
and
remove
remove
the
the
index
index
dot
dot
JS
js
file
file
for
for
now.
now
Webpack
webpack
will
will
actually
actually
generate
generate
the
the
index
index
dot
dot
JS
js
file
file
automatically
automatically
based
based
on
on
our
our
underlying
underlying
TypeScript
typescript
code,
code
and
and
that's
that's
the
the
file
file
that
that
actually
actually
gets
gets
deployed
deployed
to
to
Firebase?
firebase
Now
now
let's
let's
open
open
up
up
the
the
package
package
dot
dot
JSON
json
file,
file
then
then
we
we
can
can
install
install
TypeScript
typescript
and
and
Webpack.
webpack
And
and
we'll
we'll
specify
specify
them
them
only
only
for
for
the
the
development
development
environment?
environment
So
so
your
your
final
final
node
node
environment
environment
should
should
look
look
something
something
like
like
this.
this
And
and
we
we
can
can
add
add
a
a
TS
ts
config
config
file?
file
Nothing
nothing
really
really
special
special
here.
here
You
you
can
can
go
go
with
with
the
the
default
default
options
options
and
and
customize
customize
it
it
any
any
way
way
you
you
want.
want
Then
then
the
the
last
last
step
step
is
is
to
to
create
create
the
the
webpack
webpack
config.
config
This
this
will
will
tell
tell
webpack
webpack
how
how
to
to
compile
compile
our
our
TypeScript
typescript
to
to
a
a
single
single
index
index
dot
dot
JS
js
file
file
that
that
can
can
be
be
deployed
deployed
to
to
Firebase?
firebase
Check
check
out
out
the
the
link
link
in
in
the
the
description
description
for
for
more
more
detail
detail
on
on
this
this
code.
code
So
so
now
now
we
we
can
can
actually
actually
start
start
building
building
Cloud
cloud
Functions.
functions
We
we
can
can
do
do
this
this
by
by
creating
creating
directories
directories
inside
inside
the
the
source
source
directory
directory
based
based
on
on
the
the
concerns
concerns
that
that
we
we
wanna
wanna
separate.
separate
In
in
this
this
example,
example
I'm
i'm
separating
separating
my
my
email
email
cloud
cloud
functions
functions
from
from
my
my
images
images
cloud
cloud
functions?
functions
So
so
now
now
we
we
can
can
start
start
writing
writing
cloud
cloud
functions
functions
just
just
like
like
we
we
normally
normally
would.
would
The
the
only
only
difference
difference
is
is
we
we
can
can
use
use
TypeScript,
typescript
and
and
we
we
also
also
use
use
the
the
webpack
webpack
import
import
syntax?
syntax
If
if
you've
you've
developed
developed
Angular
angular
apps
apps
before,
before
this
this
should
should
look
look
very
very
familiar
familiar
because
because
it's
it's
the
the
exact
exact
approach
approach
used
used
by
by
the
the
Angular
angular
CLI.
cli
In
in
this
this
example,
example
I
i
just
just
created
created
a
a
couple
couple
of
of
cloud
cloud
functions
functions
that
that
don't
don't
do
do
anything
anything
named
named
update
update
image
image
and
and
resize
resize
image.
image
And
and
just
just
for
for
this
this
example,
example
we'll
we'll
go
go
ahead
ahead
and
and
add
add
one
one
more
more
useless
useless
cloud
cloud
function
function
in
in
the
the
email
email
directory.
directory
So
so
now
now
we
we
need
need
to
to
register
register
through
through
these
these
functions
functions
in
in
the
the
main
main
index
index
dot
dot
ts
ts
file
file
in
in
the
the
source
source
directory?
directory
This
this
process
process
is
is
very
very
similar
similar
to
to
an
an
NG
ng
module.
module
We
we
just
just
import
import
the
the
functions
functions
that
that
we
we
wanna
wanna
deploy
deploy
and
and
then
then
register
register
them
them
in
in
this
this
file.
file
Any
any
constant
constant
that's
that's
exported
exported
in
in
this
this
file
file
will
will
be
be
picked
picked
up
up
by
by
Webpack,
webpack
and
and
that'll
that'll
be
be
included
included
in
in
our
our
main
main
index
index
dot
dot
JS
js
file
file
that
that
gets
gets
deployed?
deployed
So
so
now
now
that
that
we
we
have
have
our
our
functions
functions
defined,
defined
we
we
can
can
go
go
ahead
ahead
and
and
deploy
deploy
them.
them
There's
there's
only
only
one
one
extra
extra
step.
step
We
we
just
just
have
have
to
to
call
call
the
the
webpack
webpack
command,
command
which
which
will
will
compile
compile
the
the
code
code
into
into
that
that
index
index
dot
dot
JS
js
file.
file
If
if
we
we
check
check
it
it
out,
out
we
we
can
can
see
see
it's
it's
mostly
mostly
a
a
bunch
bunch
of
of
Webpack
webpack
code
code
but
but
our
our
actual
actual
functions
functions
that
that
we
we
wrote
wrote
are
are
embedded
embedded
in
in
there.
there
And
and
the
the
final
final
step
step
is
is
to
to
deploy
deploy
to
to
Firebase
firebase
by
by
running
running
Firebase
firebase
deploy
deploy
only
only
functions.
functions
And
and
after
after
a
a
few
few
seconds,
seconds
we
we
should
should
get
get
a
a
confirmation
confirmation
on
on
the
the
command
command
line?
line
And
and
if
if
we
we
go
go
into
into
the
the
Firebase
firebase
console,
console
we
we
should
should
see
see
these
these
three
three
functions
functions
there
there
as
as
well.
well
Overall,
overall
this
this
gives
gives
you
you
a
a
much
much
more
more
easy
easy
to
to
maintain
maintain
and
and
debug
debug
environment
environment
for
for
writing
writing
Cloud
cloud
Functions.
functions
That's
that's
it
it
for
for
TypeScript
typescript
and
and
Firebase
firebase
Cloud
cloud
Functions.
functions
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
help
help
building
building
own
own
custom
custom
Cloud
cloud
Functions?
functions
Consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speaker explains how to set up the Cloud Function environment for TypeScript andpm in a quick lesson. They recommend checking out the blue videos on their channel and recommend adding a TS config file to the main index. They also explain how to register and deploy functions in the main index dot pushed file in the source directory. The speaker concludes that this gives a more easy to debug and maintain the environment for writing Cloud Function.
Use TypeScript with Firebase Cloud Functions
Learn how to make your Firebase Cloud Functions easier to debug with TypeScript and modular with Webpack.  

Medium Article: https://medium.com/netscape/firebase-cloud-functions-with-typescript-and-webpack-7781c882a05b