Serverless Computing can dramatically simplify your backend infrastructure by eliminating the need to configure, maintain, and scale servers. Go beyond 100 seconds with @FilledStacks to build a production-ready backend with Firebase Cloud Functions. 

Subscribe to FilledStacks 🔥👉 https://www.youtube.com/channel/UC2d0BYlqQCdF9lJfydl_02Q

00:00 Serverless Explained
01:50 Build a Complex Cloud Functions Backend

Popular Serverless Solutions:

AWS Lambda https://aws.amazon.com/lambda/
Google Cloud Functions https://cloud.google.com/functions
Azure Functions https://azure.microsoft.com/en-us/services/functions/

#cloud #firebase #100SecondsOfCode

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:55:54.934Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
527653cf-8816-41bc-b413-f539ffb6fa38
a59c7f2f9dbcca05ea16762c994243e89e9898fd1dd9b43c4cc029676c1441c5
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Serverless computing.
It's a misnomer used to describe servers in the cloud that requires zero configuration or maintenance from the developer.
Imagine you need water for your house.
You could spend a bunch of time and money digging a well, testing the water quality, and plumbing it to your house, or you could just tap into the city water supply and pay a monthly fee based on the amount of water that you use.
Serverless computing is the same idea, but instead of water, we're talking about the amount of CPU and memory it takes to run your code.
Services like AWS as Lambda, Google Cloud Functions, and Azure Functions allow you to run your back end code across their global data centers, then they mail you a bill at the end of the month that's factored down to the millisecond.
The beauty of this approach is that your only concern is writing code.
You don't have to pick an operating system, configure networking, patch improvements, support provision capacity to run at scale.
The cloud handles all that for you behind the scenes.
From an architectural standpoint, it allows you to develop and test each business permit independent of a bigger monolithic system.
Not only do serverless functions make servers easier to manage, but they can also be executed based on different events that happen in the cloud, which can actually simplify your back end code.
For example, you might create a new database record when a user places an order, which then triggers a serverless function to send an email confirmation, or maybe an IoT event on a home security system invokes a function that sends a push notification to the user's device.
One of the easiest ways to get started with serverless is Firebase Cloud Functions.
The command line tool will give us a project that looks like any other Node.
Js back end.
In the code, we can export named functions that are configured to run on different events that happen in Google Cloud.
An event could be a simple HTTP request or a file upload, database write, analytics event, and so on.
After writing our code, we can then deploy it to production with a single command, and we now have a reliable back end that is ready to scale.
This has been serverless in 100 seconds.
But if that sounded too good to be true, make sure to stay tuned because I've invited Dane from the Field Stacks YouTube channel to show us how to build a serverless back end for a big complex project.
If you're building anything with Firebase or Flutter, you'll definitely want to follow his work.
Hey there.
My name is Dane, and I run a little YouTube channel called FullStacks That's focused on sharing the code that we use to build apps for our clients.
Over on my channel, we are building a product called boxed out a set of software built for a company that wants to run a product or food delivery service.
Building 1 cloud function is easy, but how do you structure dozens of functions to scale to real world demands?
How do you ensure you have a structured and maintainable back end?
How does a back end with only serverless functions look?
Over the next 15 minutes, you'll learn how to build a serverless back end for non trivial apps.
I like to start out by taking you through a high level overview of how the back end will be set up.
This overview will go over the types of functions we use as well as the actual code structure.
The back end is built around the strengths that Firebase possess in their serverless cloud functions setup.
Focusing on those strengths, We can break the system into 2 types of functions.
The 2 types of functions are restful and reactive.
A reactive function is a function that will only run-in reaction to data or state that's being updated on the back end.
An example of this will be when a file is uploaded to cloud storage or the most common, when a document or an entry in the database has been updated.
A restful function is a traditional restful function which will run when a client makes an HTTP request to the URI that the function is assigned to.
Now we can move on to the code structure.
We have an enforced code structure that will help with the organization of the back end As well as the overall maintenance as it grows.
There's 3 major things to go over.
Number 1, each function will be in its own dedicated file.
This is to get rid of the natural tendency when starting with Firebase Cloud Functions to keep adding functions into the same index file, forcing it to grow bigger as your back end requirements grow.
And as a note, the file name will be the exact name of the endpoint or function to keep things easy to manage.
This is not a requirement, but I found it to be quite useful.
Number 2.
Functions will be placed in a folder titled either restful or reactive.
The number 3, the back end will be split into different resource groups to ensure a structured back end in production.
As a quick example of this, we can look at the code structure below for the product delivery service back end.
There are 3 resource groups, orders, payments, and users.
And in each of those resource groups, we're very active and a restful folder.
This is the only folder structure that you would need.
The rest is handled by the fact that each of the files will be its own function.
Now that you have a basic overview of the code set up, let's start with the actual implementation.
We'll start by creating a new folder called boxed out.
And inside that folder, create a new folder called back end.
Then we can navigate into the back end folder and run Firebase in it.
Then you have to select yes to proceed when presented with the functions to select, we'll choose Firestore, functions, and emulators.
Then we'll choose to create a new project and we'll call out boxed out dash back end.
We'll use that same name for the project name And then the Firestore setup usually fails on first try because you have to click on the get started button.
Go to the URL that has been handed to you.
You'll end up on the cloud Firestore page where you can click on create database.
For now, we'll start in test mode.
I'm going to select Europe West because I'm in Africa.
And once that is complete, go back to your command line shell that you've been using, then we can run Firebase init again.
We'll select Firestore functions and emulators and this time we'll use an existing project and we'll use the boxed Out back end that we just created.
Then we'll select the default values for all the questions.
And for the functions set up, we'll be using TypeScript.
I'm going to say no to ES Lint for now and then I will say yes to installing the dependencies.
When asked about the emulators, we will select Functions and Firestore.
Press enter to select all the default ports and we'll select to enable the emulator UI.
If you don't have the emulators downloaded, select yes to download the emulators and that should complete your Firebase functions set up.
And if we open up this code now, you'll see a folder with another folder inside called functions And that is where the back end will be written.
The files in the root folder describes the Firestore project And some of the overall rules in the Firestore project.
Now that we've configured the basics of Firebase functions project, We can implement the back end system as described at the beginning.
We'll start off by installing the package dedicated to using the system described earlier.
It's called Firebase back end.
We'll navigate into the functions folder and then we'll run npm install firebasedash back end.
Then you can open up your index dot ts file in your source folder.
You can delete all of the code in the file currently, then we'll import the function parser from the Firebase back end, then we can set the exports equal to a newly constructed Function parser that takes in the current directory name as well as the exports.
This will be All the code you need in the index dot ts file regardless of how big your back end gets.
And that's also all the setup we need before we can actually start writing any Let's start with something familiar.
We'll create a restful endpoint on our back end.
We'll start by creating a folder, the resource group, and we'll call that use this.
Then in the folder, we'll create another folder called restful.
And in that folder, we'll create a new file called add payment method dot endpoint dotts.
For any endpoint, the file has to end in dot endpoint dotts.
If it doesn't, then it won't be loaded as an HTTP endpoint on the back end.
Then we'll start off in the file by importing request and response from press and we'll also import endpoint and request type from the Firebase backend.
Then we will export a default new endpoint.
The first value we'll pass in is the name of the endpoint.
We'll pass in the add payment method string.
The second parameter expects The type of endpoint that we are creating.
We'll pass in request type dot post.
And for the last parameter, We pass in the express endpoint handler which is will be the actual code that's executed when your endpoint is called.
This is a function that takes in A request as well as a response and what we'll write in this function is just some code to read the values sent in the request and then return that in a different format so we can know that it's working.
We'll start by reading out the card number and the card holder from the request Body.
We will create a new value called payment token that has these two values concatenated with an underscore in the middle.
And then we'll return a response with a status 201 and we'll send back a map with a key token and we'll assign it the payment token.
To make maintenance easy as the code base grows, remember the tip that I mentioned?
Give your file name the same name as your function endpoint, that way when you are debugging an error in production, you know exactly which file to go to find your function.
Now we can go ahead and test out this function.
To test this out, we can simply run npm run serve.
This will build the TypeScript code and then serve the functions locally through the emulator.
If this command is successful.
You should see the following in your console.
As you can see, the API has be deployed under this URL which ends in users dash API.
Each resource group that you create will have All the API endpoints under the resource group dash API.
With this deployed, let's see if we can make a post to it and get the expected response.
For this, I will be using Postman.
We'll take the URL that the API has been deployed to and paste that in the Postman URL field.
We can add our actual endpoint name at the end of it slash add payment method.
We'll change the request type to post and then for the body we will pass in payroll JSON blob.
The first value will be card number.
I'll give it a basic value of 1234567.
And the second value will be card Underscore holder.
And for the value, we'll pass in full stacks.
When I execute this function now, we should get back a token That has the card number followed by underscore and then with the card holder at the end of it.
And that's it.
That's how we create an endpoint and that's how all endpoints going forward will be create it.
Then you can stop your emulators from running and we'll move on to creating a reactive function.
To demonstrate this, we'll add a function that will fire when a new user is created in the Firestore database.
We'll create a new folder in the users folder called reactive and inside that folder will create a new file called on user created dot function dot d s.
And as you can imagine, the part dot function dotts is very important.
That's how we know which file to load as a reactive dev cloud function.
We'll start off by importing the Firebase functions as functions.
And then on the exports, we'll create A new function called on user created and we'll assign that to the on create function callback provided by a document from Firestore.
To access that will index into functions.
Go to Firestore, then supply the document pattern that we would like to listen to.
In our case, we want to listen to the user's collection and check for any new user ID.
And lastly, we want to listen to the on create function callback.
This takes in a callback function that provides us with the user's snapshot as well as the context of this event trigger.
The data for this document can be retrieved by calling the data function on the user snapshot.
To avoid getting off topic, we're simply going to log out some text that says that we have sent an email to the email value on the data from that document.
To test out a reactive function you have to start all of the emulators.
So the NPM run surf function won't work because that only deploys the functions to the emulator.
So to run this time, we'll first run npm run build and once that's complete, we'll run firebase emulators go on start.
This will start up the functions as well as the Firestore emulator that we selected at the beginning.
And then you'll see 2 URLs.
One for the functions emulator and one for the Firestore emulator.
In addition to that, we can see that we also now have a new function deployed called on user create it.
We will go ahead and create an actual document in the user's collection and that function should fire on its own which is why it's called a reactive function.
You can open up the Firestore emulator URL, then you can click on start collection.
We'll give it a collection ID of use this.
And for the field value, we know that we are expecting an email.
I'll be so kind to give you my actual email address in case you have any questions, which is dane@fullstax.com.
If I click save and that document is created.
When I open up the console, there should be logs saying that we've sent an email to this email address.
It tells us that it begins the execution and then it sends the email.
And that's it.
You've created a reactive function as well as an HTTP c p endpoint.
Going further, when you want to expand your back end, you simply create a new file in the dedicated folder and it will add it automatically to your back end when you deploy.
There's one last thing I wanted to show you which is to improve the code setup.
The way that the default TypeScript project is set up is not sufficient for consistent deployments and debugging.
And because of that, we'll add some additional things into our project.
We'll start by making sure that the old function code doesn't look around when we're testing any new changes.
To fix that, we'll add a new package into The functions folder called rimraff.
We'll run npm install dashd rimraff.
This will install it as a development dependency.
Then you can open up your package dot JSON file and we'll add 2 new scripts into the package dot JSON above the build script.
We'll add a clean script which we'll call rim raf and pass in the lib directory.
And then we'll add our second script which is called pre build, and this will call the clean script.
The pre build will always run before build, which builds TypeScript, meaning the old code will be deleted before we build the new code.
And then to deploy, we can run NPM run build.
As you see, there will now be Three scripts that's being executed because of the 2 additional ones we added and then we'll run npm run deploy.
This will only deploy the functions to your back end.
When that deployment is complete, you'll see your API link printed out, and we can do the exact same test with Postman that we did Earlier.
This is quite a new package and a way of developing a back end on Firebase for us, but it provides a clear path towards a large and maintainable fire base product.
If you want to see this being used in development, please check out my channel.
We'll be doing back end and front end work on a product over the next Yeah.
Thank you, Jeff, for having me on this awesome channel, and thank you to the contributors, Lou Ellen and Ruiz, that helped me get the packages ready for this tutorial.
Thank you guys for watching, and I hope I see you
over at the full stacks channel.
Thanks for watching, and I
will see you in the next one.

Speaker 0: Serverless computing. It's a misnomer used to describe servers in the cloud that requires zero configuration or maintenance from the developer. Imagine you need water for your house. You could spend a bunch of time and money digging a well, testing the water quality, and plumbing it to your house, or you could just tap into the city water supply and pay a monthly fee based on the amount of water that you use. Serverless computing is the same idea, but instead of water, we're talking about the amount of CPU and memory it takes to run your code.

Services like AWS as Lambda, Google Cloud Functions, and Azure Functions allow you to run your back end code across their global data centers, then they mail you a bill at the end of the month that's factored down to the millisecond. The beauty of this approach is that your only concern is writing code. You don't have to pick an operating system, configure networking, patch improvements, support provision capacity to run at scale. The cloud handles all that for you behind the scenes. From an architectural standpoint, it allows you to develop and test each business permit independent of a bigger monolithic system.

Not only do serverless functions make servers easier to manage, but they can also be executed based on different events that happen in the cloud, which can actually simplify your back end code. For example, you might create a new database record when a user places an order, which then triggers a serverless function to send an email confirmation, or maybe an IoT event on a home security system invokes a function that sends a push notification to the user's device. One of the easiest ways to get started with serverless is Firebase Cloud Functions. The command line tool will give us a project that looks like any other Node. Js back end.

In the code, we can export named functions that are configured to run on different events that happen in Google Cloud. An event could be a simple HTTP request or a file upload, database write, analytics event, and so on. After writing our code, we can then deploy it to production with a single command, and we now have a reliable back end that is ready to scale. This has been serverless in 100 seconds. But if that sounded too good to be true, make sure to stay tuned because I've invited Dane from the Field Stacks YouTube channel to show us how to build a serverless back end for a big complex project.

If you're building anything with Firebase or Flutter, you'll definitely want to follow his work.

Speaker 1: Hey there. My name is Dane, and I run a little YouTube channel called FullStacks That's focused on sharing the code that we use to build apps for our clients. Over on my channel, we are building a product called boxed out a set of software built for a company that wants to run a product or food delivery service. Building 1 cloud function is easy, but how do you structure dozens of functions to scale to real world demands? How do you ensure you have a structured and maintainable back end?

How does a back end with only serverless functions look? Over the next 15 minutes, you'll learn how to build a serverless back end for non trivial apps. I like to start out by taking you through a high level overview of how the back end will be set up. This overview will go over the types of functions we use as well as the actual code structure. The back end is built around the strengths that Firebase possess in their serverless cloud functions setup.

Focusing on those strengths, We can break the system into 2 types of functions. The 2 types of functions are restful and reactive. A reactive function is a function that will only run-in reaction to data or state that's being updated on the back end. An example of this will be when a file is uploaded to cloud storage or the most common, when a document or an entry in the database has been updated. A restful function is a traditional restful function which will run when a client makes an HTTP request to the URI that the function is assigned to.

Now we can move on to the code structure. We have an enforced code structure that will help with the organization of the back end As well as the overall maintenance as it grows. There's 3 major things to go over. Number 1, each function will be in its own dedicated file. This is to get rid of the natural tendency when starting with Firebase Cloud Functions to keep adding functions into the same index file, forcing it to grow bigger as your back end requirements grow.

And as a note, the file name will be the exact name of the endpoint or function to keep things easy to manage. This is not a requirement, but I found it to be quite useful. Number 2. Functions will be placed in a folder titled either restful or reactive. The number 3, the back end will be split into different resource groups to ensure a structured back end in production.

As a quick example of this, we can look at the code structure below for the product delivery service back end. There are 3 resource groups, orders, payments, and users. And in each of those resource groups, we're very active and a restful folder. This is the only folder structure that you would need. The rest is handled by the fact that each of the files will be its own function.

Now that you have a basic overview of the code set up, let's start with the actual implementation. We'll start by creating a new folder called boxed out. And inside that folder, create a new folder called back end. Then we can navigate into the back end folder and run Firebase in it. Then you have to select yes to proceed when presented with the functions to select, we'll choose Firestore, functions, and emulators.

Then we'll choose to create a new project and we'll call out boxed out dash back end. We'll use that same name for the project name And then the Firestore setup usually fails on first try because you have to click on the get started button. Go to the URL that has been handed to you. You'll end up on the cloud Firestore page where you can click on create database. For now, we'll start in test mode.

I'm going to select Europe West because I'm in Africa. And once that is complete, go back to your command line shell that you've been using, then we can run Firebase init again. We'll select Firestore functions and emulators and this time we'll use an existing project and we'll use the boxed Out back end that we just created. Then we'll select the default values for all the questions. And for the functions set up, we'll be using TypeScript.

I'm going to say no to ES Lint for now and then I will say yes to installing the dependencies. When asked about the emulators, we will select Functions and Firestore. Press enter to select all the default ports and we'll select to enable the emulator UI. If you don't have the emulators downloaded, select yes to download the emulators and that should complete your Firebase functions set up. And if we open up this code now, you'll see a folder with another folder inside called functions And that is where the back end will be written.

The files in the root folder describes the Firestore project And some of the overall rules in the Firestore project. Now that we've configured the basics of Firebase functions project, We can implement the back end system as described at the beginning. We'll start off by installing the package dedicated to using the system described earlier. It's called Firebase back end. We'll navigate into the functions folder and then we'll run npm install firebasedash back end.

Then you can open up your index dot ts file in your source folder. You can delete all of the code in the file currently, then we'll import the function parser from the Firebase back end, then we can set the exports equal to a newly constructed Function parser that takes in the current directory name as well as the exports. This will be All the code you need in the index dot ts file regardless of how big your back end gets. And that's also all the setup we need before we can actually start writing any Let's start with something familiar. We'll create a restful endpoint on our back end.

We'll start by creating a folder, the resource group, and we'll call that use this. Then in the folder, we'll create another folder called restful. And in that folder, we'll create a new file called add payment method dot endpoint dotts. For any endpoint, the file has to end in dot endpoint dotts. If it doesn't, then it won't be loaded as an HTTP endpoint on the back end.

Then we'll start off in the file by importing request and response from press and we'll also import endpoint and request type from the Firebase backend. Then we will export a default new endpoint. The first value we'll pass in is the name of the endpoint. We'll pass in the add payment method string. The second parameter expects The type of endpoint that we are creating.

We'll pass in request type dot post. And for the last parameter, We pass in the express endpoint handler which is will be the actual code that's executed when your endpoint is called. This is a function that takes in A request as well as a response and what we'll write in this function is just some code to read the values sent in the request and then return that in a different format so we can know that it's working. We'll start by reading out the card number and the card holder from the request Body. We will create a new value called payment token that has these two values concatenated with an underscore in the middle.

And then we'll return a response with a status 201 and we'll send back a map with a key token and we'll assign it the payment token. To make maintenance easy as the code base grows, remember the tip that I mentioned? Give your file name the same name as your function endpoint, that way when you are debugging an error in production, you know exactly which file to go to find your function. Now we can go ahead and test out this function. To test this out, we can simply run npm run serve.

This will build the TypeScript code and then serve the functions locally through the emulator. If this command is successful. You should see the following in your console. As you can see, the API has be deployed under this URL which ends in users dash API. Each resource group that you create will have All the API endpoints under the resource group dash API.

With this deployed, let's see if we can make a post to it and get the expected response. For this, I will be using Postman. We'll take the URL that the API has been deployed to and paste that in the Postman URL field. We can add our actual endpoint name at the end of it slash add payment method. We'll change the request type to post and then for the body we will pass in payroll JSON blob.

The first value will be card number. I'll give it a basic value of 1234567. And the second value will be card Underscore holder. And for the value, we'll pass in full stacks. When I execute this function now, we should get back a token That has the card number followed by underscore and then with the card holder at the end of it.

And that's it. That's how we create an endpoint and that's how all endpoints going forward will be create it. Then you can stop your emulators from running and we'll move on to creating a reactive function. To demonstrate this, we'll add a function that will fire when a new user is created in the Firestore database. We'll create a new folder in the users folder called reactive and inside that folder will create a new file called on user created dot function dot d s.

And as you can imagine, the part dot function dotts is very important. That's how we know which file to load as a reactive dev cloud function. We'll start off by importing the Firebase functions as functions. And then on the exports, we'll create A new function called on user created and we'll assign that to the on create function callback provided by a document from Firestore. To access that will index into functions.

Go to Firestore, then supply the document pattern that we would like to listen to. In our case, we want to listen to the user's collection and check for any new user ID. And lastly, we want to listen to the on create function callback. This takes in a callback function that provides us with the user's snapshot as well as the context of this event trigger. The data for this document can be retrieved by calling the data function on the user snapshot.

To avoid getting off topic, we're simply going to log out some text that says that we have sent an email to the email value on the data from that document. To test out a reactive function you have to start all of the emulators. So the NPM run surf function won't work because that only deploys the functions to the emulator. So to run this time, we'll first run npm run build and once that's complete, we'll run firebase emulators go on start. This will start up the functions as well as the Firestore emulator that we selected at the beginning.

And then you'll see 2 URLs. One for the functions emulator and one for the Firestore emulator. In addition to that, we can see that we also now have a new function deployed called on user create it. We will go ahead and create an actual document in the user's collection and that function should fire on its own which is why it's called a reactive function. You can open up the Firestore emulator URL, then you can click on start collection.

We'll give it a collection ID of use this. And for the field value, we know that we are expecting an email. I'll be so kind to give you my actual email address in case you have any questions, which is dane@fullstax.com. If I click save and that document is created. When I open up the console, there should be logs saying that we've sent an email to this email address.

It tells us that it begins the execution and then it sends the email. And that's it. You've created a reactive function as well as an HTTP c p endpoint. Going further, when you want to expand your back end, you simply create a new file in the dedicated folder and it will add it automatically to your back end when you deploy. There's one last thing I wanted to show you which is to improve the code setup.

The way that the default TypeScript project is set up is not sufficient for consistent deployments and debugging. And because of that, we'll add some additional things into our project. We'll start by making sure that the old function code doesn't look around when we're testing any new changes. To fix that, we'll add a new package into The functions folder called rimraff. We'll run npm install dashd rimraff.

This will install it as a development dependency. Then you can open up your package dot JSON file and we'll add 2 new scripts into the package dot JSON above the build script. We'll add a clean script which we'll call rim raf and pass in the lib directory. And then we'll add our second script which is called pre build, and this will call the clean script. The pre build will always run before build, which builds TypeScript, meaning the old code will be deleted before we build the new code.

And then to deploy, we can run NPM run build. As you see, there will now be Three scripts that's being executed because of the 2 additional ones we added and then we'll run npm run deploy. This will only deploy the functions to your back end. When that deployment is complete, you'll see your API link printed out, and we can do the exact same test with Postman that we did Earlier. This is quite a new package and a way of developing a back end on Firebase for us, but it provides a clear path towards a large and maintainable fire base product.

If you want to see this being used in development, please check out my channel. We'll be doing back end and front end work on a product over the next Yeah. Thank you, Jeff, for having me on this awesome channel, and thank you to the contributors, Lou Ellen and Ruiz, that helped me get the packages ready for this tutorial. Thank you guys for watching, and I hope I see you

Speaker 0: over at the full stacks channel. Thanks for watching, and I

Speaker 1: will see you in the next one.
Serverless computing. It's a misnomer used to describe servers in the cloud that requires zero configuration or maintenance from the developer. Imagine you need water for your house. You could spend a bunch of time and money digging a well, testing the water quality, and plumbing it to your house, or you could just tap into the city water supply and pay a monthly fee based on the amount of water that you use.
water
Serverless computing is the same idea, but instead of water, we're talking about the amount of CPU and memory it takes to run your code. Services like AWS as Lambda, Google Cloud Functions, and Azure Functions allow you to run your back end code across their global data centers, then they mail you a bill at the end of the month that's factored down to the millisecond.
The beauty of this approach is that your only concern is writing code. You don't have to pick an operating system, configure networking, patch improvements, support provision capacity to run at scale. The cloud handles all that for you behind the scenes. From an architectural standpoint, it allows you to develop and test each business permit independent of a bigger monolithic system.
software
software development
architecture
infrastructure
Not only do serverless functions make servers easier to manage, but they can also be executed based on different events that happen in the cloud, which can actually simplify your back end code.
For example, you might create a new database record when a user places an order, which then triggers a serverless function to send an email confirmation, or maybe an IoT event on a home security system invokes a function that sends a push notification to the user's device. One of the easiest ways to get started with serverless is Firebase Cloud Functions.
databases
The command line tool will give us a project that looks like any other Node. Js back end. In the code, we can export named functions that are configured to run on different events that happen in Google Cloud. An event could be a simple HTTP request or a file upload, database write, analytics event, and so on. After writing our code, we can then deploy it to production with a single command, and we now have a reliable back end that is ready to scale. This has been serverless in 100 seconds. But if that sounded too good to be true, make sure to stay tuned because I've invited Dane from the Field Stacks YouTube channel to show us how to build a serverless back end for a big complex project. If you're building anything with Firebase or Flutter, you'll definitely want to follow his work. Hey there. My name is Dane, and I run a little YouTube channel called FullStacks That's focused on sharing the code that we use to build apps for our clients.
Over on my channel, we are building a product called boxed out a set of software built for a company that wants to run a product or food delivery service. Building 1 cloud function is easy, but how do you structure dozens of functions to scale to real world demands?
software development
software
How do you ensure you have a structured and maintainable back end? How does a back end with only serverless functions look? Over the next 15 minutes, you'll learn how to build a serverless back end for non trivial apps. I like to start out by taking you through a high level overview of how the back end will be set up. This overview will go over the types of functions we use as well as the actual code structure. The back end is built around the strengths that Firebase possess in their serverless cloud functions setup. Focusing on those strengths, We can break the system into 2 types of functions. The 2 types of functions are restful and reactive. A reactive function is a function that will only run-in reaction to data or state that's being updated on the back end. An example of this will be when a file is uploaded to cloud storage or the most common, when a document or an entry in the database has been updated. A restful function is a traditional restful function which will run when a client makes an HTTP request to the URI that the function is assigned to. Now we can move on to the code structure. We have an enforced code structure that will help with the organization of the back end As well as the overall maintenance as it grows. There's 3 major things to go over. Number 1, each function will be in its own dedicated file. This is to get rid of the natural tendency when starting with Firebase Cloud Functions to keep adding functions into the same index file, forcing it to grow bigger as your back end requirements grow. And as a note, the file name will be the exact name of the endpoint or function to keep things easy to manage. This is not a requirement, but I found it to be quite useful.
Number 2. Functions will be placed in a folder titled either restful or reactive. The number 3, the back end will be split into different resource groups to ensure a structured back end in production. As a quick example of this, we can look at the code structure below for the product delivery service back end. There are 3 resource groups, orders, payments, and users. And in each of those resource groups, we're very active and a restful folder. This is the only folder structure that you would need.
customer support
operations
data management
software development
software
programming
commerce
The rest is handled by the fact that each of the files will be its own function. Now that you have a basic overview of the code set up, let's start with the actual implementation. We'll start by creating a new folder called boxed out. And inside that folder, create a new folder called back end. Then we can navigate into the back end folder and run Firebase in it. Then you have to select yes to proceed when presented with the functions to select, we'll choose Firestore, functions, and emulators. Then we'll choose to create a new project and we'll call out boxed out dash back end. We'll use that same name for the project name And then the Firestore setup usually fails on first try because you have to click on the get started button. Go to the URL that has been handed to you. You'll end up on the cloud Firestore page where you can click on create database. For now, we'll start in test mode. I'm going to select Europe West because I'm in Africa. And once that is complete, go back to your command line shell that you've been using, then we can run Firebase init again.
We'll select Firestore functions and emulators and this time we'll use an existing project and we'll use the boxed Out back end that we just created. Then we'll select the default values for all the questions. And for the functions set up, we'll be using TypeScript. I'm going to say no to ES Lint for now and then I will say yes to installing the dependencies. When asked about the emulators, we will select Functions and Firestore.
software development
software
Press enter to select all the default ports and we'll select to enable the emulator UI. If you don't have the emulators downloaded, select yes to download the emulators and that should complete your Firebase functions set up. And if we open up this code now, you'll see a folder with another folder inside called functions And that is where the back end will be written. The files in the root folder describes the Firestore project And some of the overall rules in the Firestore project. Now that we've configured the basics of Firebase functions project, We can implement the back end system as described at the beginning. We'll start off by installing the package dedicated to using the system described earlier. It's called Firebase back end. We'll navigate into the functions folder and then we'll run npm install firebasedash back end. Then you can open up your index dot ts file in your source folder. You can delete all of the code in the file currently, then we'll import the function parser from the Firebase back end, then we can set the exports equal to a newly constructed Function parser that takes in the current directory name as well as the exports. This will be All the code you need in the index dot ts file regardless of how big your back end gets. And that's also all the setup we need before we can actually start writing any Let's start with something familiar. We'll create a restful endpoint on our back end. We'll start by creating a folder, the resource group, and we'll call that use this. Then in the folder, we'll create another folder called restful. And in that folder, we'll create a new file called add payment method dot endpoint dotts. For any endpoint, the file has to end in dot endpoint dotts. If it doesn't, then it won't be loaded as an HTTP endpoint on the back end. Then we'll start off in the file by importing request and response from press and we'll also import endpoint and request type from the Firebase backend. Then we will export a default new endpoint. The first value we'll pass in is the name of the endpoint. We'll pass in the add payment method string. The second parameter expects The type of endpoint that we are creating. We'll pass in request type dot post. And for the last parameter, We pass in the express endpoint handler which is will be the actual code that's executed when your endpoint is called.
This is a function that takes in A request as well as a response and what we'll write in this function is just some code to read the values sent in the request and then return that in a different format so we can know that it's working. We'll start by reading out the card number and the card holder from the request Body. We will create a new value called payment token that has these two values concatenated with an underscore in the middle. And then we'll return a response with a status 201 and we'll send back a map with a key token and we'll assign it the payment token.
programming
billing
banking
To make maintenance easy as the code base grows, remember the tip that I mentioned? Give your file name the same name as your function endpoint, that way when you are debugging an error in production, you know exactly which file to go to find your function. Now we can go ahead and test out this function. To test this out, we can simply run npm run serve. This will build the TypeScript code and then serve the functions locally through the emulator. If this command is successful. You should see the following in your console. As you can see, the API has be deployed under this URL which ends in users dash API. Each resource group that you create will have All the API endpoints under the resource group dash API. With this deployed, let's see if we can make a post to it and get the expected response. For this, I will be using Postman. We'll take the URL that the API has been deployed to and paste that in the Postman URL field.
We can add our actual endpoint name at the end of it slash add payment method. We'll change the request type to post and then for the body we will pass in payroll JSON blob. The first value will be card number. I'll give it a basic value of 1234567.
billing
And the second value will be card Underscore holder. And for the value, we'll pass in full stacks. When I execute this function now, we should get back a token That has the card number followed by underscore and then with the card holder at the end of it. And that's it. That's how we create an endpoint and that's how all endpoints going forward will be create it. Then you can stop your emulators from running and we'll move on to creating a reactive function. To demonstrate this, we'll add a function that will fire when a new user is created in the Firestore database. We'll create a new folder in the users folder called reactive and inside that folder will create a new file called on user created dot function dot d s. And as you can imagine, the part dot function dotts is very important. That's how we know which file to load as a reactive dev cloud function. We'll start off by importing the Firebase functions as functions. And then on the exports, we'll create A new function called on user created and we'll assign that to the on create function callback provided by a document from Firestore. To access that will index into functions. Go to Firestore, then supply the document pattern that we would like to listen to. In our case, we want to listen to the user's collection and check for any new user ID. And lastly, we want to listen to the on create function callback. This takes in a callback function that provides us with the user's snapshot as well as the context of this event trigger.
The data for this document can be retrieved by calling the data function on the user snapshot. To avoid getting off topic, we're simply going to log out some text that says that we have sent an email to the email value on the data from that document. To test out a reactive function you have to start all of the emulators.
email
data
documentation
So the NPM run surf function won't work because that only deploys the functions to the emulator. So to run this time, we'll first run npm run build and once that's complete, we'll run firebase emulators go on start. This will start up the functions as well as the Firestore emulator that we selected at the beginning. And then you'll see 2 URLs. One for the functions emulator and one for the Firestore emulator. In addition to that, we can see that we also now have a new function deployed called on user create it. We will go ahead and create an actual document in the user's collection and that function should fire on its own which is why it's called a reactive function. You can open up the Firestore emulator URL, then you can click on start collection. We'll give it a collection ID of use this. And for the field value, we know that we are expecting an email.
I'll be so kind to give you my actual email address in case you have any questions, which is dane@fullstax.com. If I click save and that document is created. When I open up the console, there should be logs saying that we've sent an email to this email address. It tells us that it begins the execution and then it sends the email. And that's it. You've created a reactive function as well as an HTTP c p endpoint.
email
Going further, when you want to expand your back end, you simply create a new file in the dedicated folder and it will add it automatically to your back end when you deploy.
There's one last thing I wanted to show you which is to improve the code setup. The way that the default TypeScript project is set up is not sufficient for consistent deployments and debugging. And because of that, we'll add some additional things into our project. We'll start by making sure that the old function code doesn't look around when we're testing any new changes.
software development
software
To fix that, we'll add a new package into The functions folder called rimraff. We'll run npm install dashd rimraff. This will install it as a development dependency. Then you can open up your package dot JSON file and we'll add 2 new scripts into the package dot JSON above the build script. We'll add a clean script which we'll call rim raf and pass in the lib directory. And then we'll add our second script which is called pre build, and this will call the clean script. The pre build will always run before build, which builds TypeScript, meaning the old code will be deleted before we build the new code. And then to deploy, we can run NPM run build. As you see, there will now be Three scripts that's being executed because of the 2 additional ones we added and then we'll run npm run deploy. This will only deploy the functions to your back end. When that deployment is complete, you'll see your API link printed out, and we can do the exact same test with Postman that we did Earlier. This is quite a new package and a way of developing a back end on Firebase for us, but it provides a clear path towards a large and maintainable fire base product.
If you want to see this being used in development, please check out my channel. We'll be doing back end and front end work on a product over the next Yeah. Thank you, Jeff, for having me on this awesome channel, and thank you to the contributors, Lou Ellen and Ruiz, that helped me get the packages ready for this tutorial. Thank you guys for watching, and I hope I see you over at the full stacks channel. Thanks for watching, and I will see you in the next one.
television
software development
streaming
Serverless computing. It's a misnomer used to describe servers in the cloud that requires zero configuration or maintenance from the developer. Imagine you need water for your house. You could spend a bunch of time and money digging a well, testing the water quality, and plumbing it to your house, or you could just tap into the city water supply and pay a monthly fee based on the amount of water that you use. Serverless computing is the same idea, but instead of water, we're talking about the amount of CPU and memory it takes to run your code. Services like AWS as Lambda, Google Cloud Functions, and Azure Functions allow you to run your back end code across their global data centers, then they mail you a bill at the end of the month that's factored down to the millisecond. The beauty of this approach is that your only concern is writing code. You don't have to pick an operating system, configure networking, patch improvements, support provision capacity to run at scale. The cloud handles all that for you behind the scenes. From an architectural standpoint, it allows you to develop and test each business permit independent of a bigger monolithic system. Not only do serverless functions make servers easier to manage, but they can also be executed based on different events that happen in the cloud, which can actually simplify your back end code. For example, you might create a new database record when a user places an order, which then triggers a serverless function to send an email confirmation, or maybe an IoT event on a home security system invokes a function that sends a push notification to the user's device. One of the easiest ways to get started with serverless is Firebase Cloud Functions. The command line tool will give us a project that looks like any other Node. Js back end. In the code, we can export named functions that are configured to run on different events that happen in Google Cloud. An event could be a simple HTTP request or a file upload, database write, analytics event, and so on. After writing our code, we can then deploy it to production with a single command, and we now have a reliable back end that is ready to scale. This has been serverless in 100 seconds. But if that sounded too good to be true, make sure to stay tuned because I've invited Dane from the Field Stacks YouTube channel to show us how to build a serverless back end for a big complex project. If you're building anything with Firebase or Flutter, you'll definitely want to follow his work. Hey there. My name is Dane, and I run a little YouTube channel called FullStacks That's focused on sharing the code that we use to build apps for our clients. Over on my channel, we are building a product called boxed out a set of software built for a company that wants to run a product or food delivery service. Building 1 cloud function is easy, but how do you structure dozens of functions to scale to real world demands? How do you ensure you have a structured and maintainable back end? How does a back end with only serverless functions look? Over the next 15 minutes, you'll learn how to build a serverless back end for non trivial apps. I like to start out by taking you through a high level overview of how the back end will be set up. This overview will go over the types of functions we use as well as the actual code structure. The back end is built around the strengths that Firebase possess in their serverless cloud functions setup. Focusing on those strengths, We can break the system into 2 types of functions. The 2 types of functions are restful and reactive. A reactive function is a function that will only run-in reaction to data or state that's being updated on the back end. An example of this will be when a file is uploaded to cloud storage or the most common, when a document or an entry in the database has been updated. A restful function is a traditional restful function which will run when a client makes an HTTP request to the URI that the function is assigned to. Now we can move on to the code structure. We have an enforced code structure that will help with the organization of the back end As well as the overall maintenance as it grows. There's 3 major things to go over. Number 1, each function will be in its own dedicated file. This is to get rid of the natural tendency when starting with Firebase Cloud Functions to keep adding functions into the same index file, forcing it to grow bigger as your back end requirements grow. And as a note, the file name will be the exact name of the endpoint or function to keep things easy to manage. This is not a requirement, but I found it to be quite useful. Number 2. Functions will be placed in a folder titled either restful or reactive. The number 3, the back end will be split into different resource groups to ensure a structured back end in production. As a quick example of this, we can look at the code structure below for the product delivery service back end. There are 3 resource groups, orders, payments, and users. And in each of those resource groups, we're very active and a restful folder. This is the only folder structure that you would need. The rest is handled by the fact that each of the files will be its own function. Now that you have a basic overview of the code set up, let's start with the actual implementation. We'll start by creating a new folder called boxed out. And inside that folder, create a new folder called back end. Then we can navigate into the back end folder and run Firebase in it. Then you have to select yes to proceed when presented with the functions to select, we'll choose Firestore, functions, and emulators. Then we'll choose to create a new project and we'll call out boxed out dash back end. We'll use that same name for the project name And then the Firestore setup usually fails on first try because you have to click on the get started button. Go to the URL that has been handed to you. You'll end up on the cloud Firestore page where you can click on create database. For now, we'll start in test mode. I'm going to select Europe West because I'm in Africa. And once that is complete, go back to your command line shell that you've been using, then we can run Firebase init again. We'll select Firestore functions and emulators and this time we'll use an existing project and we'll use the boxed Out back end that we just created. Then we'll select the default values for all the questions. And for the functions set up, we'll be using TypeScript. I'm going to say no to ES Lint for now and then I will say yes to installing the dependencies. When asked about the emulators, we will select Functions and Firestore. Press enter to select all the default ports and we'll select to enable the emulator UI. If you don't have the emulators downloaded, select yes to download the emulators and that should complete your Firebase functions set up. And if we open up this code now, you'll see a folder with another folder inside called functions And that is where the back end will be written. The files in the root folder describes the Firestore project And some of the overall rules in the Firestore project. Now that we've configured the basics of Firebase functions project, We can implement the back end system as described at the beginning. We'll start off by installing the package dedicated to using the system described earlier. It's called Firebase back end. We'll navigate into the functions folder and then we'll run npm install firebasedash back end. Then you can open up your index dot ts file in your source folder. You can delete all of the code in the file currently, then we'll import the function parser from the Firebase back end, then we can set the exports equal to a newly constructed Function parser that takes in the current directory name as well as the exports. This will be All the code you need in the index dot ts file regardless of how big your back end gets. And that's also all the setup we need before we can actually start writing any Let's start with something familiar. We'll create a restful endpoint on our back end. We'll start by creating a folder, the resource group, and we'll call that use this. Then in the folder, we'll create another folder called restful. And in that folder, we'll create a new file called add payment method dot endpoint dotts. For any endpoint, the file has to end in dot endpoint dotts. If it doesn't, then it won't be loaded as an HTTP endpoint on the back end. Then we'll start off in the file by importing request and response from press and we'll also import endpoint and request type from the Firebase backend. Then we will export a default new endpoint. The first value we'll pass in is the name of the endpoint. We'll pass in the add payment method string. The second parameter expects The type of endpoint that we are creating. We'll pass in request type dot post. And for the last parameter, We pass in the express endpoint handler which is will be the actual code that's executed when your endpoint is called. This is a function that takes in A request as well as a response and what we'll write in this function is just some code to read the values sent in the request and then return that in a different format so we can know that it's working. We'll start by reading out the card number and the card holder from the request Body. We will create a new value called payment token that has these two values concatenated with an underscore in the middle. And then we'll return a response with a status 201 and we'll send back a map with a key token and we'll assign it the payment token. To make maintenance easy as the code base grows, remember the tip that I mentioned? Give your file name the same name as your function endpoint, that way when you are debugging an error in production, you know exactly which file to go to find your function. Now we can go ahead and test out this function. To test this out, we can simply run npm run serve. This will build the TypeScript code and then serve the functions locally through the emulator. If this command is successful. You should see the following in your console. As you can see, the API has be deployed under this URL which ends in users dash API. Each resource group that you create will have All the API endpoints under the resource group dash API. With this deployed, let's see if we can make a post to it and get the expected response. For this, I will be using Postman. We'll take the URL that the API has been deployed to and paste that in the Postman URL field. We can add our actual endpoint name at the end of it slash add payment method. We'll change the request type to post and then for the body we will pass in payroll JSON blob. The first value will be card number. I'll give it a basic value of 1234567. And the second value will be card Underscore holder. And for the value, we'll pass in full stacks. When I execute this function now, we should get back a token That has the card number followed by underscore and then with the card holder at the end of it. And that's it. That's how we create an endpoint and that's how all endpoints going forward will be create it. Then you can stop your emulators from running and we'll move on to creating a reactive function. To demonstrate this, we'll add a function that will fire when a new user is created in the Firestore database. We'll create a new folder in the users folder called reactive and inside that folder will create a new file called on user created dot function dot d s. And as you can imagine, the part dot function dotts is very important. That's how we know which file to load as a reactive dev cloud function. We'll start off by importing the Firebase functions as functions. And then on the exports, we'll create A new function called on user created and we'll assign that to the on create function callback provided by a document from Firestore. To access that will index into functions. Go to Firestore, then supply the document pattern that we would like to listen to. In our case, we want to listen to the user's collection and check for any new user ID. And lastly, we want to listen to the on create function callback. This takes in a callback function that provides us with the user's snapshot as well as the context of this event trigger. The data for this document can be retrieved by calling the data function on the user snapshot. To avoid getting off topic, we're simply going to log out some text that says that we have sent an email to the email value on the data from that document. To test out a reactive function you have to start all of the emulators. So the NPM run surf function won't work because that only deploys the functions to the emulator. So to run this time, we'll first run npm run build and once that's complete, we'll run firebase emulators go on start. This will start up the functions as well as the Firestore emulator that we selected at the beginning. And then you'll see 2 URLs. One for the functions emulator and one for the Firestore emulator. In addition to that, we can see that we also now have a new function deployed called on user create it. We will go ahead and create an actual document in the user's collection and that function should fire on its own which is why it's called a reactive function. You can open up the Firestore emulator URL, then you can click on start collection. We'll give it a collection ID of use this. And for the field value, we know that we are expecting an email. I'll be so kind to give you my actual email address in case you have any questions, which is dane@fullstax.com. If I click save and that document is created. When I open up the console, there should be logs saying that we've sent an email to this email address. It tells us that it begins the execution and then it sends the email. And that's it. You've created a reactive function as well as an HTTP c p endpoint. Going further, when you want to expand your back end, you simply create a new file in the dedicated folder and it will add it automatically to your back end when you deploy. There's one last thing I wanted to show you which is to improve the code setup. The way that the default TypeScript project is set up is not sufficient for consistent deployments and debugging. And because of that, we'll add some additional things into our project. We'll start by making sure that the old function code doesn't look around when we're testing any new changes. To fix that, we'll add a new package into The functions folder called rimraff. We'll run npm install dashd rimraff. This will install it as a development dependency. Then you can open up your package dot JSON file and we'll add 2 new scripts into the package dot JSON above the build script. We'll add a clean script which we'll call rim raf and pass in the lib directory. And then we'll add our second script which is called pre build, and this will call the clean script. The pre build will always run before build, which builds TypeScript, meaning the old code will be deleted before we build the new code. And then to deploy, we can run NPM run build. As you see, there will now be Three scripts that's being executed because of the 2 additional ones we added and then we'll run npm run deploy. This will only deploy the functions to your back end. When that deployment is complete, you'll see your API link printed out, and we can do the exact same test with Postman that we did Earlier. This is quite a new package and a way of developing a back end on Firebase for us, but it provides a clear path towards a large and maintainable fire base product. If you want to see this being used in development, please check out my channel. We'll be doing back end and front end work on a product over the next Yeah. Thank you, Jeff, for having me on this awesome channel, and thank you to the contributors, Lou Ellen and Ruiz, that helped me get the packages ready for this tutorial. Thank you guys for watching, and I hope I see you over at the full stacks channel. Thanks for watching, and I will see you in the next one.
Serverless
serverless
computing.
computing
It's
it's
a
a
misnomer
misnomer
used
used
to
to
describe
describe
servers
servers
in
in
the
the
cloud
cloud
that
that
requires
requires
zero
zero
configuration
configuration
or
or
maintenance
maintenance
from
from
the
the
developer.
developer
Imagine
imagine
you
you
need
need
water
water
for
for
your
your
house.
house
You
you
could
could
spend
spend
a
a
bunch
bunch
of
of
time
time
and
and
money
money
digging
digging
a
a
well,
well
testing
testing
the
the
water
water
quality,
quality
and
and
plumbing
plumbing
it
it
to
to
your
your
house,
house
or
or
you
you
could
could
just
just
tap
tap
into
into
the
the
city
city
water
water
supply
supply
and
and
pay
pay
a
a
monthly
monthly
fee
fee
based
based
on
on
the
the
amount
amount
of
of
water
water
that
that
you
you
use.
use
Serverless
serverless
computing
computing
is
is
the
the
same
same
idea,
idea
but
but
instead
instead
of
of
water,
water
we're
we're
talking
talking
about
about
the
the
amount
amount
of
of
CPU
cpu
and
and
memory
memory
it
it
takes
takes
to
to
run
run
your
your
code.
code
Services
services
like
like
AWS
aws
as
as
Lambda,
lambda
Google
google
Cloud
cloud
Functions,
functions
and
and
Azure
azure
Functions
functions
allow
allow
you
you
to
to
run
run
your
your
back
back
end
end
code
code
across
across
their
their
global
global
data
data
centers,
centers
then
then
they
they
mail
mail
you
you
a
a
bill
bill
at
at
the
the
end
end
of
of
the
the
month
month
that's
that's
factored
factored
down
down
to
to
the
the
millisecond.
millisecond
The
the
beauty
beauty
of
of
this
this
approach
approach
is
is
that
that
your
your
only
only
concern
concern
is
is
writing
writing
code.
code
You
you
don't
don't
have
have
to
to
pick
pick
an
an
operating
operating
system,
system
configure
configure
networking,
networking
patch
patch
improvements,
improvements
support
support
provision
provision
capacity
capacity
to
to
run
run
at
at
scale.
scale
The
the
cloud
cloud
handles
handles
all
all
that
that
for
for
you
you
behind
behind
the
the
scenes.
scenes
From
from
an
an
architectural
architectural
standpoint,
standpoint
it
it
allows
allows
you
you
to
to
develop
develop
and
and
test
test
each
each
business
business
permit
permit
independent
independent
of
of
a
a
bigger
bigger
monolithic
monolithic
system.
system
Not
not
only
only
do
do
serverless
serverless
functions
functions
make
make
servers
servers
easier
easier
to
to
manage,
manage
but
but
they
they
can
can
also
also
be
be
executed
executed
based
based
on
on
different
different
events
events
that
that
happen
happen
in
in
the
the
cloud,
cloud
which
which
can
can
actually
actually
simplify
simplify
your
your
back
back
end
end
code.
code
For
for
example,
example
you
you
might
might
create
create
a
a
new
new
database
database
record
record
when
when
a
a
user
user
places
places
an
an
order,
order
which
which
then
then
triggers
triggers
a
a
serverless
serverless
function
function
to
to
send
send
an
an
email
email
confirmation,
confirmation
or
or
maybe
maybe
an
an
IoT
iot
event
event
on
on
a
a
home
home
security
security
system
system
invokes
invokes
a
a
function
function
that
that
sends
sends
a
a
push
push
notification
notification
to
to
the
the
user's
user's
device.
device
One
one
of
of
the
the
easiest
easiest
ways
ways
to
to
get
get
started
started
with
with
serverless
serverless
is
is
Firebase
firebase
Cloud
cloud
Functions.
functions
The
the
command
command
line
line
tool
tool
will
will
give
give
us
us
a
a
project
project
that
that
looks
looks
like
like
any
any
other
other
Node.
node
Js
js
back
back
end.
end
In
in
the
the
code,
code
we
we
can
can
export
export
named
named
functions
functions
that
that
are
are
configured
configured
to
to
run
run
on
on
different
different
events
events
that
that
happen
happen
in
in
Google
google
Cloud.
cloud
An
an
event
event
could
could
be
be
a
a
simple
simple
HTTP
http
request
request
or
or
a
a
file
file
upload,
upload
database
database
write,
write
analytics
analytics
event,
event
and
and
so
so
on.
on
After
after
writing
writing
our
our
code,
code
we
we
can
can
then
then
deploy
deploy
it
it
to
to
production
production
with
with
a
a
single
single
command,
command
and
and
we
we
now
now
have
have
a
a
reliable
reliable
back
back
end
end
that
that
is
is
ready
ready
to
to
scale.
scale
This
this
has
has
been
been
serverless
serverless
in
in
100
100
seconds.
seconds
But
but
if
if
that
that
sounded
sounded
too
too
good
good
to
to
be
be
true,
true
make
make
sure
sure
to
to
stay
stay
tuned
tuned
because
because
I've
i've
invited
invited
Dane
dane
from
from
the
the
Field
field
Stacks
stacks
YouTube
youtube
channel
channel
to
to
show
show
us
us
how
how
to
to
build
build
a
a
serverless
serverless
back
back
end
end
for
for
a
a
big
big
complex
complex
project.
project
If
if
you're
you're
building
building
anything
anything
with
with
Firebase
firebase
or
or
Flutter,
flutter
you'll
you'll
definitely
definitely
want
want
to
to
follow
follow
his
his
work.
work
Hey
hey
there.
there
My
my
name
name
is
is
Dane,
dane
and
and
I
i
run
run
a
a
little
little
YouTube
youtube
channel
channel
called
called
FullStacks
fullstacks
That's
that's
focused
focused
on
on
sharing
sharing
the
the
code
code
that
that
we
we
use
use
to
to
build
build
apps
apps
for
for
our
our
clients.
clients
Over
over
on
on
my
my
channel,
channel
we
we
are
are
building
building
a
a
product
product
called
called
boxed
boxed
out
out
a
a
set
set
of
of
software
software
built
built
for
for
a
a
company
company
that
that
wants
wants
to
to
run
run
a
a
product
product
or
or
food
food
delivery
delivery
service.
service
Building
building
1
1
cloud
cloud
function
function
is
is
easy,
easy
but
but
how
how
do
do
you
you
structure
structure
dozens
dozens
of
of
functions
functions
to
to
scale
scale
to
to
real
real
world
world
demands?
demands
How
how
do
do
you
you
ensure
ensure
you
you
have
have
a
a
structured
structured
and
and
maintainable
maintainable
back
back
end?
end
How
how
does
does
a
a
back
back
end
end
with
with
only
only
serverless
serverless
functions
functions
look?
look
Over
over
the
the
next
next
15
15
minutes,
minutes
you'll
you'll
learn
learn
how
how
to
to
build
build
a
a
serverless
serverless
back
back
end
end
for
for
non
non
trivial
trivial
apps.
apps
I
i
like
like
to
to
start
start
out
out
by
by
taking
taking
you
you
through
through
a
a
high
high
level
level
overview
overview
of
of
how
how
the
the
back
back
end
end
will
will
be
be
set
set
up.
up
This
this
overview
overview
will
will
go
go
over
over
the
the
types
types
of
of
functions
functions
we
we
use
use
as
as
well
well
as
as
the
the
actual
actual
code
code
structure.
structure
The
the
back
back
end
end
is
is
built
built
around
around
the
the
strengths
strengths
that
that
Firebase
firebase
possess
possess
in
in
their
their
serverless
serverless
cloud
cloud
functions
functions
setup.
setup
Focusing
focusing
on
on
those
those
strengths,
strengths
We
we
can
can
break
break
the
the
system
system
into
into
2
2
types
types
of
of
functions.
functions
The
the
2
2
types
types
of
of
functions
functions
are
are
restful
restful
and
and
reactive.
reactive
A
a
reactive
reactive
function
function
is
is
a
a
function
function
that
that
will
will
only
only
run-in
run-in
reaction
reaction
to
to
data
data
or
or
state
state
that's
that's
being
being
updated
updated
on
on
the
the
back
back
end.
end
An
an
example
example
of
of
this
this
will
will
be
be
when
when
a
a
file
file
is
is
uploaded
uploaded
to
to
cloud
cloud
storage
storage
or
or
the
the
most
most
common,
common
when
when
a
a
document
document
or
or
an
an
entry
entry
in
in
the
the
database
database
has
has
been
been
updated.
updated
A
a
restful
restful
function
function
is
is
a
a
traditional
traditional
restful
restful
function
function
which
which
will
will
run
run
when
when
a
a
client
client
makes
makes
an
an
HTTP
http
request
request
to
to
the
the
URI
uri
that
that
the
the
function
function
is
is
assigned
assigned
to.
to
Now
now
we
we
can
can
move
move
on
on
to
to
the
the
code
code
structure.
structure
We
we
have
have
an
an
enforced
enforced
code
code
structure
structure
that
that
will
will
help
help
with
with
the
the
organization
organization
of
of
the
the
back
back
end
end
As
as
well
well
as
as
the
the
overall
overall
maintenance
maintenance
as
as
it
it
grows.
grows
There's
there's
3
3
major
major
things
things
to
to
go
go
over.
over
Number
number
1,
1
each
each
function
function
will
will
be
be
in
in
its
its
own
own
dedicated
dedicated
file.
file
This
this
is
is
to
to
get
get
rid
rid
of
of
the
the
natural
natural
tendency
tendency
when
when
starting
starting
with
with
Firebase
firebase
Cloud
cloud
Functions
functions
to
to
keep
keep
adding
adding
functions
functions
into
into
the
the
same
same
index
index
file,
file
forcing
forcing
it
it
to
to
grow
grow
bigger
bigger
as
as
your
your
back
back
end
end
requirements
requirements
grow.
grow
And
and
as
as
a
a
note,
note
the
the
file
file
name
name
will
will
be
be
the
the
exact
exact
name
name
of
of
the
the
endpoint
endpoint
or
or
function
function
to
to
keep
keep
things
things
easy
easy
to
to
manage.
manage
This
this
is
is
not
not
a
a
requirement,
requirement
but
but
I
i
found
found
it
it
to
to
be
be
quite
quite
useful.
useful
Number
number
2.
2
Functions
functions
will
will
be
be
placed
placed
in
in
a
a
folder
folder
titled
titled
either
either
restful
restful
or
or
reactive.
reactive
The
the
number
number
3,
3
the
the
back
back
end
end
will
will
be
be
split
split
into
into
different
different
resource
resource
groups
groups
to
to
ensure
ensure
a
a
structured
structured
back
back
end
end
in
in
production.
production
As
as
a
a
quick
quick
example
example
of
of
this,
this
we
we
can
can
look
look
at
at
the
the
code
code
structure
structure
below
below
for
for
the
the
product
product
delivery
delivery
service
service
back
back
end.
end
There
there
are
are
3
3
resource
resource
groups,
groups
orders,
orders
payments,
payments
and
and
users.
users
And
and
in
in
each
each
of
of
those
those
resource
resource
groups,
groups
we're
we're
very
very
active
active
and
and
a
a
restful
restful
folder.
folder
This
this
is
is
the
the
only
only
folder
folder
structure
structure
that
that
you
you
would
would
need.
need
The
the
rest
rest
is
is
handled
handled
by
by
the
the
fact
fact
that
that
each
each
of
of
the
the
files
files
will
will
be
be
its
its
own
own
function.
function
Now
now
that
that
you
you
have
have
a
a
basic
basic
overview
overview
of
of
the
the
code
code
set
set
up,
up
let's
let's
start
start
with
with
the
the
actual
actual
implementation.
implementation
We'll
we'll
start
start
by
by
creating
creating
a
a
new
new
folder
folder
called
called
boxed
boxed
out.
out
And
and
inside
inside
that
that
folder,
folder
create
create
a
a
new
new
folder
folder
called
called
back
back
end.
end
Then
then
we
we
can
can
navigate
navigate
into
into
the
the
back
back
end
end
folder
folder
and
and
run
run
Firebase
firebase
in
in
it.
it
Then
then
you
you
have
have
to
to
select
select
yes
yes
to
to
proceed
proceed
when
when
presented
presented
with
with
the
the
functions
functions
to
to
select,
select
we'll
we'll
choose
choose
Firestore,
firestore
functions,
functions
and
and
emulators.
emulators
Then
then
we'll
we'll
choose
choose
to
to
create
create
a
a
new
new
project
project
and
and
we'll
we'll
call
call
out
out
boxed
boxed
out
out
dash
dash
back
back
end.
end
We'll
we'll
use
use
that
that
same
same
name
name
for
for
the
the
project
project
name
name
And
and
then
then
the
the
Firestore
firestore
setup
setup
usually
usually
fails
fails
on
on
first
first
try
try
because
because
you
you
have
have
to
to
click
click
on
on
the
the
get
get
started
started
button.
button
Go
go
to
to
the
the
URL
url
that
that
has
has
been
been
handed
handed
to
to
you.
you
You'll
you'll
end
end
up
up
on
on
the
the
cloud
cloud
Firestore
firestore
page
page
where
where
you
you
can
can
click
click
on
on
create
create
database.
database
For
for
now,
now
we'll
we'll
start
start
in
in
test
test
mode.
mode
I'm
i'm
going
going
to
to
select
select
Europe
europe
West
west
because
because
I'm
i'm
in
in
Africa.
africa
And
and
once
once
that
that
is
is
complete,
complete
go
go
back
back
to
to
your
your
command
command
line
line
shell
shell
that
that
you've
you've
been
been
using,
using
then
then
we
we
can
can
run
run
Firebase
firebase
init
init
again.
again
We'll
we'll
select
select
Firestore
firestore
functions
functions
and
and
emulators
emulators
and
and
this
this
time
time
we'll
we'll
use
use
an
an
existing
existing
project
project
and
and
we'll
we'll
use
use
the
the
boxed
boxed
Out
out
back
back
end
end
that
that
we
we
just
just
created.
created
Then
then
we'll
we'll
select
select
the
the
default
default
values
values
for
for
all
all
the
the
questions.
questions
And
and
for
for
the
the
functions
functions
set
set
up,
up
we'll
we'll
be
be
using
using
TypeScript.
typescript
I'm
i'm
going
going
to
to
say
say
no
no
to
to
ES
es
Lint
lint
for
for
now
now
and
and
then
then
I
i
will
will
say
say
yes
yes
to
to
installing
installing
the
the
dependencies.
dependencies
When
when
asked
asked
about
about
the
the
emulators,
emulators
we
we
will
will
select
select
Functions
functions
and
and
Firestore.
firestore
Press
press
enter
enter
to
to
select
select
all
all
the
the
default
default
ports
ports
and
and
we'll
we'll
select
select
to
to
enable
enable
the
the
emulator
emulator
UI.
ui
If
if
you
you
don't
don't
have
have
the
the
emulators
emulators
downloaded,
downloaded
select
select
yes
yes
to
to
download
download
the
the
emulators
emulators
and
and
that
that
should
should
complete
complete
your
your
Firebase
firebase
functions
functions
set
set
up.
up
And
and
if
if
we
we
open
open
up
up
this
this
code
code
now,
now
you'll
you'll
see
see
a
a
folder
folder
with
with
another
another
folder
folder
inside
inside
called
called
functions
functions
And
and
that
that
is
is
where
where
the
the
back
back
end
end
will
will
be
be
written.
written
The
the
files
files
in
in
the
the
root
root
folder
folder
describes
describes
the
the
Firestore
firestore
project
project
And
and
some
some
of
of
the
the
overall
overall
rules
rules
in
in
the
the
Firestore
firestore
project.
project
Now
now
that
that
we've
we've
configured
configured
the
the
basics
basics
of
of
Firebase
firebase
functions
functions
project,
project
We
we
can
can
implement
implement
the
the
back
back
end
end
system
system
as
as
described
described
at
at
the
the
beginning.
beginning
We'll
we'll
start
start
off
off
by
by
installing
installing
the
the
package
package
dedicated
dedicated
to
to
using
using
the
the
system
system
described
described
earlier.
earlier
It's
it's
called
called
Firebase
firebase
back
back
end.
end
We'll
we'll
navigate
navigate
into
into
the
the
functions
functions
folder
folder
and
and
then
then
we'll
we'll
run
run
npm
npm
install
install
firebasedash
firebasedash
back
back
end.
end
Then
then
you
you
can
can
open
open
up
up
your
your
index
index
dot
dot
ts
ts
file
file
in
in
your
your
source
source
folder.
folder
You
you
can
can
delete
delete
all
all
of
of
the
the
code
code
in
in
the
the
file
file
currently,
currently
then
then
we'll
we'll
import
import
the
the
function
function
parser
parser
from
from
the
the
Firebase
firebase
back
back
end,
end
then
then
we
we
can
can
set
set
the
the
exports
exports
equal
equal
to
to
a
a
newly
newly
constructed
constructed
Function
function
parser
parser
that
that
takes
takes
in
in
the
the
current
current
directory
directory
name
name
as
as
well
well
as
as
the
the
exports.
exports
This
this
will
will
be
be
All
all
the
the
code
code
you
you
need
need
in
in
the
the
index
index
dot
dot
ts
ts
file
file
regardless
regardless
of
of
how
how
big
big
your
your
back
back
end
end
gets.
gets
And
and
that's
that's
also
also
all
all
the
the
setup
setup
we
we
need
need
before
before
we
we
can
can
actually
actually
start
start
writing
writing
any
any
Let's
let's
start
start
with
with
something
something
familiar.
familiar
We'll
we'll
create
create
a
a
restful
restful
endpoint
endpoint
on
on
our
our
back
back
end.
end
We'll
we'll
start
start
by
by
creating
creating
a
a
folder,
folder
the
the
resource
resource
group,
group
and
and
we'll
we'll
call
call
that
that
use
use
this.
this
Then
then
in
in
the
the
folder,
folder
we'll
we'll
create
create
another
another
folder
folder
called
called
restful.
restful
And
and
in
in
that
that
folder,
folder
we'll
we'll
create
create
a
a
new
new
file
file
called
called
add
add
payment
payment
method
method
dot
dot
endpoint
endpoint
dotts.
dotts
For
for
any
any
endpoint,
endpoint
the
the
file
file
has
has
to
to
end
end
in
in
dot
dot
endpoint
endpoint
dotts.
dotts
If
if
it
it
doesn't,
doesn't
then
then
it
it
won't
won't
be
be
loaded
loaded
as
as
an
an
HTTP
http
endpoint
endpoint
on
on
the
the
back
back
end.
end
Then
then
we'll
we'll
start
start
off
off
in
in
the
the
file
file
by
by
importing
importing
request
request
and
and
response
response
from
from
press
press
and
and
we'll
we'll
also
also
import
import
endpoint
endpoint
and
and
request
request
type
type
from
from
the
the
Firebase
firebase
backend.
backend
Then
then
we
we
will
will
export
export
a
a
default
default
new
new
endpoint.
endpoint
The
the
first
first
value
value
we'll
we'll
pass
pass
in
in
is
is
the
the
name
name
of
of
the
the
endpoint.
endpoint
We'll
we'll
pass
pass
in
in
the
the
add
add
payment
payment
method
method
string.
string
The
the
second
second
parameter
parameter
expects
expects
The
the
type
type
of
of
endpoint
endpoint
that
that
we
we
are
are
creating.
creating
We'll
we'll
pass
pass
in
in
request
request
type
type
dot
dot
post.
post
And
and
for
for
the
the
last
last
parameter,
parameter
We
we
pass
pass
in
in
the
the
express
express
endpoint
endpoint
handler
handler
which
which
is
is
will
will
be
be
the
the
actual
actual
code
code
that's
that's
executed
executed
when
when
your
your
endpoint
endpoint
is
is
called.
called
This
this
is
is
a
a
function
function
that
that
takes
takes
in
in
A
a
request
request
as
as
well
well
as
as
a
a
response
response
and
and
what
what
we'll
we'll
write
write
in
in
this
this
function
function
is
is
just
just
some
some
code
code
to
to
read
read
the
the
values
values
sent
sent
in
in
the
the
request
request
and
and
then
then
return
return
that
that
in
in
a
a
different
different
format
format
so
so
we
we
can
can
know
know
that
that
it's
it's
working.
working
We'll
we'll
start
start
by
by
reading
reading
out
out
the
the
card
card
number
number
and
and
the
the
card
card
holder
holder
from
from
the
the
request
request
Body.
body
We
we
will
will
create
create
a
a
new
new
value
value
called
called
payment
payment
token
token
that
that
has
has
these
these
two
two
values
values
concatenated
concatenated
with
with
an
an
underscore
underscore
in
in
the
the
middle.
middle
And
and
then
then
we'll
we'll
return
return
a
a
response
response
with
with
a
a
status
status
201
201
and
and
we'll
we'll
send
send
back
back
a
a
map
map
with
with
a
a
key
key
token
token
and
and
we'll
we'll
assign
assign
it
it
the
the
payment
payment
token.
token
To
to
make
make
maintenance
maintenance
easy
easy
as
as
the
the
code
code
base
base
grows,
grows
remember
remember
the
the
tip
tip
that
that
I
i
mentioned?
mentioned
Give
give
your
your
file
file
name
name
the
the
same
same
name
name
as
as
your
your
function
function
endpoint,
endpoint
that
that
way
way
when
when
you
you
are
are
debugging
debugging
an
an
error
error
in
in
production,
production
you
you
know
know
exactly
exactly
which
which
file
file
to
to
go
go
to
to
find
find
your
your
function.
function
Now
now
we
we
can
can
go
go
ahead
ahead
and
and
test
test
out
out
this
this
function.
function
To
to
test
test
this
this
out,
out
we
we
can
can
simply
simply
run
run
npm
npm
run
run
serve.
serve
This
this
will
will
build
build
the
the
TypeScript
typescript
code
code
and
and
then
then
serve
serve
the
the
functions
functions
locally
locally
through
through
the
the
emulator.
emulator
If
if
this
this
command
command
is
is
successful.
successful
You
you
should
should
see
see
the
the
following
following
in
in
your
your
console.
console
As
as
you
you
can
can
see,
see
the
the
API
api
has
has
be
be
deployed
deployed
under
under
this
this
URL
url
which
which
ends
ends
in
in
users
users
dash
dash
API.
api
Each
each
resource
resource
group
group
that
that
you
you
create
create
will
will
have
have
All
all
the
the
API
api
endpoints
endpoints
under
under
the
the
resource
resource
group
group
dash
dash
API.
api
With
with
this
this
deployed,
deployed
let's
let's
see
see
if
if
we
we
can
can
make
make
a
a
post
post
to
to
it
it
and
and
get
get
the
the
expected
expected
response.
response
For
for
this,
this
I
i
will
will
be
be
using
using
Postman.
postman
We'll
we'll
take
take
the
the
URL
url
that
that
the
the
API
api
has
has
been
been
deployed
deployed
to
to
and
and
paste
paste
that
that
in
in
the
the
Postman
postman
URL
url
field.
field
We
we
can
can
add
add
our
our
actual
actual
endpoint
endpoint
name
name
at
at
the
the
end
end
of
of
it
it
slash
slash
add
add
payment
payment
method.
method
We'll
we'll
change
change
the
the
request
request
type
type
to
to
post
post
and
and
then
then
for
for
the
the
body
body
we
we
will
will
pass
pass
in
in
payroll
payroll
JSON
json
blob.
blob
The
the
first
first
value
value
will
will
be
be
card
card
number.
number
I'll
i'll
give
give
it
it
a
a
basic
basic
value
value
of
of
1234567.
1234567
And
and
the
the
second
second
value
value
will
will
be
be
card
card
Underscore
underscore
holder.
holder
And
and
for
for
the
the
value,
value
we'll
we'll
pass
pass
in
in
full
full
stacks.
stacks
When
when
I
i
execute
execute
this
this
function
function
now,
now
we
we
should
should
get
get
back
back
a
a
token
token
That
that
has
has
the
the
card
card
number
number
followed
followed
by
by
underscore
underscore
and
and
then
then
with
with
the
the
card
card
holder
holder
at
at
the
the
end
end
of
of
it.
it
And
and
that's
that's
it.
it
That's
that's
how
how
we
we
create
create
an
an
endpoint
endpoint
and
and
that's
that's
how
how
all
all
endpoints
endpoints
going
going
forward
forward
will
will
be
be
create
create
it.
it
Then
then
you
you
can
can
stop
stop
your
your
emulators
emulators
from
from
running
running
and
and
we'll
we'll
move
move
on
on
to
to
creating
creating
a
a
reactive
reactive
function.
function
To
to
demonstrate
demonstrate
this,
this
we'll
we'll
add
add
a
a
function
function
that
that
will
will
fire
fire
when
when
a
a
new
new
user
user
is
is
created
created
in
in
the
the
Firestore
firestore
database.
database
We'll
we'll
create
create
a
a
new
new
folder
folder
in
in
the
the
users
users
folder
folder
called
called
reactive
reactive
and
and
inside
inside
that
that
folder
folder
will
will
create
create
a
a
new
new
file
file
called
called
on
on
user
user
created
created
dot
dot
function
function
dot
dot
d
d
s.
s
And
and
as
as
you
you
can
can
imagine,
imagine
the
the
part
part
dot
dot
function
function
dotts
dotts
is
is
very
very
important.
important
That's
that's
how
how
we
we
know
know
which
which
file
file
to
to
load
load
as
as
a
a
reactive
reactive
dev
dev
cloud
cloud
function.
function
We'll
we'll
start
start
off
off
by
by
importing
importing
the
the
Firebase
firebase
functions
functions
as
as
functions.
functions
And
and
then
then
on
on
the
the
exports,
exports
we'll
we'll
create
create
A
a
new
new
function
function
called
called
on
on
user
user
created
created
and
and
we'll
we'll
assign
assign
that
that
to
to
the
the
on
on
create
create
function
function
callback
callback
provided
provided
by
by
a
a
document
document
from
from
Firestore.
firestore
To
to
access
access
that
that
will
will
index
index
into
into
functions.
functions
Go
go
to
to
Firestore,
firestore
then
then
supply
supply
the
the
document
document
pattern
pattern
that
that
we
we
would
would
like
like
to
to
listen
listen
to.
to
In
in
our
our
case,
case
we
we
want
want
to
to
listen
listen
to
to
the
the
user's
user's
collection
collection
and
and
check
check
for
for
any
any
new
new
user
user
ID.
id
And
and
lastly,
lastly
we
we
want
want
to
to
listen
listen
to
to
the
the
on
on
create
create
function
function
callback.
callback
This
this
takes
takes
in
in
a
a
callback
callback
function
function
that
that
provides
provides
us
us
with
with
the
the
user's
user's
snapshot
snapshot
as
as
well
well
as
as
the
the
context
context
of
of
this
this
event
event
trigger.
trigger
The
the
data
data
for
for
this
this
document
document
can
can
be
be
retrieved
retrieved
by
by
calling
calling
the
the
data
data
function
function
on
on
the
the
user
user
snapshot.
snapshot
To
to
avoid
avoid
getting
getting
off
off
topic,
topic
we're
we're
simply
simply
going
going
to
to
log
log
out
out
some
some
text
text
that
that
says
says
that
that
we
we
have
have
sent
sent
an
an
email
email
to
to
the
the
email
email
value
value
on
on
the
the
data
data
from
from
that
that
document.
document
To
to
test
test
out
out
a
a
reactive
reactive
function
function
you
you
have
have
to
to
start
start
all
all
of
of
the
the
emulators.
emulators
So
so
the
the
NPM
npm
run
run
surf
surf
function
function
won't
won't
work
work
because
because
that
that
only
only
deploys
deploys
the
the
functions
functions
to
to
the
the
emulator.
emulator
So
so
to
to
run
run
this
this
time,
time
we'll
we'll
first
first
run
run
npm
npm
run
run
build
build
and
and
once
once
that's
that's
complete,
complete
we'll
we'll
run
run
firebase
firebase
emulators
emulators
go
go
on
on
start.
start
This
this
will
will
start
start
up
up
the
the
functions
functions
as
as
well
well
as
as
the
the
Firestore
firestore
emulator
emulator
that
that
we
we
selected
selected
at
at
the
the
beginning.
beginning
And
and
then
then
you'll
you'll
see
see
2
2
URLs.
urls
One
one
for
for
the
the
functions
functions
emulator
emulator
and
and
one
one
for
for
the
the
Firestore
firestore
emulator.
emulator
In
in
addition
addition
to
to
that,
that
we
we
can
can
see
see
that
that
we
we
also
also
now
now
have
have
a
a
new
new
function
function
deployed
deployed
called
called
on
on
user
user
create
create
it.
it
We
we
will
will
go
go
ahead
ahead
and
and
create
create
an
an
actual
actual
document
document
in
in
the
the
user's
user's
collection
collection
and
and
that
that
function
function
should
should
fire
fire
on
on
its
its
own
own
which
which
is
is
why
why
it's
it's
called
called
a
a
reactive
reactive
function.
function
You
you
can
can
open
open
up
up
the
the
Firestore
firestore
emulator
emulator
URL,
url
then
then
you
you
can
can
click
click
on
on
start
start
collection.
collection
We'll
we'll
give
give
it
it
a
a
collection
collection
ID
id
of
of
use
use
this.
this
And
and
for
for
the
the
field
field
value,
value
we
we
know
know
that
that
we
we
are
are
expecting
expecting
an
an
email.
email
I'll
i'll
be
be
so
so
kind
kind
to
to
give
give
you
you
my
my
actual
actual
email
email
address
address
in
in
case
case
you
you
have
have
any
any
questions,
questions
which
which
is
is
dane@fullstax.com.
dane@fullstax.com
If
if
I
i
click
click
save
save
and
and
that
that
document
document
is
is
created.
created
When
when
I
i
open
open
up
up
the
the
console,
console
there
there
should
should
be
be
logs
logs
saying
saying
that
that
we've
we've
sent
sent
an
an
email
email
to
to
this
this
email
email
address.
address
It
it
tells
tells
us
us
that
that
it
it
begins
begins
the
the
execution
execution
and
and
then
then
it
it
sends
sends
the
the
email.
email
And
and
that's
that's
it.
it
You've
you've
created
created
a
a
reactive
reactive
function
function
as
as
well
well
as
as
an
an
HTTP
http
c
c
p
p
endpoint.
endpoint
Going
going
further,
further
when
when
you
you
want
want
to
to
expand
expand
your
your
back
back
end,
end
you
you
simply
simply
create
create
a
a
new
new
file
file
in
in
the
the
dedicated
dedicated
folder
folder
and
and
it
it
will
will
add
add
it
it
automatically
automatically
to
to
your
your
back
back
end
end
when
when
you
you
deploy.
deploy
There's
there's
one
one
last
last
thing
thing
I
i
wanted
wanted
to
to
show
show
you
you
which
which
is
is
to
to
improve
improve
the
the
code
code
setup.
setup
The
the
way
way
that
that
the
the
default
default
TypeScript
typescript
project
project
is
is
set
set
up
up
is
is
not
not
sufficient
sufficient
for
for
consistent
consistent
deployments
deployments
and
and
debugging.
debugging
And
and
because
because
of
of
that,
that
we'll
we'll
add
add
some
some
additional
additional
things
things
into
into
our
our
project.
project
We'll
we'll
start
start
by
by
making
making
sure
sure
that
that
the
the
old
old
function
function
code
code
doesn't
doesn't
look
look
around
around
when
when
we're
we're
testing
testing
any
any
new
new
changes.
changes
To
to
fix
fix
that,
that
we'll
we'll
add
add
a
a
new
new
package
package
into
into
The
the
functions
functions
folder
folder
called
called
rimraff.
rimraff
We'll
we'll
run
run
npm
npm
install
install
dashd
dashd
rimraff.
rimraff
This
this
will
will
install
install
it
it
as
as
a
a
development
development
dependency.
dependency
Then
then
you
you
can
can
open
open
up
up
your
your
package
package
dot
dot
JSON
json
file
file
and
and
we'll
we'll
add
add
2
2
new
new
scripts
scripts
into
into
the
the
package
package
dot
dot
JSON
json
above
above
the
the
build
build
script.
script
We'll
we'll
add
add
a
a
clean
clean
script
script
which
which
we'll
we'll
call
call
rim
rim
raf
raf
and
and
pass
pass
in
in
the
the
lib
lib
directory.
directory
And
and
then
then
we'll
we'll
add
add
our
our
second
second
script
script
which
which
is
is
called
called
pre
pre
build,
build
and
and
this
this
will
will
call
call
the
the
clean
clean
script.
script
The
the
pre
pre
build
build
will
will
always
always
run
run
before
before
build,
build
which
which
builds
builds
TypeScript,
typescript
meaning
meaning
the
the
old
old
code
code
will
will
be
be
deleted
deleted
before
before
we
we
build
build
the
the
new
new
code.
code
And
and
then
then
to
to
deploy,
deploy
we
we
can
can
run
run
NPM
npm
run
run
build.
build
As
as
you
you
see,
see
there
there
will
will
now
now
be
be
Three
three
scripts
scripts
that's
that's
being
being
executed
executed
because
because
of
of
the
the
2
2
additional
additional
ones
ones
we
we
added
added
and
and
then
then
we'll
we'll
run
run
npm
npm
run
run
deploy.
deploy
This
this
will
will
only
only
deploy
deploy
the
the
functions
functions
to
to
your
your
back
back
end.
end
When
when
that
that
deployment
deployment
is
is
complete,
complete
you'll
you'll
see
see
your
your
API
api
link
link
printed
printed
out,
out
and
and
we
we
can
can
do
do
the
the
exact
exact
same
same
test
test
with
with
Postman
postman
that
that
we
we
did
did
Earlier.
earlier
This
this
is
is
quite
quite
a
a
new
new
package
package
and
and
a
a
way
way
of
of
developing
developing
a
a
back
back
end
end
on
on
Firebase
firebase
for
for
us,
us
but
but
it
it
provides
provides
a
a
clear
clear
path
path
towards
towards
a
a
large
large
and
and
maintainable
maintainable
fire
fire
base
base
product.
product
If
if
you
you
want
want
to
to
see
see
this
this
being
being
used
used
in
in
development,
development
please
please
check
check
out
out
my
my
channel.
channel
We'll
we'll
be
be
doing
doing
back
back
end
end
and
and
front
front
end
end
work
work
on
on
a
a
product
product
over
over
the
the
next
next
Yeah.
yeah
Thank
thank
you,
you
Jeff,
jeff
for
for
having
having
me
me
on
on
this
this
awesome
awesome
channel,
channel
and
and
thank
thank
you
you
to
to
the
the
contributors,
contributors
Lou
lou
Ellen
ellen
and
and
Ruiz,
ruiz
that
that
helped
helped
me
me
get
get
the
the
packages
packages
ready
ready
for
for
this
this
tutorial.
tutorial
Thank
thank
you
you
guys
guys
for
for
watching,
watching
and
and
I
i
hope
hope
I
i
see
see
you
you
over
over
at
at
the
the
full
full
stacks
stacks
channel.
channel
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
In this conversation, the speakers discuss serverless computing and how it can manage and run code without the need for a structured back end. They also provide instructions on setting up the code structure and import necessary files, and demonstrate how to create a new project and run code. The back end is explained, along with the use of a serverless back end and front-end work on a product. The speakers thank the audience for their time and mention that they will be doing back-end and front-end work on a product soon.
Serverless Computing in 100 Seconds
Serverless computing. It's a misnomer used to describe servers in the cloud that requires zero configuration or maintenance from the developer. Imagine you need water for your house. You could spend a bunch of time and money digging a well, testing the water quality, and plumbing it to your house, or you could just tap into the city water supply and pay a monthly fee based on the amount of water that you use. Serverless computing is the same idea, but instead of water, we're talking about the amount of CPU and memory it takes to run your code. Services like AWS as Lambda, Google Cloud Functions, and Azure Functions allow you to run your back end code across their global data centers, then they mail you a bill at the end of the month that's factored down to the millisecond. The beauty of this approach is that your only concern is writing code. You don't have to pick an operating system, configure networking, patch improvements, support provision capacity to run at scale. The cloud handles all that for you behind the scenes. From an architectural standpoint, it allows you to develop and test each business permit independent of a bigger monolithic system. Not only do serverless functions make servers easier to manage, but they can also be executed based on different events that happen in the cloud, which can actually simplify your back end code. For example, you might create a new database record when a user places an order, which then triggers a serverless function to send an email confirmation, or maybe an IoT event on a home security system invokes a function that sends a push notification to the user's device. One of the easiest ways to get started with serverless is Firebase Cloud Functions. The command line tool will give us a project that looks like any other Node. Js back end. In the code, we can export named functions that are configured to run on different events that happen in Google Cloud. An event could be a simple HTTP request or a file upload, database write, analytics event, and so on. After writing our code, we can then deploy it to production with a single command, and we now have a reliable back end that is ready to scale. This has been serverless in 100 seconds. But if that sounded too good to be true, make sure to stay tuned because I've invited Dane from the Field Stacks YouTube channel to show us how to build a serverless back end for a big complex project. If you're building anything with Firebase or Flutter, you'll definitely want to follow his work. Hey there. My name is Dane, and I run a little YouTube channel called FullStacks That's focused on sharing the code that we use to build apps for our clients. Over on my channel, we are building a product called boxed out a set of software built for a company that wants to run a product or food delivery service. Building 1 cloud function is easy, but how do you structure dozens of functions to scale to real world demands? How do you ensure you have a structured and maintainable back end? How does a back end with only serverless functions look? Over the next 15 minutes, you'll learn how to build a serverless back end for non trivial apps. I like to start out by taking you through a high level overview of how the back end will be set up. This overview will go over the types of functions we use as well as the actual code structure. The back end is built around the strengths that Firebase possess in their serverless cloud functions setup. Focusing on those strengths, We can break the system into 2 types of functions. The 2 types of functions are restful and reactive. A reactive function is a function that will only run-in reaction to data or state that's being updated on the back end. An example of this will be when a file is uploaded to cloud storage or the most common, when a document or an entry in the database has been updated. A restful function is a traditional restful function which will run when a client makes an HTTP request to the URI that the function is assigned to. Now we can move on to the code structure. We have an enforced code structure that will help with the organization of the back end As well as the overall maintenance as it grows. There's 3 major things to go over. Number 1, each function will be in its own dedicated file. This is to get rid of the natural tendency when starting with Firebase Cloud Functions to keep adding functions into the same index file, forcing it to grow bigger as your back end requirements grow. And as a note, the file name will be the exact name of the endpoint or function to keep things easy to manage. This is not a requirement, but I found it to be quite useful. Number 2. Functions will be placed in a folder titled either restful or reactive. The number 3, the back end will be split into different resource groups to ensure a structured back end in production. As a quick example of this, we can look at the code structure below for the product delivery service back end. There are 3 resource groups, orders, payments, and users. And in each of those resource groups, we're very active and a restful folder. This is the only folder structure that you would need. The rest is handled by the fact that each of the files will be its own function. Now that you have a basic overview of the code set up, let's start with the actual implementation. We'll start by creating a new folder called boxed out. And inside that folder, create a new folder called back end. Then we can navigate into the back end folder and run Firebase in it. Then you have to select yes to proceed when presented with the functions to select, we'll choose Firestore, functions, and emulators. Then we'll choose to create a new project and we'll call out boxed out dash back end. We'll use that same name for the project name And then the Firestore setup usually fails on first try because you have to click on the get started button. Go to the URL that has been handed to you. You'll end up on the cloud Firestore page where you can click on create database. For now, we'll start in test mode. I'm going to select Europe West because I'm in Africa. And once that is complete, go back to your command line shell that you've been using, then we can run Firebase init again. We'll select Firestore functions and emulators and this time we'll use an existing project and we'll use the boxed Out back end that we just created. Then we'll select the default values for all the questions. And for the functions set up, we'll be using TypeScript. I'm going to say no to ES Lint for now and then I will say yes to installing the dependencies. When asked about the emulators, we will select Functions and Firestore. Press enter to select all the default ports and we'll select to enable the emulator UI. If you don't have the emulators downloaded, select yes to download the emulators and that should complete your Firebase functions set up. And if we open up this code now, you'll see a folder with another folder inside called functions And that is where the back end will be written. The files in the root folder describes the Firestore project And some of the overall rules in the Firestore project. Now that we've configured the basics of Firebase functions project, We can implement the back end system as described at the beginning. We'll start off by installing the package dedicated to using the system described earlier. It's called Firebase back end. We'll navigate into the functions folder and then we'll run npm install firebasedash back end. Then you can open up your index dot ts file in your source folder. You can delete all of the code in the file currently, then we'll import the function parser from the Firebase back end, then we can set the exports equal to a newly constructed Function parser that takes in the current directory name as well as the exports. This will be All the code you need in the index dot ts file regardless of how big your back end gets. And that's also all the setup we need before we can actually start writing any Let's start with something familiar. We'll create a restful endpoint on our back end. We'll start by creating a folder, the resource group, and we'll call that use this. Then in the folder, we'll create another folder called restful. And in that folder, we'll create a new file called add payment method dot endpoint dotts. For any endpoint, the file has to end in dot endpoint dotts. If it doesn't, then it won't be loaded as an HTTP endpoint on the back end. Then we'll start off in the file by importing request and response from press and we'll also import endpoint and request type from the Firebase backend. Then we will export a default new endpoint. The first value we'll pass in is the name of the endpoint. We'll pass in the add payment method string. The second parameter expects The type of endpoint that we are creating. We'll pass in request type dot post. And for the last parameter, We pass in the express endpoint handler which is will be the actual code that's executed when your endpoint is called. This is a function that takes in A request as well as a response and what we'll write in this function is just some code to read the values sent in the request and then return that in a different format so we can know that it's working. We'll start by reading out the card number and the card holder from the request Body. We will create a new value called payment token that has these two values concatenated with an underscore in the middle. And then we'll return a response with a status 201 and we'll send back a map with a key token and we'll assign it the payment token. To make maintenance easy as the code base grows, remember the tip that I mentioned? Give your file name the same name as your function endpoint, that way when you are debugging an error in production, you know exactly which file to go to find your function. Now we can go ahead and test out this function. To test this out, we can simply run npm run serve. This will build the TypeScript code and then serve the functions locally through the emulator. If this command is successful. You should see the following in your console. As you can see, the API has be deployed under this URL which ends in users dash API. Each resource group that you create will have All the API endpoints under the resource group dash API. With this deployed, let's see if we can make a post to it and get the expected response. For this, I will be using Postman. We'll take the URL that the API has been deployed to and paste that in the Postman URL field. We can add our actual endpoint name at the end of it slash add payment method. We'll change the request type to post and then for the body we will pass in payroll JSON blob. The first value will be card number. I'll give it a basic value of 1234567. And the second value will be card Underscore holder. And for the value, we'll pass in full stacks. When I execute this function now, we should get back a token That has the card number followed by underscore and then with the card holder at the end of it. And that's it. That's how we create an endpoint and that's how all endpoints going forward will be create it. Then you can stop your emulators from running and we'll move on to creating a reactive function. To demonstrate this, we'll add a function that will fire when a new user is created in the Firestore database. We'll create a new folder in the users folder called reactive and inside that folder will create a new file called on user created dot function dot d s. And as you can imagine, the part dot function dotts is very important. That's how we know which file to load as a reactive dev cloud function. We'll start off by importing the Firebase functions as functions. And then on the exports, we'll create A new function called on user created and we'll assign that to the on create function callback provided by a document from Firestore. To access that will index into functions. Go to Firestore, then supply the document pattern that we would like to listen to. In our case, we want to listen to the user's collection and check for any new user ID. And lastly, we want to listen to the on create function callback. This takes in a callback function that provides us with the user's snapshot as well as the context of this event trigger. The data for this document can be retrieved by calling the data function on the user snapshot. To avoid getting off topic, we're simply going to log out some text that says that we have sent an email to the email value on the data from that document. To test out a reactive function you have to start all of the emulators. So the NPM run surf function won't work because that only deploys the functions to the emulator. So to run this time, we'll first run npm run build and once that's complete, we'll run firebase emulators go on start. This will start up the functions as well as the Firestore emulator that we selected at the beginning. And then you'll see 2 URLs. One for the functions emulator and one for the Firestore emulator. In addition to that, we can see that we also now have a new function deployed called on user create it. We will go ahead and create an actual document in the user's collection and that function should fire on its own which is why it's called a reactive function. You can open up the Firestore emulator URL, then you can click on start collection. We'll give it a collection ID of use this. And for the field value, we know that we are expecting an email. I'll be so kind to give you my actual email address in case you have any questions, which is dane@fullstax.com. If I click save and that document is created. When I open up the console, there should be logs saying that we've sent an email to this email address. It tells us that it begins the execution and then it sends the email. And that's it. You've created a reactive function as well as an HTTP c p endpoint. Going further, when you want to expand your back end, you simply create a new file in the dedicated folder and it will add it automatically to your back end when you deploy. There's one last thing I wanted to show you which is to improve the code setup. The way that the default TypeScript project is set up is not sufficient for consistent deployments and debugging. And because of that, we'll add some additional things into our project. We'll start by making sure that the old function code doesn't look around when we're testing any new changes. To fix that, we'll add a new package into The functions folder called rimraff. We'll run npm install dashd rimraff. This will install it as a development dependency. Then you can open up your package dot JSON file and we'll add 2 new scripts into the package dot JSON above the build script. We'll add a clean script which we'll call rim raf and pass in the lib directory. And then we'll add our second script which is called pre build, and this will call the clean script. The pre build will always run before build, which builds TypeScript, meaning the old code will be deleted before we build the new code. And then to deploy, we can run NPM run build. As you see, there will now be Three scripts that's being executed because of the 2 additional ones we added and then we'll run npm run deploy. This will only deploy the functions to your back end. When that deployment is complete, you'll see your API link printed out, and we can do the exact same test with Postman that we did Earlier. This is quite a new package and a way of developing a back end on Firebase for us, but it provides a clear path towards a large and maintainable fire base product. If you want to see this being used in development, please check out my channel. We'll be doing back end and front end work on a product over the next Yeah. Thank you, Jeff, for having me on this awesome channel, and thank you to the contributors, Lou Ellen and Ruiz, that helped me get the packages ready for this tutorial. Thank you guys for watching, and I hope I see you over at the full stacks channel. Thanks for watching, and I will see you in the next one.
In this conversation, the speakers discuss serverless computing and how it can manage and run code without the need for a structured back end. They also provide instructions on setting up the code structure and import necessary files, and demonstrate how to create a new project and run code. The back end is explained, along with the use of a serverless back end and front-end work on a product. The speakers thank the audience for their time and mention that they will be doing back-end and front-end work on a product soon.