Setup a Project & Database

[00:00:00]
>> To demonstrate this, I'm gonna build a simple, naïve, Firebase site, and I'm gonna make tons of mistakes. So this is not the best practice section, this is the, let's learn from the mistake section. So if you wanna follow along, you can, I'm gonna be going pretty fast, so, you can just kinda can watch me, go through it too.

[00:00:22]
But this is in the 1-fast-but-not-good-setup. And from there, if you have npm install, and npm run dev, it'll boot up a Vue.js app, and if you're not used to Vue, don't worry, it's actually pretty simple. So, I'm at the root of this directory, and I'm gonna say, cd 1-fast-but-not-good-setup, and then go to start, and then open up my code.

[00:00:51]
All right. So the way this app works is that everything starts in main, just to kinda show how it works, we have a router, this is not related to the Firebase code. But just kinda acclimate everyone to the code base router, it goes to a home component, a dashboard component, and then editor, we're gonna be making a real-time Markdown editor.

[00:01:16]
And if I go and run, I have my node modules installed, so I am just going to do npm run dev. And that's gonna boot me up on localhost: 3000 by default, which I think I need to go. Google's 2000 right here and this is just this beautiful page, as you can see.

[00:01:39]
Zoom in we're going to sign into user right now. None of that's happening just clicking through it and then it's going to show a list of Markdown documents which none exists. And then when we click New we'll be able to write mark down on one side and and it will all show up in real time because right now I'll just lose any changes So going to, I'm going to start, let's start with the fun spot.

[00:02:09]
Like what I really want to do is I want to synchronize data in real time to the editor. So the first thing if I want to connect out to a Firebase project, or data to Firebase back end, I need to create In project in the Firebase console and so the way with that is if you go to console.firebase.google.com this will sign you in with a.

[00:02:36]
If you're with a Google account and then this is my project, but this is the Front of Masters projects I'm making but I'll go and make one from scratch. Now I'm gonna ask the audience participation what's a good name In no numbers less less it's got a good rate of like because there's going to be a point behind this too so like think about this as like this is a Markdown editor like what what would you want to type into it Were URL to go to a web app.

[00:03:05]
Like markdown me. Like, markdown dash me. I don't know I kind of like is that we get there?
>> Yes. Good.
>> Okay. All right. So you can enable enable Google Analytics. I'm not going to use that for now. So I'm just gonna go through and create the project.

[00:03:23]
So there's the jam stack like can you maybe talk about how that's related or
>> yeah Firebase and the jam stack go very well together so with jam stack you have you JavaScript, and Markdown work. I can't remember what it is. There's so many acronyms, but with JAMstack the philosophy is I have all these static documents, and I can render things out as statically as possible, but where needed, I can talk to some back end service Us and from that backend service, render you know whatever or do it make a payment to do all this stuff.

[00:04:06]
Firebase works really well because JAMstack works great with serverless architecture and Firebase is all serverless So jam stack and Firebase go very well together. You know, regardless of what you're choosing to deploy on or whatever, you can store data in your, in FireStore. You can authenticate users to Firebase authentication.

[00:04:26]
And it's it's very jammy. I don't know if that's what they say the jam stack world, but I'd like to think that's what they say. So now I have my project created And the first thing you wanna do is you want to create a Firebase app. So Firebase projects they house all of this stuff don't worry too much about it these are all the things that we gonna be using in the console.

[00:04:51]
But to talk to these,
>> Services we need to create an app. And so app it doesn't matter much what you name your app, I call all my apps defaults because I really only use the first one. And then I just click Register. And this is going to give me a very important object called the firebase config.

[00:05:13]
Now, this configuration object right here It can be a little scary for people at first, especially because they see this thing called API key. So we're gonna put this in our client side application. And it's gonna be just fun. The amount of times I have answered Stack Overflow questions or let people know these are not the security keys are not the problems.

[00:05:36]
This is all Client side keys these are all publishable. This is, basically, just how Firebase knows how to speak to your specific back end if you're worried about well what happens with all my data how. Hey, how do I secure that? We have a whole section today devoted to how we're going to keep everything really secure.

[00:05:55]
And this is not a problem. So we're gonna copy all of this right here. And going back into an app, I'm going to create a new file. And I'm just actually I have a flower here config And right here it says Export consequence config and I'm just going to paste in all of that so now I have my config in here and I can start connecting out to Firebase so I'm gonna go into the editor dot view because I want to I want to make this a In real time so the way this works is it just uses some some of us like lifecycle and reactive methods and it's used as its router so I know what route I'm on and then I use this library called snark down which is like a super lightweight Markdown editor.

[00:06:45]
And I just do a little bit of like enhancing on it. So, just some customization. But now I'm gonna import, from Firebase. If this already comes pre baked with all Firebase installed, but normally what you would do is, you would Here in the editor you would just do, I was really far off, but you would do npm i firebase, and that's it, it's really tiny.

[00:07:11]
So I'm going to kinda just show right here, you would just npm i firebase, npm install if you wanna write the whole thing out. But that installs Firebase JavaScript library, and the JavaScript library is how we're gonna talk to everything. So the first thing we're gonna do is we're going to initialise a firebase application.

[00:07:31]
So it knows how to speak to the back end. So using that, I also want to import my config../config. There we go. And that has a config object. And then from here, I can create a firebase app. So initializeApp and then I'm going to pass in config.firebase. So this right here, it sets up the foundation for being able to talk to apps, but we're not actually talking to anything.

[00:08:03]
So what I want to do is I want to be able to say, hey, I want to go on to FireStore. And I want to synchronize data.
>> Well here in the console. If I open up and I click FireStore database, the first thing I'm going to need to do when you set this up is you want to provision this out.

[00:08:20]
So this is kind of a lot of steps at first, but we still automatically provision your database for you. But what we found is is that it's probably best to not create resources. That you don't need at first, this is more so for security. And then we also kind of prompt you.

[00:08:37]
This is sort of a taste into security roles. We're going to start in test mode, which is not good to do long term. Basically, all this is saying is, is that anyone can read and write to this database until, By this date right here, so June 30th. Then you can select where you want your database to be, I'm going to have mine be in US Central, and that's going to go out and create a cloud FireStore database.

[00:09:03]
And then when I start writing to it, we'll see all the updates appear and everything that's gonna go out you.
>> Great and so this is where I could create data I could start writing in, we'll have something like markdowns would be the name of a collection and then the document ID I can click an auto ID And then you would have markdown it'd be like hello something like that and then when I save it, we have ourselves a little document right here so this is sort of your basic structure we're gonna get way more into this This in the upcoming section.

[00:09:43]
And so what I'm gonna do now is I wanna connect out to fire store. So I'm going to import a subpage from the fire base library. So the way that everything works within fire base, if you, everything has to use app because the app will share authentication state across all services.

[00:09:59]
>> But first but any other sub package you're using, so whether it be off or FireStore or remote config or you know a bunch of other things that I'm can't remember off the top my head right now, they all contain in these sub packages. And each sub package will have a getter method that says, hey, let me get that service.

[00:10:20]
And then from there we'll have access to FireStore called Get FireStore. And optionally, if you want you can pass in the Firebase app because then it knows what app it's associated with behind the scenes if you don't pass it in it will still figure it out I like to pass it in just to be explicit And then if I want to grab data, I'm gonna start by calling this collection method.

[00:10:45]
And what this will do is I can say all right, let's go out to the markdowns collection and let's see what exists there. So this right here is referred to as a reference. It doesn't actually get any data unless we do something with it, but it refers to a location in the database.

[00:11:10]
So right here, this refers to this collection of markdowns, and it would be able to reach out to this document and be able to show me everything. I got a little error right there.
>> But basically this would say like, hey, this is this is how you get to a spot in the database.

[00:11:27]
And if I want to read the spot in real time, I can use this method called on snapshot. And on snapshot receives a collection reference and then every single time any update happens whether that's a delete An update, right? It will trigger a callback that gives you the new data automatically that can surface to the app.

[00:11:47]
Yes, Mark.
>> Is the initialized app config different in a SSR library, such as Next.js?
>> So the Firebase SDK. Has ability to like handle like Node environments up to a certain point certain features are not notable because they rely on browser. We do our best to know up in those cases there's some edge cases I believe specifically with next where you might need to write like an if statement around stuff but we have a current project we're working on trying to make that a lot easier so hopefully by the time that this is all cut up and everything yes it will work very good with next if not just If statement here are there for things that rely on browser API's Great question though and there's also a server library that you can swap Firebase out for as well but that has different implications and we'll get to that here in an upcoming one.