CRUD Firebase Firestore with ReactJS + Typescript PART 1 : Config the Project
Hello,
In this story I’ll explain how to implement CRUD (Create Retrieve Update Delete) functions in ReactJS with Typescript using Firebase Firestore database.
Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.
source: firebase docs
This explanation will separate in 2 parts.
This part will covers:
- Create a project in Firebase console.
- Create new ReactJS project.
- Config Firebase in ReactJS project.
1.Create a project in Firebase console
Open Firebase console and add new project.
On step (1 of 3), fill the project name then click continue. As an example I’ll name the project with CRUD ReactJS Typescript.
On step (2 of 3), just click continue.
On step (3 of 3), configure google analytics, just select default account for firebase then click create project.
After the creating project progress done, click continue.
Then the Firebase console will bring you to the project dashboard. Click web icon.
On App nickname field, fill it with the project name, as example I’ll fill it with crud-reactjs-typescript. Then click register app.
Then On add Firebase SDK script will be shown.
On this step, create a new Firebase project is done. Then We’ll create a new ReactJS project and config the Firebase.
Don’t close the On add Firebase SDK script that showed earlier. We’ll use it later.
2.Create new ReactJS project
In this story I’ll using npx create-react-app and using typescript template to create the project.
When project created, I’ll open it on VScode. Then delete all the unneeded files.
The files is:
- App.css
- App.test.tsx
- index.css
- logo.svg
Then I’ll create folder named views inside src folder and create another folder inside src/views named app, then I’ll move App.tsx file into the src/views/app folder. Then I’ll rename it to index.tsx.
Then, open the src/index.tsx file then delete imported index.css and fix the the imported App file location.
So, the src/index.tsx codes will like below.
Then I’ll clean up the open src/views/app/index.tsx file, so the codes will like below.
Then I’ll run the project.
If successful it will run on localhost:3000 and the index page will shown App Ready.
Then open back the terminal and install firebase dependency.
After the installation done create a folder named db inside src folder.
Then create a file named index.ts and folder named repositories inside src/db folder.
Then I’ll config the firebase in src/db/index.ts file, so the codes like below.
*Explanation in codes.
Then back to console firebase add firebase sdk, click continue to console.
When back to dashboard click Cloud Firestore in left sidebar menu.
Then click Create Database.
Then choose Start in production mode then click next.
On Cloud firestore location just leave it default then click enable.
Then on cloud firestore view click Start collection.
On collection id field as example I’ll fill it with todos. Then click next.
On document id field just click auto-id.
Then make the fields look like below.
Then click save.
So, the todo schema have 2 fields which is activity and date.
Now I’ve a first record of todo document.
Then click rules tab and update the rules to allow read, write.
Then click publish.
Okay, next to config the repositories in project that implement crud functions will explain in part 2.