React devs might find this archived course helpful to reference, but this course has been updated! We now recommend you take the Firebase Fundamentals course.
Transcript from the "Configuring Firebase" Lesson
[00:00:00]
>> Steve Kinney: The first thing we wanna do, if we look at authentication there's this web setup button here and we live in fancy React land, we don't we are better than script tags. We don't need those in our lives but we do wanna grab this configuration over here. And you might be like, should I be committing my API key to client-side code?
[00:00:26] It's fine. Trust me. We're going to secure the database with rules. And then there are, if you need to do like admin access with like a true API key, there's a secret API key that you can get somewhere else. This is the one that basically, when this client-side application that you are sending out to your users, not unlike an iOS or an Android app, It needs to know what Firebase project it is associated to.
[00:00:48] So, we can take this and we can put it in our client's base, we can send it to users. It is totally okay, we will secure our database through other means, so it's not like they can just send willy-nilly calls, yeah cool open up the developer tools and get Firebase, and like go ahead and do stuff, right?
[00:01:06] No, we will have that thing locked down not at first but eventually we will lock it down. So, it is safe to ship this. So, let's go ahead and copy that. There is this copy button here, but I'm gonna just take the pieces I need cuz I don't need all the rest of this.
[00:01:22] And I'll go into Visual Studio Code, and in my source directory I'm gonna make a new file called Firebase.JS. The reason I create this file is there's a whole bunch of minor configuration that I'm gonna wanna do to FireBase. So, rather than kinda have it all over my code base, I'm just basically gonna do it all in one place and then export the stuff that I need.
[00:01:43] This is also, in larger projects, I find this really useful to put other helper functions in there. We're going to write most of our hot fires by hand everywhere, but for more common things I tend to create functions that will go ahead and get all posts and that's just a function that will do the right thing for me, so on and so forth.
[00:02:03] We're not going to do that because we want to practice writing and get really familiar with it. I don't want to abstract it away too fast. But, in a kind of larger application, I am very lazy, and don't wanna type that stuff more than I have to. So, I tend to use this as a place for a lot of my like abstractions and stuff along those lines.
[00:02:19] So, one thing we will do is we will import Firebase from Firebase/app. Now, you could do import Firebase from Firebase, and you will get a like polite console warning is not a console are it's just a console warning. It's in yellow saying, like hey, maybe you don't want to do this.
[00:02:44] The difference between doing Firebase and Firebase/app. if you just do Firebase, you are going to get everything. You are going to get the JavaScript code for the database, the JavaScript code for the authentication, the JavaScript code for messaging, the JavaScript code for maybe a whole bunch of stuff you're not using, which is going to make your bundle bigger than it needs to be.
[00:03:06] So there's nothing stopping you from doing this except just why be hostile to users if you don't need to. So, we will do Firebase/app which is just the bare bones as much Firebase as you need to get by. And then we'll paste that in.
>> Steve Kinney: I'm going to change that to const because I'm hipster.
[00:03:26] And we've basically now wired up, we've configured Firebase. One other thing I'm gonna do is, I'm just going to export default this Firebase instance, which doesn't really matter but we're gonna export a few other things from this file as well. And solely for demonstration purposes, I am gonna attach Firebase to the Window objects.
[00:03:53] So, that if we wanna play around something or if we want to debug, we can just open up the developed tools and play with it. This is not a necessarily like best practice that you should do in your application. This is, we're gonna be live coding together for a really long time, and occasionally we might wanna poke at stuff and explain stuff, so we'll have this here as well.
[00:04:12] You could even do, if you really wanted to, if process.env.node equals development do this otherwise don't. You could do fancy stuff like that. We're not going to because we're just gonna keep it, really simple. Cool, the next thing we wanna do is, we wanna set up Cloudfire, cuz this, Firebase, we've effectively configured Firebase and nothing with it, right?
[00:04:37] Firebase without a database or authentication, or storage, or cloud functions is not much of anything, right? We just pulled in the core library, we don't necessarily have any of the tooling around with it yet.