Migrating from Firebase Real-time Database to Firebase Cloud Firestore in Angular

A Step-By-Step Guide to Upgrade from Real-time Database to the Robust Firestore

Firebase Realtime Database and Firestore Logos

Firebase Real-time Database has long been the go-to choice for developers who need real-time data syncing in their applications. However, with the advent of Cloud Firestore, Firebase now offers an even more powerful, flexible, and scalable solution for handling database operations. In this article, we will walk you through the process of migrating from Firebase Real-time Database to Firebase Cloud Firestore within an Angular application.

Before diving in, it’s essential to know that the Firebase Real-time Database and Firestore have different data models and querying abilities. While Real-time Database uses a JSON tree structure, Firestore is based on collections and documents. As a result, this migration will likely require some refactoring of your application’s data handling logic.

Let’s start migrating your Angular application from Firebase Real-time Database to Firestore!

Prerequisites

To follow this guide, you will need:

1. An existing Angular application with Firebase Real-time Database integration
2. A Google Account to manage your Firebase project

Migration Steps

Step 1: Enabling Cloud Firestore in your Firebase project

1. Go to the Firebase Console https://console.firebase.google.com/
2. Click on your project’s settings and navigate to the “Database” tab
3. Under the “Cloud Firestore” section, click on “Create database”
4. Choose your database’s security rules and location settings and click “Done”

Step 2: Update the AngularFire packages (If needed)

Make sure you have the latest AngularFire and Firebase packages installed. You can update them using the following command:

npm install firebase @angular/fire@latest

Step 3: Modify your AppModule

Open your “app.module.ts” file and replace the import of “AngularFireDatabaseModule” with “AngularFirestoreModule.” Additionally, ensure the module is imported in the “imports” arrays of the NgModule.

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { firebaseConfig } from './firebase.config';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 4: Refactor your data handling code

The next step is to update your Angular components and services that use the Firebase Real-time Database to use Firestore instead. To do this, replace “AngularFireDatabase” with “AngularFirestore” in your imports and constructor injections. You will also need to modify your data handling logic to use Firestore’s collection and document-based querying.

Here’s an example of updating a service with Real-time Database:

// Before: Real-time Database
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private db: AngularFireDatabase) {}

  getItems() {
    return this.db.list('items').valueChanges();
  }

  addItem(item: any) {
    return this.db.list('items').push(item);
  }
}

And here’s the updated service using Firestore:

// After: Firestore
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private firestore: AngularFirestore) {}

  getItems() {
    return this.firestore.collection('items').valueChanges();
  }

  addItem(item: any) {
    return this.firestore.collection('items').add(item);
  }
}

You will need to update all the components and services in your application that use Firebase Real-time Database to use Firestore instead.

Step 5: Update your security rules

The last step is to update your Firebase security rules to work with Firestore. Firestore rules are similar to Real-time Database rules but have a slightly different syntax. Update your Firestore security rules in the Firebase Console according to your application needs.

Conclusion

Migrating from Firebase Real-time Database to Firestore is a necessary step for many developers, given Firestore’s extensive capabilities and robustness. This step-by-step guide should assist you in upgrading your AngularFire applications to leverage the new datastore. However, it’s important to note that the data handling logic and security rules might require substantial refactoring depending on your application’s complexity. Happy coding, and enjoy the power of Firestore!