Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup

so in the West project we hooked up our application with firebase midway through but that's because I was easing those into the project now I actually think it's a good idea to set up our database from the beginning and get our app hooked up to it from the offset so then we don't have to start worrying about it later on when we come to use it so first of all let's go to our console so that's it consult up firebase google.com you can also get to it by clicking console in the top right when you go to the firebase website and we'll add a new project so first of all the name of this project is gonna be udemy - ninja - chat you can call it whatever you want choose your country or region and create that project ok so now he's created we'll go to our control panel and we'll set up our database over here so click on database first of all and inside here we'll choose the firestore option which is over here on the left get started and we'll start it in test mode again an able okay cool and now we have our firestore instance setup so we can now use it in our project now we want to set up a configuration file inside our project where we're initializing our firebase application on the front end so to do that let's go back to our project overview first of all and click on this option where we want to add firebase to our web app so once this loads we want to grab this stuff right here again inside this script tag and copy that remember we load in the firebase library via NPM not via this script right here so we'll cross that off and head over to our code editor now and then go into source and create a new folder inside here and this folder will be called firebase and in here we'll create a new file called in it is to initialize our firebase project now first of all we'll paste in this stuff we just copied now we don't yet have firebase installed so we'll need to install that down here in the terminal now make sure you're inside the ninja chat directory the root directory of our entire project here then we'll say npm install firebase and if you have a early version of npm you'll need to do double dash save to save that to your dependencies all right so now that's installed what we can do is import it up here at the top of the file so we'll say import firebase from and it's firebase so we needed that because we're using firebase down here to initialize our app we're also going to store this in a constant called firebase app you can call this constant whatever you want by the way it just makes sense to call it five eight up to me and then underneath this we need to export something now we want to export our database which is going to use the firestore method so first of all we'll need to import firestore at the top import firestore from firebase forward slash fire store so now we can come down here and say exports default and we want to export the firebase app up here which is our initialized up then we want to say dot fire store because we're exporting our fire store database reference okay now we've exported it there we can use it inside our other components in a future lessons hey gang gets shown here from the future with a quick update because since recording these videos the firebase team have updated the firestore API slightly and they've done that to add a new timestamp class to represent timestamp fields in the database now by doing that the knock-on effect is that we get a big fat red error in our browser console now you may have seen this you may have not seen this it depends on which version of firebase you have installed in your application if you have version 4.1 three and above you probably will see this error if we ever tried to use the firestore if you have something below that you probably won't either way all we need to do to get rid of that error is add in one line of code inside this initialization file image is where we initialize our fire store application so where we see constabies up equals firebase dot initialize app and then inside config we want to come below that then paste in this line of code we take the firebase up then we get the firestore dot settings and inside the settings function you pass in this one object now inside this object we pass in one property and that property is timestamp in snapshots camelcase and we set that equal to true so by doing this we're going to get rid of that big error that we see in the console every time we try to use the firestore now this code is not going to have any effect on any of the other code that we write inside this project or any of the other projects we do in this series but it is going to get rid of that error if you were seeing it