React, Redux & Firebase App Tutorial #33 - Cloud Functions Intro & Setup

Key Takeaways

alright then gang now so far we've been doing all of our JavaScript inside the client the browser over here in our react app now we've already set up a file store database and firebase authentication which communicates with our app but all of our JavaScript is currently running inside the application inside a browser we've not been using a server to run any code whatsoever but sometimes we need to run server-side code to perform some admin tasks that we don't really want to be handled by the client inside the browser for example to edit data that is not accessible from the client so we've already seen that we can lock down data using the firestore rule so not everyone can edit the data in our database and sometimes we might make a collection where we don't want anyone to edit whatsoever even if they are authenticated but we still need a way to edit it as an admin so if it's fully locked down and we can't do it from the client we could still do it from a cloud function which runs on the server and cloud functions are just that they are functions which we can create that run on the server by firebase now we create a function locally first of all in our text editor then we can deploy it to firebase but before we create that function let's set up our application so that we can start to deploy some functions to firebase all rather than so we want to set up our application to use cloud functions so first of all go to your google firebase project over here and click on functions on the left now we need to get started so click that button and it's going to show us the different steps that we have to go through to deploy cloud functions so first of all we're going to have to install google firebase tools so you want to write NPM install - G to install these globally firebase - tools just in your terminal over here and that's going to install the firebase tools on your computer now I've already done that so I don't need to do that again so let's continue then you want to say firebase in its and then firebase deploy now before you do this you may have to log into firebase from your computer for it to gain access to your code and deploy that so to do that all you need to say is firebase and then log in like so and then if you're not currently logged in this is going to open up a browser for you to log in and then give access to firebase to your code to deploy so do that first of all I'm already logged in now over here the next step is to say firebase in it and that initializes a firebase project on the front end for us so it's going to give us stuff to then deploy and then when we're ready to deploy it we say firebase deploy so let's just finish this up for now and over here we're gonna say a firebase in it and that's going to initialize the firebase project for us so you just need to go through these different questions it's going to ask you do you want to proceed yep and make sure you're in the correct directory by the way inside Mario plan and then the next question is what different services do we want to use well we're going to select functions and also hosting because we're going to host this whole application on firebase later as well now we don't need to select fire store because we've already created the rules for that online inside our firebase project we would select this if we want to create the rules local it and then deploy them as well so we don't need to select fire store here for now so press space to select different things and then press ENTER to enter to the next step so now it's asking us which project over here do we want to deploy these things to now my project is net ninja Mario plants so I'm gonna go down here and select net Ninja Mario plant like so and now it's going to set up the functions it's asking us what language we want to use I want to use JavaScript and do you want to use es length I'm not going to do that for now and then do you want to install dependencies with NPM now press yes and it's automatically gonna do that for us all right then so that's all installed now this question at the bottom is saying what do you want to use as your public directory now this directory is the directory that we're gonna eventually publish to firebase and that's not the directory for our functions that's the directory of the application itself so when we've completed the application we've built it which folder are we gonna then publish to firebase now we're gonna call this folder dist because when we build our react application it's going to output all the results in code in a folder called dist and that is what we're going to deploy to firebase eventually so call this dist and press Enter now do we want to configure this as a single page app and that's going to take care of some server-side configuration for us yes we do so press yes and then that's it that is firebase initialized on the front end and we're ready now to use firebase functions and later on also deploy this to firebase or cover that later but now you should see on the left this functions over here this contains the code that we'll be using to write and deploy cloud functions so we'll take a look at that in the next video and it's also created this dist folder with an indexed or HTML file in later when we run a react build then it's going to replace this with our own index file and some JavaScript and that is what will deploy to firebase when we come to deploy the application but in the next video what we'll do is create our very first cloud function