Setup Firebase Hosting

[00:00:00]
>> So I feel good about this app, right? Why should I not feel good about this app? It looks great, it has all these great features to it. I want to deploy it out into the world for everyone to use. So what I'm gonna do is is I'm going to set up this.

[00:00:18]
Okay, what is it doing? I'm going to set up this app with Firebase Hosting. So let me see here. I have installed as a dev dependency, Firebase tools, which is the Firebase CLI. A question?
>> Yeah, the dock versus the set dock method. So the dock method creates just a document on the client only.

[00:00:47]
>> No, so this will create it on the server when you call.
>> When you're adding a new document.
>> Right here and set doc. Sorry convert me go to. You're right. We're going to dashboard right here.
>> Yeah, can you explain the difference between the doc and the set document?

[00:01:04]
>> Yeah, so there's two parts to doing any type of data manipulation. There is the reference. So which is where is it? And then that has nothing to do with the server. It just doesn't try to connect up to the server. It just builds up the recipe to go speak to the server.

[00:01:23]
Then set Doc is what is called a mutation function, which says, hey, let me update the server in some way. So a set will do what we'll learn in a minute here called a destructive update. Says I don't care about what existed beforehand, I'm just gonna write over it.

[00:01:41]
And it's really good for creation. There's other ones, there's update, there's lots of other advancements we'll see here in a minute. And what this will do is this will go out to the server and make that update. This tends to be confusing it with first cuz most people are used to like I'm saying awaiting these, you don't have to.

[00:01:59]
And actually it is but very bad to await these because FireStore works offline and this await says I'm gonna wait to get a result back from the server before I continue going on. So if I await it it's just gonna sit here and wait until I regain connection.

[00:02:16]
Whereas I don't await it will actually continue to work against the offline cache. So waiting for this stuff tends to be while there are situations where I've seen it's necessary for the most part it's not. So this doc creates the reference this set doc just says, hey, let me save the data at that location.

[00:02:34]
So those are the two differences. So now with that done, I'm going to just set up. I have the Firebase CLI which you can install globally. I like to install it locally at the node modules folder because just less problems when you have local versus global. And for what I can do is I can say MPX.

[00:02:56]
I'm using MPX. But you could use NPM or for for global and say Firebase in knit, and I'm gonna write Firebase and knit hosting. And this is my favorite part, the little Firebase thing right here. And so, what this says is like okay, cool, let's set you up to deploy.

[00:03:15]
What do you wanna use? You wanna use an existing project, create a new project. We have an existing project. We called it Mark Down-me Let's see here what did I do? I think I may have give it the wrong name. Hold on I know why I'm in the wrong well we get, I'm incorrectly authenticated.

[00:03:39]
So I'm going to clear out the terminal. What did I do? Okay, so put a new one here. I'm gonna say MPX Firebase. Logout because I'm logged in as the wrong one right now. And I'm gonna say MPX Firebase login. And this is going to take me over here.

[00:04:03]
I'm going to log in as this user. It's gonna say hey, I'm gonna need to be able to do stuff to deploy. So I allow it and we're logged in. So now I'm back into the console logged in and I'm gonna go through that process again we're gonna say MPX Firebase and knit hosting.

[00:04:23]
I'm going to create a nicer update. Enter an existing project which is here it is marked down me. It's gonna ask us it's always so small. What do you want as your public directory? The way that view does it I believe it builds out to a folder called Dist.

[00:04:44]
So I'm gonna specify this. It's gonna ask me if I want to configure as a single page app, which yes I do in this case. I'm not gonna set up deploys with GitHub, which is a cool feature, but we'll get to that later. So now I have this dist folder that view will overwrite.

[00:05:01]
I'm gonna do NPM run build just to build out. This isn't important but it builds out my view app, all exists here. And if I say now MPX Firebase deploy. It's gonna say all right, great we're gonna do all this stuff we're going to deploy out your app.

[00:05:26]
Awesome, and then now at mark down-me.web.app are really cool app exists. So if you all wanna go out to this and go to mark down-me.web.app,and watch the chaos ensue. This one. We can just start writing. And actually one of the things I think is really cool is if I go into the console, someone right to the app, yeah, look at that.

[00:05:57]
It's like a Christmas tree. It's just everything lights up. This is all the things that people are doing. And so this is a very quick dirty way of getting a Firebase app up and running we authenticated a user, we got data syncing in real time, all this stuff.

[00:06:19]
But there are a lot of mistakes that we made along the way. And this is fun. I can watch this happen for days. My gosh, you all right and a lot of documents. But there's a lot of mistakes that were made along the way here. One of the mistakes is that if I want to delete all of this data, it's actually I can do so with just like a curl command.

[00:06:47]
This right here is a REST API for fire store. So you can talk to fire server REST API If I plugged in my project ID and I ran a curl command against this, just delete the whole database just like that. That is not very secure or if I wanted to add data in I could add data.

[00:07:06]
And that's because we have no security setup for this. And so that's a bad practice.