In this video, Emmanuel Henri sets up Firebase. He first creates an application on the Firebase cloud, then gets the code to set it up, and then makes the connection on the current application.
- [Presenter] As a developer, you have many backend options. For example, you could set up a local Mongo database, SQL, Redis, or several others, so if any of those interest you, you feel free to research them or take a course on them from our library. But for this project, we will leverage Firebase which is one of my favorite online backend solution. So once we connect to Firebase on the top-level component at .js, we will update our state with this data and our list of courses will still render properly. So let's get to it.
So the first thing I want you to do is go to https://firebase.google.com, and if you don't have an account, please go ahead and set up an account, and press pause to the video. Once you are logged in to your console, you should see this. So go ahead and create a new project. And let's call this course. Create a new project. Okay, so the next thing we need to do is go on Database, and here what we'll do is import the data that we have.
So we can import our JSON, so go ahead and click on Import JSON. So browse. And then go to your legacy app, and find the data in the source folder. So data folder, then click on data. And import. Perfect. The next thing we need to do is in the rules. So we're able to read that array, let's go in Rules, and make sure that we do equal, equal for read.
So this is basically saying that we don't need to be authorized to read but we need to be authorized to write. Usually you would be using the authorization for reading as well. That means that you have to have some type of login. That's usually how you would do it with applications, but for this example we'll just do it without authorization for reading. Once you do that, you publish. Okay. Now we need to inside of our application to set up Firebase.
And the way we do that is first of all, we need to make sure we install it. So bring your terminal, so either you do ctrl + ', or you use the view and then click on integrated terminal. Turn off the server for now. Like so. And then what we'll do is an npm install and make sure you save it, Firebase. And as you saw, I did a little shortcut for install which is the I instead of the install.
Okay, so now Firebase is installed. Let's make sure we import it here. So import Firebase from Firebase. And then inside of our application, we'll create one more thing. So we need to make sure that before all of our components render, we have the data loaded. So the first thing we'll do is now create our state with an empty array.
Like so. And then once the component is about to mount. So the way you do this is componentWillMount, and this is one of the lifecycle functions that come with React. So once this is done, then initialize Firebase. So the way we initialize Firebase, we do firebase.initializeApp which is a function. And then on that object, we'll pass all the credentials for your application.
So let's get our credentials from Firebase. And go to Overview. Click on Overview here. Add Firebase to your web app. Then grab all the credentials inside of the object. Okay. So copy that. And then paste in the initialized app here. Okay, perfect. Save that. Okay, so now we're officially connected to Fireabase, but right now if we go back to our app, right now what's going to happen is we won't have anything listed in our courses anymore.
And that's normal. Because right now, we are connected to Firebase but we're not passing the data that we get from Firebase to anywhere. So we'll do that next.
- Creating a new React project
- Installing and working with React Developer Tools
- Dissecting a project into components
- Setting up the state with static data
- Adding and finalizing CSS in components
- Setting up and leveraging Firebase
- Standard code best practices
- Installing and setting up Flow for type checking