Firebase CRUD

1. Firebase Setup

We’ll walk you through setting up a Firebase project for building CRUD using Firestore as the database.

Install Firebase

bash

npm install firebase

Initialize Firebase

Create a Firebase project in the Firebase console, then initialize Firebase in your application:

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

2. CRUD with Cloud Firestore

Firestore is Firebase’s newer database solution, offering a flexible, scalable, and NoSQL cloud-based database.

Create (POST)

Add a Document

import { getFirestore, collection, addDoc } from 'firebase/firestore';

const db = getFirestore(app);

async function createUser() {
  try {
    const docRef = await addDoc(collection(db, 'users'), {
      name: 'John Doe',
      email: 'john.doe@example.com',
      active: true,
    });
    console.log('Document written with ID: ', docRef.id);
  } catch (e) {
    console.error('Error adding document: ', e);
  }
}
createUser();

Read (GET)

Get Documents

import { getFirestore, collection, getDocs } from 'firebase/firestore';

const db = getFirestore(app);

async function getUsers() {
  const querySnapshot = await getDocs(collection(db, 'users'));
  querySnapshot.forEach((doc) => {
    console.log(`${doc.id} =>`, doc.data());
  });
}
getUsers();

Update (PUT/PATCH)

Update a Document

import { getFirestore, doc, updateDoc } from 'firebase/firestore';

const db = getFirestore(app);

async function updateUser(docId) {
  const userRef = doc(db, 'users', docId);
  await updateDoc(userRef, {
    active: false,
  });
}
updateUser('document-id-here');

Delete (DELETE)

Delete a Document

import { getFirestore, doc, deleteDoc } from 'firebase/firestore';

const db = getFirestore(app);

async function deleteUser(docId) {
  await deleteDoc(doc(db, 'users', docId));
}
deleteUser('document-id-here');

3. CRUD with realtime database

The Realtime Database is Firebase's older database solution that synchronizes data in real-time across connected devices.

Create (POST)

Add Data

import { getDatabase, ref, set } from 'firebase/database';

const db = getDatabase(app);

function createUser() {
  set(ref(db, 'users/' + 'user-id-1'), {
    name: 'John Doe',
    email: 'john.doe@example.com',
    active: true,
  });
}
createUser();

Read (GET)

Get Data

import { getDatabase, ref, get, child } from 'firebase/database';

const db = getDatabase(app);

async function getUser() {
  const dbRef = ref(db);
  try {
    const snapshot = await get(child(dbRef, 'users/user-id-1'));
    if (snapshot.exists()) {
      console.log(snapshot.val());
    } else {
      console.log('No data available');
    }
  } catch (error) {
    console.error(error);
  }
}
getUser();

Update (PUT/PATCH)

Update Data

import { getDatabase, ref, update } from 'firebase/database';

const db = getDatabase(app);

function updateUser() {
  const updates = {};
  updates['users/user-id-1/active'] = false;

  return update(ref(db), updates);
}
updateUser();

Delete (DELETE)

Remove Data

import { getDatabase, ref, remove } from 'firebase/database';

const db = getDatabase(app);

function deleteUser() {
  remove(ref(db, 'users/user-id-1'));
}
deleteUser();

Notable libraries and example projects

1. Angular Firebase CRUD - CRUD application example using Angular with Firebase integration
2. Firebase Auth - easily connect to a Firebase's Admin API with no need for additional layers
3. Firebase dashboard - potent template that enables proficient data management and analytics of your Firebase data
4. Firebase admin panel - provides a convenient UI for CRUD apps on top of Firebase