Firebase Functions Tutorial #4 - Creating & Deploying a Function
Skills:
AI Workflow Automation80%
Key Takeaways
Creates and deploys a cloud function to Firebase servers using Firebase Functions
Full Transcript
all right and so we know that firebase functions live on the cloud on firebase service and then we can use those functions to run server-side code in our app or website now there's several different types of cloud functions that we can create an air triggered in different ways so maybe by database events or authentication events or storage events or analytic events etc so for example we could create some kind of cloud function that is triggered only when a new user signs up so our cloud function could be listening for that event and then only run when that happens or we could create a function which is triggered by a new record added to the database and that function will only run when that database event occurs right so these things are all called triggers and specifically these type of triggers our background triggers because they are events that occur in the background of your app or website right now we can also call functions directly and that can be done either via an HTTP endpoint much like an API endpoint or via a programmatic call directly from our code now these are both known as HTTP triggers and they're both used to directly invoke a firebase function now in this tutorial I'll show you how to setup an HTTP function which we can trigger via an endpoint directly in the browser and in the next lesson I'll also show you how to create a callable function - from our code and we'll look at the other type of functions or the other type of triggers background triggers later on in the series okay then so the first step when we're creating a function is to create the function locally in our editor and then we take the functions file and we deploy that to firebase so that then they sit on firebase servers and we can invoke them so if we take a look inside our functions folder this is where all of our functions are going to live now first of all we have for the node modules folder that's all the stuff we installed at the start that we need for functions to work okay and if we have other node modules they can be installed into this directory as well now we also have a gig nor we have the lint file we have this file right here which is indexed is and this is where we create our functions right here now remember this is going to be in a node.js environment so when this gets deployed to firebase servers they're running in that node environment so the first thing we do inside this file is require a module and that module is firebase functions and we store that inside this constant right here and whenever we want to create a cloud function we're going to need to use this functions constant right here now they've given us an example right here but I'm gonna delete that and create my own from scratch so I'm gonna do a comment to say HTTP request one so remember this is an endpoint request kind of function that we're creating and to do that we're gonna say exports first of all because we're going to export this and we're gonna give this function a name I'm gonna call this a random number you can call it what you want but this function that I'm gonna create is going to return some kind of random number to the browser so that is set equal to functions which is the thing we required at the top and then we say what type of function we want to create well we're creating an HTTP function and remember there was two tag to those there was the callable one and the other one which is a request an endpoint request so we say dots on request to make one of those okay so we use this method and this method takes as an argument a function and this function will fire whenever we make a request to this function okay so inside here I'm going to open up a function like so now this callback function right here also takes in a couple of arguments and they are the request and the response arguments now if you've ever used nodejs and express this looks an awful lot like that where we get these two objects and this contains information about the request be made and this is an object which represents the response that we send to the browser okay so the first thing I'm going to do in here is just create a new constants so Const number and I'm going to set that equal to math dot round and inside here math dot random and we're going to times that by 100 so this is gonna get us a random number basically between you know 0 and 100 so that's going to be stored then in this constant so I'd like to then return that to the user and I'll do that by saying response and that's the response object we get access to right here and we use a method on that called send and this is what we're going to send back to the user well I'm going to send back the number but I also want to pass this into a string so that it can be understood by the browser so I'll say dot - string like so so what are we doing here well we're creating a function now called a random number and that is going to be a request function so basically it's going to generate some kind of URL or endpoint for us and when we go to that it's gonna fire this function right here this function creates a random number and it uses the response object to send a response back to the client back to the browser and that is the number in string format so we have this function now what if we want to deploy this function how do we do that well first of all save the file and then down in your terminal I need a new terminal because this one is currently running the firebase server the local dev server so I'm going to come down here and press the plus icon to do that and in here I'm going to say firebase deploy and then double dash only functions and by doing on Lake functions that means we're only deploying the functions to firebase at the minute we're not deploying the website and everything inside the public folder and we're not deploying the firestore rules or anything else just the functions right here so if you press Enter that's going to deploy these for you and especially the first time you do this it could take a minute or two to run through all of this before it deploys it so now that's done I'm gonna go over here to my firebase project console and I'm gonna go to the functions tab and now we've deployed that function it should be listed right here and we can see that it is okay and the type is a request now this thing right here this is basically the endpoint that we go to if we want to invoke this function so I could copy all of this control C and I'm gonna go to this tab over here and I'm just gonna paste this in so if I press ENTER now then it's going to invoke that function and we can see now we get back this random number 49 so we went to this endpoint and invoked this cloud function right here it run this you created a random number and it sent that number as a response to the client the browser and now we can see it right here if i refresh it's gonna run again and this time we get a different random number back and again and again and so forth so that's working we've now created this completely pointless random number function but nevertheless we've seen how it all works we've seen how to create one and now deploy one and invoke one okay so I'm gonna show you now another example I'm gonna copy all of this just and paste it all right down here call this HTTP request - and again we're going to give this a name this time I'm gonna call it to the dojo and this is going to be an on request HTTP function we still fire a callback function and taking the request object and the response this time I'm not going to create a random number all I want to do is redirect someone when they invoke this function so when they go to this URI or endpoint so to do that I'm going to still take the response object but instead of sending a response to the browser I'm going to use a redirect method on that response object and passing a URL to redirect them to so I could say HTTP and then www.netsupportdna.com it's on the web and now if we invoke this function to the dojo it's going to take us to the dojo of the net ninja code at UK website so let's save this now and again we need to deploy this so firebase deploy double dash only functions that's going to deploy these for us again it might take a minute or so so now that's deployed let's head back over to the firebase functions I'm gonna refresh over here and hopefully we'll see that new function which we deployed and we can do right here so let's grab this URL to the dojo I'm gonna copy it and I'm gonna paste it right up here and this should basically just invoke that function and then redirect us to the net ninja website so press Enter fingers crossed and I think this is working even though my website is taking a long time to load it's still working so now we see possibly the best site on the web or right here okay so there's actually one more thing I want to show you and that's these logs right here so we can use these logs as a bit of a debugging tool and log stuff out when we invoke the different functions we automatically see some messages when we either deploy the function or the execution of the function started etc but we can also log our own messages to this panel as well and the way we do that is just by using console log so right here for example I could say console dot log and then we'll just log out the number and then if I save this and deploy again by saying firebase deploy only functions and then whenever this function is invoked not only is it going to send that function back to the client the browser it's also going to take that number and log it to the firebase logs or right over here so this could be useful when you are debugging if you want to block something from the request or something else that's absolutely fine to do and we probably will do that in the future as we go forward through this tutorial as well for now if I go back to firebase functions go to the dashboard and now if I grab this one right here the random number copy it and then paste it over here press enter we get the random number but it should also now log over here so if I got two logs and just wait for this to load we can now see that this random number was logged over here as well now I just want to mention one thing when you first start to run your functions when you first start to invoke them it might seem like it's taken a long time to invoke them and to get a response and that's absolutely normal because when you first create a function and just use it a little bit firebase kind of with holds its resources a little bit and it does take a little time to do but as more people use it and the function is invoked more often then it does speed up in the future but anyway hopefully now you understand how to create these type of functions and how to deploy them to firebase and then invoke them to get a response
Original Description
Hey all, in this Firebase Functions tutorial I'll show you how to create your very first cloud function & then how to deploy it to Firebase servers.
🐱👤🐱👤 JOIN THE GANG -
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join
----------------------------------------
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS & Firebase - http://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase
🐱💻 🐱💻 Course Files:
https://github.com/iamshaunjp/firebase-functions/tree/lesson-2
🐱💻 🐱💻 Other Related Free Courses:
+ Firebase Firestore - https://www.youtube.com/playlist?list=PL4cUxeGkcC9itfjle0ji1xOZ2cjRGY_WB
+ Firebase Authentication - https://www.youtube.com/playlist?list=PL4cUxeGkcC9jUPIes_B8vRjn1_GaplOPQ
+ Firebase Hosting - https://www.youtube.com/playlist?list=PL4cUxeGkcC9he0kHAyiyr3dDO2xw0NWoP
🐱💻 🐱💻 The Net Ninja Community Boards:
https://community.thenetninja.co.uk/
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Net Ninja · Net Ninja · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
GraphQL Tutorial #5 - Express App Setup
Net Ninja
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
GraphQL Tutorial #8 - Root Query
Net Ninja
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
GraphQL Tutorial #12 - Author Type
Net Ninja
GraphQL Tutorial #13 - Type Relations
Net Ninja
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
GraphQL Tutorial #18 - Mutations
Net Ninja
GraphQL Tutorial #19 - More on Mutations
Net Ninja
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
GraphQL Tutorial #23 - Create React App
Net Ninja
GraphQL Tutorial #24 - Book List Component
Net Ninja
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
GraphQL Tutorial #28 - Add Book Component
Net Ninja
GraphQL Tutorial #29 - External Query File
Net Ninja
GraphQL Tutorial #30 - Updating Component State
Net Ninja
GraphQL Tutorial #31 - Composing Queries
Net Ninja
GraphQL Tutorial #32 - query variables
Net Ninja
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
GraphQL Tutorial #34 - Book Details Component
Net Ninja
GraphQL Tutorial #36 - Styling the App
Net Ninja
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
Updated Vue & Firebase Course (Udemy)
Net Ninja
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja
More on: AI Workflow Automation
View skill →Related AI Lessons
⚡
⚡
⚡
⚡
Had my Frontend Developer interview with Capgemini (Application Developer) today, and I wanted to…
Medium · JavaScript
10 Frontend Developer Tools to Boost Productivity in 2026
Medium · Programming
10 Frontend Developer Tools to Boost Productivity in 2026
Medium · JavaScript
The US Frontend Engineer Market in 2026: A Data-Driven Reality Check (and the Bias That Stops Us Seeing It)
Dev.to AI
🎓
Tutor Explanation
DeepCamp AI