This article will be showing you :
- How to create a React project with Firebase setting.
- How to set the rules of Cloud Firestore and Storage.
- How to set Authentication with email and Google Provider.
After setting up these three products provided by Firebase, you will be able to create a CRUD (create, read, update and delete) app with React!
Wait… are you thinking why should you use Firebase as your backend server? Here is an article to discuss about the pros and cons, mentioned,
“ Firebase is fantastic if you want to create something out of nothing in a flash, making it great for rapid prototyping.”
Are you ready? Let’s get started!
Step 1 : Sign up Your Firebase Account
Go to Firebase website, and login you account. (Easy!)
Step 2 : Set up Authentication Providers
- Select Authentication on the left panel.
2. Go to Sign-in method and select Email/Password.
3. Add new provider with Google.
Step 3 : Set up Cloud Firestore
- Select Firestore Database on the left panel.
2. Now we are in Cloud Firestore. The “Data” tab is where your data is located in Cloud Firestore. At this step, we won’t create any data, but you can create your own. To add your new data, you need to start collection first. (see the example below)
3. To protect and maintain your database and run it properly, we need to add some rules. You can reference the Firebase Docs to set up the rules you need, or see the example in the screenshot provided below.
Step 3 : Set up Storage in Firebase
- Select Storage on the left panel.
2. Set the rules for Storage. If you want to know more about Firebase security and rules for Cloud Storage, please see its Docs.
Step 4 : Create a React Project
- Register your app, which can be found in Project overview page, and select web option. You also can set up Firebase Hosting meanwhile, but we won’t cover it this time.
2. Command Line to create a react app. After the react app is created, following the steps to add Firebase SDK in your project.
$ npx create-react-app [app-name] -use-npmFirstly, use $ npm install firebase to install Firebase in your project, and create a firebase.config.js at the root of the project with the provdied SDKs.
When you need the database, you just need to import the db from the config file. For example, import { db } from “../firebase.config”.
OK! We are all done! I know that Hosting is another important part…I’ll cover that a bit later. :>
Finally, I’d like to thank Brady’s React front to end 2022 on Udemy, which has helped me explore and obtain more knowledge in React and Firebase.
