Setting Up React with Firebase Functions: Step-by-Step Tutorial

hello everyone I nage and in this session we will build a project using react combined with Firebase functions you will learn how to seamlessly integrate these powerful tools to enhance your web development skills so to get started first you will need to go to your existing Firebase project and then you have to click on this build dropdown menu and then click on functions when you will do that then in your project shortcuts you will start to see the functions op option when you will click on functions then you will need to activate them so I have already done that for this project but essentially you will have to follow a couple of steps and one of them is for you to upgrade your project to blaze or paid subscription which simply means that you will not be using the free tier which is called as spark to upgrade your project to blaze plan you will have to enter your payment information and then you will have to set a budget which if you will cross you will get a warning email from Firebase that this limit has been crossed but if you are just using Firebase for your personal learning then I don't think that any of the limits are going to get crossed because in the free tier or in the spark tier you get enough usage or enough free usage for you to build a full-fledged project while also testing and deploying your application all right so after you have done setting up your functions in your Firebase project the next thing you need to do is to go to your react project and then install the Firebase tools so this is Visual Studio code and this boilerplate code which I'm using is from another tutorial video where I have already shown you how to integrate the Firebase backend along with its authentication with a react front end project so we will not be covering that entire process again if you want to know how to integrate F base backend with your react UI front end then you can watch that tutorial video by opening the link which I have shared in the description when you have already integrated Firebase backend with your react front end then to be able to use Firebase backend serverless functions you will first have to install the Firebase tools by executing command npm install and then Firebase Tools in your terminal press enter so while they are installing let's talk a little bit about Firebase functions so Firebase functions are basically serverless functions for which you don't need a full-fledged backend application or backend node environment for them to function you just build or create individual functions in the environment provided to you by fase and then you deploy those individual functions when it's time to call any backend function then you can call them individually and then they are able to run all all kinds of backend logic and then you can return values or data from those serverless functions as well so serverless simply means that you don't really have to worry about the backend infrastructure that you will be using to set up your backend runtime environment after installing Firebase tools you will have to initialize the Firebase instance in your project and to do that you will simply have to call Firebase and then in it this is assuming that you already have installed fire Bas package from the previous tutorial video which I was talking about now the message says you are about to initialize a fire Bas project so are you ready to proceed press enter now you have to select Firebase feature which you want to configure and we want to configure the functions select them using space and then press enter now it is asking us for the project under which we want to configure the functions so we already have created a project if you don't have a project project then you can create a new one but because we already have a project I am going to select this option use an existing project now it has given me the list of all the projects that I have in my Firebase account so I'm just going to select the one which we have to use which is this one tutorial select it and then press enter now it is asking about the language I'm going to go with JavaScript do you want to use es lint well it's not required for this tutorial video do you want to install dependencies yes I want to do that so this step essentially creates a new folder with the name functions in our project directory and all the functions are going to reside under this functions folder and it's up to us how we want to structure the files and folders under this functions folder and I will show you in a moment the very basic structure that you should absolutely use when working with Firebase serverless functions in the end it says fireb base initialization complete and there are two messages first one is writing configuration info to fire base. Json and writing project information to Firebase RC now let's see what these two files contain first let's go into and open up fb. Json so this file has some configuration regarding our functions and the second one is this one fbas RC it simply contains the project name under the property default now this is useful when we want to use different project instances when doing things like let's say deployment it really helps to switch between different projects for example right now we have the default one as this one now if you want to use the dev instance of your project suppose that you are also using this one as dev then you can use a Dev instance over here let's say that you have a separate project for the broad or production instance then you will simply have to add another property with the name prod and with the value of the project which you are using for your production instance well anyways let's close this one and move on to the next step which is going to the functions folder and then creating a new folder which is going to be called as quable functions in the default setting we only have a single index.js file when we first initialize the fase for functions but this is really counterintuitive because we cannot really write all of our functions in a single index.js file so to properly arrange all the functions in a meaningful manner it is best to use the modularized approach and then write the functions but then import them as individual modules in this index.js entry point so we are going to do just that first I'm just going to remove everything from this index.js file and then go to your quable functions folder under this folder I will create a new file with the name my function. Js okay so for this my function. Js I'm just going to paste some boilerplate code which I'm going to explain to you as well what it is all about so in this my function first we are importing the required packages for functions and for admin now functions is to call the function and admin is to initialize our app if it is not already initialized and that can be done by simply checking the existing length of the apps if it is zero then we always have to call admin. initialize app now to create a quable function we simply have to follow this syntax where we simply write functions. https Doon call and then we provide a function as a call back over here we have an Asing function now there is another option which is run with and here we can Pro provide an object with some options over here for an example I have provided timeout in seconds which is 540 so if your function needs to stay active for a long time longer than usual then you can provide the time out in seconds which is a fixed value but there is a certain limit to it normally you don't really need to use runwith for normal functions if you are just doing standard operations like um you know writing to a backend fire store or calling a third party API but if you are doing something else like calling a third party API whose response is going to take some time to return to your function then you may choose to run your function with a specific timeout so there is a certain way in which we can invoke a quable function from the front end by providing some data and in the back end we will get the data as well as the function context this context has certain values but the most important one is the O so you can know if the user which which is calling this function is authenticated or not let's say if you want this function to be invoked and run for only authenticated users then you can check for context. o if it is not present then you can simply throw an error well anyways let's move on with what is going on with this function so right now this function is only returning a single property with the name success which is set to true so when we will invoke this function from our react front end then we will be able to get the value of Suess and when that will be done then we can be sure that our backend function is invoking successfully now it's time to import this functions dependency in the index.js file so that we are able to deploy it so to do that the first thing that we have to do is to install the express and course packages in our functions folder so CD functions and then npm install Express and course now in index.js the first thing that we need to do is to import the express and course packages then we need to create a new Express app and then if you want to whitel list certain domains then you have to use the course middleware and then comes the important bit where we import our function so const my function equals to require and then we have to give it path so do/ functions and then the function name which is my function and then finally we just have to call exports do my function equals to my function now after this is done how do we actually test this function code do we have to always deploy it to the server to test it well we can simply run a local emulator Suite where we will be able to call this this function by hosting it locally so to be able to emulate functions locally what we have to do is first in this project go to the existing Firebase do JS file and in this file I will have to add certain steps which make sure that the emulator is up and running so to do that first I will have to import get functions and connect functions emulator from Firebase functions next we have to check if if we are in the development mode by simply checking env. nodecore EnV then we have to connect the functions emulator to Local Host sport 5001 so let me show you how it's done first just add a condition to check the current environment then fetch all the functions by simply calling get functions and then providing our Firebase app as an argument and then finally call The Connect functions emulator function by providing the functions as an argument and providing the host name and then providing the port number now to shorten this code we can also call get functions directly over here as well so that is also something that you can do the next thing that I will be doing is to add a emulate command in our package.json file which will make it pretty easy to run the emulator whenever we want it to so to do that open up your package.json file and then go to scripts and add a new script with the name fase emulate now to start the emulator we just have to execute the command fase use and then after use we have to provide the project name so remember I was talking about the Firebase RC file where we have the list of projects and you can use the project which you want to emulate so if you want to emulate the functions in the production environment then you can write Brad in the command if you want to emulate the functions in the dev environment then you can do that as well so right now I'm just going to emulate the default projects functions so for that I will simply write Firebase use default and after this you will have to execute another command which is hold on Firebase emulators and then start now save it now let's see if our emulator is working correctly or not so open up terminal and then I'm just going to execute command npm run fase emulate it says Now using Alias default which is this project so it says hold on let me just scroll up it says um functions us Central 1 this is our functions location my function the function name it says HTTP function initialized and this is the function URL all emulators ready it is not safe to connect your app so our fun functions emulator is working and now we are able to call our backend function using our react front end so remember we added this condition if our project is running in the development mode it simply means that when we are working in the dev mode then our front end is going to call the functions which are deployed in the emulator and not in our functions hosting without this piece of code your front- end code will not be able to call the emulated functions while anyways it is now time to invoke the Firebase function from a reacts component so in our boilerplate code from the past tutorial we already have a home component where we can invoke this my function to do that first we have to import the dependencies for get functions and https callable next I am just going to add another div below the existing message one so let's do that so this is the div which I have added now to test our backend function I am going to add a state variable with a default value now the name of the state variable is message so message and then set message and I will use the default value of default message so when this page will open up then default message is going to be printed on this page and when we will call the function if it's invoked successfully then we are going to update this message to some other message indicating that our function has been successfully invoked now let's create a function to invoke our backend function and also a button which will invoke our components function so async function and then call my function hold on function now over here we can simply fetch the reference of our backend function by calling const my function equals to https quable and then the first argument is going to be the list of functions so get functions and then we have to provide the name of our backend function which is this one my function and it's simple as that now let's use the try and catch blocks so try and then catch error now in try first let's create a const for the data which we are going to send to our backend function now this data is optional you can choose to not send any data but I'm just going to show you how this can be done so right now I'm just going to initialize it with an empty object literal now we can fetch the result by simply writing const result equals to A wait and then call my function as a regular JavaScript function and also provide the data as an argument and that is pretty much all you need to do now let's check the value of the success property of the data so remember in our function we were returning the uh the success property as true so we just have to check if it's true then the function is returning correct data so if result do data do success if it is available and true then we can simply update our message State variable with another message with something like Firebase function called successfully in the else part we can simply write hold on Firebase function has an error although if there is an error then it is going to be um get caught by the the catch blog and that is everything we need to do to invoke our backend function now let's add the button which when clicked is going to call this call my function and I going to add it over here so this is a button which has an onclick attribute with a value of invoking our uh local call my function with the text call Fas function now it's time to test our code if it's working correctly or not so remember we are already emulating the backend function now it's time to start our react front end application so for that first in this second terminal I will do CD dot dot to go back to our react project and then simply write npm and then start so this is our react front end and I'm just going to sign in as a user first so that we are able to see the homepage now this is the homepage with the button call Firebase function and the default message let's just click on this button but to see if we are able to invoke the backend function or not now the message has updated to F Bas function called successfully now one way to be sure that our function is indeed getting called is to check that out in the terminal where the emulator is running so let's open up this first terminal and let me just zoom out a little bit over here you can see that there are a bunch of um messages logged so it says beginning execution of um us Central One my function uh these are all the arguments in the end it says finished um this function execution in this much time so whenever the function will be finished executing then you will see some message like this if you have logged something from your function then you will see that value being logged in this terminal so that you are able to debug what is happening in your function and if there is an error then it will be logged in this terminal as well as well so it's pretty you know straightforward and convenient to see what's going on with our functions and let me show you one more thing which is related to how you can deploy your functions using the command line although you should always use a cicd pipeline such as GitHub actions to do that or you can you know specify them directly as well but in any case let me just show you two commands which you can use to deploy your functions on multiple environments so using this one you can deploy your Firebase functions on dev and using this command you can deploy them in prod so while you are working in Dev mode you may want to deploy only functions in the dev mode to be able to test them if they're working correctly while getting deployed on server or not so this is the command fase use and then Alias which I have already showed you and then FAS deploy only function this parameter tells fase that it needs to deploy only functions so guys that was all about building our project with react and Firebase functions and doing the integration of a very basic setup I hope you found this walk through helpful and insightful for your own development work if you enjoyed this video and learned something new then please consider subscribing to this channel once again this is niage signing off happy coding and I will see you in the next video

Channel: Code Radiance

Views: 1,501

Keywords: React, Firebase, Functions, Project, Setup, Configuration, Tutorial, Step-by-Step, Guide, Building

Id: NKwgojLfT-8

Length: 21min 19sec (1279 seconds)

Published: Thu Jan 11 2024