Getting Started with Firebase 9 #3 - Setting up Firebase

Key Takeaways

all right then so now we have webpack set up the next thing we need to do is create a new firebase project so go to your firebase console at console.firebase.google.com and then we want to add in a new project and we need to give this a name i'm going to call it firebase 9 dojo you can call it what you want it really doesn't matter so i'm going to click on continue we don't need analytics so just click on create project all right and then click on continue to go to the project dashboard now when we create a new firebase project we have to make a new front-end application for the project as well this is the dashboard where we can control the back end but we need to register a front end our application now we can have different types of applications we're going to have a web app so click on this right here give it a name really doesn't matter what it is again i'm going to call it firebase 9 dojo website something like that we don't need to set up hosting register the application first of all then it's telling us what we need to do next now all we want to do for now is just go down to continue to console because we're going to grab this code from somewhere else so click on continue to console and now we can see this new app that we've just created so this represents the front end application our website if you like that's going to connect to this backend this firebase project so click on the cog for this to go to the settings and then if we scroll down we want to grab the config object so click on config right here and you want to copy this object now this config object contains information about our firebase project and we need to use it on our front end so that the front end website can connect to our firebase project and interact with it so copy that all right and then back in our project inside the index.js file i'm going to get rid of this console log right here and instead i'm going to paste in this new firebase config object all right so we have this config object but it's not really doing much at the minute and we need to basically connect to the firebase project on the back end from the front end using this object right here now the first step in doing that is to install firebase so i'm going to open up my terminal again we still have webpack running inside this terminal i'm going to click on this one to open a new one and then over here we need to install firebase so i'm going to say npm install firebase like so and this should install the latest version of firebase version nine in our case all right then so now that firebase package is installed we can go ahead and use it to connect to the firebase back end along with our firebase config object now before i show you how to do this using version 9 which is what we've installed i just want to remind you how we did this using a previous version like version 8 for example now to do that we would have said import firebase from firebase forward slash app now this firebase forward slash app is the core part of the firebase library and this firebase object that we import will contain a lot of different methods that we would use to basically connect to firebase and initialize different services so if i wanted to initialize the app or the connection to the firebase backend i would say firebase and then use a method on that firebase object called initialize up like so and then we would pass in the firebase config object so it knows what project to connect to all right so we'd use a method on the firebase object now in version 9 we don't do this we just import the functions that we need to use from the library so in our case the function we need to use is this initialize app so we will get rid of this firebase thing right here and instead we would just import a single function from this library and that is initialize up like so and then we don't need to call that method on the firebase object we just invoke the function that we import right here and now that connects us to our firebase backend using this firebase config so it knows which project to connect to and that's all there is to it so there's your first kind of glance into how we're using these different functions from the firebase library next up i'm going to show you how we can set up a firestore database connect to it and then get data from it