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 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 or 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 requirement 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 backend 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 backend 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 backend 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 filled stacks youtube channel to show us how to build a serverless backend 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 falstax 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 one 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 backend how does a back-end with only serverless functions look over the next 15 minutes you'll learn how to build a serverless backend for non-trivial apps i'd 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 backend is bold around the strings that firebase possess in the serverless cloud functions setup focusing on those strings we can break the system into two types of functions the two 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 organization of the backend as well as the overall maintenance as it grows there's three major things to go over number one 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 backend 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 two functions will be placed in a folder titled either restful or reactive number three the backend will be split into different resource groups to ensure a structured backend in production as a quick example of this we can look at the code structure below for the product delivery service backend there are three resource groups orders payments and users and in each of those resource groups we are 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 setup 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 backend then we can navigate into the backend folder and run firebase init 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 backend 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 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 backend that we just created then we'll select the default values for all the questions and for the functions setup will be using typescript i'm going to say no to eslint 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 setup and if we open up this code now you'll see a folder with another folder inside called functions and that is where the 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 backend 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 backend we'll navigate into the functions folder and then we'll run npm install firebase dash backend then you can open up your index.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 backend 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 your index.ts file regardless of how big your backend gets and that's also all the setup we need before we can actually start writing any functions let's start with something familiar we'll create a restful endpoint on our backend we'll start by creating a folder the resource group and we'll call that users then in the folder we'll create another folder called restful and in that folder we'll create a new file called add paymentmethod.endpoint.ts for any endpoint the file has to end in dot endpoint dot ts if it doesn't then it won't be loaded as an http endpoint on the backend then we'll start off in the file by importing request and response from express and will also import endpoint and request type from the firebase backend then we will export a default new endpoint the first value will 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 then we'll 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 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 been 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 jason blob the first value will be card number i'll give it a basic value of one two three four five six seven 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 a 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 created then you can stop your emulators from running and will 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 usercreated.function.ts and as you can imagine the part.function.ts is very important that's how we know which file to load as a reactive 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 oncreate function callback provided by a document from firestore to access that we'll 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 users collection and check for any new user id and lastly we want to listen to the oncreate 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 the document to test out a reactive function you have to start all of the emulators so the npm run sir function won't work because that only deploys the functions to the emulator so to run this time we'll first run npm run bold and once that's complete we'll run firebase emulators colon start this will start up the functions as well as the firestore emulator that we selected at the beginning and then you'll see two 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 created we will go ahead and create an actual document in the users 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 users 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 at faultstacks.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 endpoint going further when you want to expand your backend you simply create a new file in the dedicated folder and it will be added automatically to your backend when you deploy this 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 lurk around when we're testing any new changes to fix that we'll add a new package into the functions folder called remraf we'll run npm install d remraf this will install it as a development dependency then you can open up your package.json file and we'll add two new scripts into the package.json above the bold script we'll add a clean script which we'll call rimref 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 pulls our 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 two additional ones we added and then we'll run npm run deploy this will only deploy the functions to your backend when the 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 firebase product if you want to see this being used in development please check out my channel where i'll be doing backend and front-end work on a product over the next year thank you jeff for having me on this awesome channel and thank you to the contributors lou allen android 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

Channel: Fireship

Views: 123,761

Rating: 4.950593 out of 5

Keywords: webdev, app development, lesson, tutorial, firebase, cloud functions, aws, google cloud, azure, aws lambda, serverless, cloud computing

Id: W_VV2Fx32_Y

Length: 16min 46sec (1006 seconds)

Published: Wed Mar 17 2021