# Firebase Cloud Firestore

**URL:** <https://forum.ionicframework.com/t/firebase-cloud-firestore/107603>\
**Category:** ionic-v3\
**Created:** [October 4, 2017, 9:24am UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603 "2017-10-04T09:24:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![MatthiasE](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@MatthiasE](https://forum.ionicframework.com/u/MatthiasE)\
**Post date:** [October 4, 2017, 9:24am UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/1 "2017-10-04T09:24:16Z")

</div>

Hi all,

yesterday Google launched Cloud Firestore as an alternative for the realtime database.  
Does anyone already know how it will work with ionic (e.g. AngularFire)?  
Any experiences to share?

Thanks,  
Matthias

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [October 4, 2017, 9:58am UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/2 "2017-10-04T09:58:14Z")

</div>

My guess it would require a similar implementation than the current Firebase database products.

---

<div class="post-metadata">

**Author:** ![rrivanigweb](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rrivanigweb](https://forum.ionicframework.com/u/rrivanigweb)\
**Post date:** [October 4, 2017, 1:32pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/3 "2017-10-04T13:32:17Z")

</div>

Hi.  
You can use [angularfire2/firestore](https://github.com/angular/angularfire2/tree/master/docs/firestore).

In your **app.module.ts** add the following:

```auto
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';

// get your credentials from Firebase Console
export const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxx",
  authDomain: "xxx.firebaseapp.com",
  projectId: "my-project-id"
};

```

then add to imports:

```auto
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule,
    AngularFireAuthModule
  ],

```

Finally, for example, if you have a collection **items** you can add a document with this code when starting your home page:

```auto
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, db: AngularFirestore) {

    db.collection("items").add({
      first: "Ada",
      last: "Lovelace",
      born: 1815
    })
      .then( (docRef) => {
        console.log("Document written with ID: ", docRef.id);
      })
      .catch( (error) => {
        console.error("Error adding document: ", error);
      });
      
  }

}

```

Remember **to protect your Firestore database**. In this sample I was able to add documents to the collection because my db is “open”. Anyone can write.

---

<div class="post-metadata">

**Author:** ![antoinedupont](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@antoinedupont](https://forum.ionicframework.com/u/antoinedupont)\
**Post date:** [October 4, 2017, 2:47pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/4 "2017-10-04T14:47:06Z")

</div>

Do you know how it can be implemented using the regular Firebase JS SDK (no AngularFire)?  
I’m having difficulties to make it work.

---

<div class="post-metadata">

**Author:** ![rrivanigweb](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rrivanigweb](https://forum.ionicframework.com/u/rrivanigweb)\
**Post date:** [October 4, 2017, 3:33pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/5 "2017-10-04T15:33:34Z")

</div>

In your project folder run:

```auto
npm install firebase --save

```

Import **firebase** in **app.component.ts** :

```auto
import firebase from 'firebase';

```

Initialize **firebase** in **app.component.ts** :

```auto
[...]
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    firebase.initializeApp({
      apiKey: "XXXXXXXXXX",
      authDomain: "xxx.firebaseapp.com",
      projectId: "my-project-id"
    });
    
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

    });
  }

```

In your **home.ts** import both **firebase** and **firestore** , then try to write some data:

```auto
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import firebase from 'firebase';
import 'firebase/firestore';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

    var db = firebase.firestore();

    db.collection("items").add({
      first: "Ada",
      last: "Lovelace",
      born: 1815
    })
      .then( (docRef) => {
        console.log("Document written with ID: ", docRef.id);
      })
      .catch( (error) => {
        console.error("Error adding document: ", error);
      });

  }

}

```

Remember as before to **protect your Firestore database**.

PS: If you’re getting “_Runtime Error Cannot find module "@firebase/webchannel-wrapper_”" when running **_ionic serve_** , then run:

```auto
npm install @firebase/webchannel-wrapper --save

```

and run again **_ionic serve_** (or **_ionic serve --lab_** ).

---

<div class="post-metadata">

**Author:** ![antoinedupont](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@antoinedupont](https://forum.ionicframework.com/u/antoinedupont)\
**Post date:** [October 4, 2017, 4:31pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/6 "2017-10-04T16:31:07Z")

</div>

Works perfectly, thanks a lot!

---

<div class="post-metadata">

**Author:** ![MatthiasE](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@MatthiasE](https://forum.ionicframework.com/u/MatthiasE)\
**Post date:** [October 4, 2017, 8:35pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/7 "2017-10-04T20:35:12Z")

</div>

Is there any possibility to her the data from realtime database to Firestore?

---

<div class="post-metadata">

**Author:** ![rrivanigweb](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rrivanigweb](https://forum.ionicframework.com/u/rrivanigweb)\
**Post date:** [October 4, 2017, 10:13pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/8 "2017-10-04T22:13:46Z")

</div>

You mean export data between databases?  
Try here [https://firebase.google.com/docs/firestore/firestore-for-rtdb](https://firebase.google.com/docs/firestore/firestore-for-rtdb) .

---

<div class="post-metadata">

**Author:** ![jaydz](https://avatars.discourse-cdn.com/v4/letter/j/858c86/32.png) [@jaydz](https://forum.ionicframework.com/u/jaydz)\
**Post date:** [October 4, 2017, 10:42pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/9 "2017-10-04T22:42:29Z")

</div>

Very similar to Xamarin’s List objects.  
Very cool.

---

<div class="post-metadata">

**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\
**Post date:** [October 4, 2017, 11:56pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/10 "2017-10-04T23:56:33Z")

</div>

Firebase JS SDK still works in my app. What’s the plus or better with Firestore?

---

<div class="post-metadata">

**Author:** ![SigmundFroyd](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sigmundfroyd/32/111604_2.png) [@SigmundFroyd](https://forum.ionicframework.com/u/SigmundFroyd)\
**Post date:** [October 5, 2017, 6:13am UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/11 "2017-10-05T06:13:48Z")

</div>

As an aside in regards to some of the posted examples, you should pretty much never type `function` inside an Ionic app. It will break what `this` is, and cause issues.

Instead, utilize the “fat arrows” syntax `() =>`.  
So, for example, this:  
`function(docRef) {`

Becomes:  
`docRef => {`

Or if you prefer:  
`(docRef) => {`

Just an FYI in case somebody runs into issues.

---

<div class="post-metadata">

**Author:** ![rrivanigweb](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rrivanigweb](https://forum.ionicframework.com/u/rrivanigweb)\
**Post date:** [October 6, 2017, 1:52pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/12 "2017-10-06T13:52:18Z")

</div>

You can read here for differences: [https://firebase.google.com/docs/firestore/rtdb-vs-firestore](https://firebase.google.com/docs/firestore/rtdb-vs-firestore)

---

<div class="post-metadata">

**Author:** ![nandankushwaha](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nandankushwaha/32/112935_2.png) [@nandankushwaha](https://forum.ionicframework.com/u/nandankushwaha)\
**Post date:** [October 9, 2017, 6:24pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/13 "2017-10-09T18:24:41Z")

</div>

Hi, see this article to integrate Firestore with Ionic 3

> **[Using Cloud Firestore in Ionic 3 With AngularFire](http://www.programmingworldtech.com/2017/10/using-cloud-firestore-in-ionic-3-with.html)**
>
> Firebase has just announced  Firestore which is NOSQL document-based database. As compare to Firebase real time database in Firestore you c...

---

<div class="post-metadata">

**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\
**Post date:** [October 10, 2017, 12:04am UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/14 "2017-10-10T00:04:46Z")

</div>

Alright thanks @rrivanigweb, if I read it carefully, Firestore has more features, and will be the next go.

---

<div class="post-metadata">

**Author:** ![rrivanigweb](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rrivanigweb](https://forum.ionicframework.com/u/rrivanigweb)\
**Post date:** [October 10, 2017, 2:33pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/15 "2017-10-10T14:33:10Z")

</div>

Sure. Personally I’ve never used Firebase but with Firestore I’ll give it a try. 😉

---

<div class="post-metadata">

**Author:** ![mb1](https://avatars.discourse-cdn.com/v4/letter/m/74df32/32.png) [@mb1](https://forum.ionicframework.com/u/mb1)\
**Post date:** [October 12, 2017, 6:45am UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/16 "2017-10-12T06:45:45Z")

</div>

There aren’t ionic-native/cordova solutions?  
Firebase firestore is a browser solution, I need to implement offline persistence without browser limitations…

---

<div class="post-metadata">

**Author:** ![sutton](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sutton/32/113997_2.png) [@sutton](https://forum.ionicframework.com/u/sutton)\
**Post date:** [October 14, 2017, 12:37pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/17 "2017-10-14T12:37:19Z")

</div>

Hi mb1,

Yes, you can integrate Firebase firestore into your ionic app using the latest version of angularfire2.

Here’s a good tutorial that scratches the surface with an Angular example using valueChanges observable:

I was able to follow along in an Ionic 3 app with a few alterations. Also, to get the keys/ids of your documents, you’ll need to use snapshot() instead of valueChanges():

> <https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md#snapshotchanges>

I hope this helps.

---

<div class="post-metadata">

**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\
**Post date:** [October 20, 2017, 10:39pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/18 "2017-10-20T22:39:39Z")

</div>

@mb1 Ionic bascially integrates a lot of offline persistence, as Firebase if your typescript codebase is neat (not too complex dependencies and such). If you wanna test, give it a try by putting your app in offline mode. Of course, if you rely on cloud auth like me, you’ll be blocked at first step, but don’t underestimate Ionic capabilities in that matter, it’s in my app saving as much as 50 % of the web bandwith it’s supposed to produce (in beta still).

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [October 21, 2017, 6:24am UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/19 "2017-10-21T06:24:38Z")

</div>

Hi  
Do you know where Firestore stores its persistence during offline? If it is web or the likes, i wonder what limitations apply. I use sqlite plugin to build local persistance for a firebase app, and would love to ditch it for a cleaner one  
Tom

---

<div class="post-metadata">

**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\
**Post date:** [October 22, 2017, 9:38pm UTC](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603/20 "2017-10-22T21:38:46Z")

</div>

Hi,

While your Ionic app is offline, I’m quite sure it stores offline data inside your favorite mobile browser directory, using HTML5 offline storage capabilities of any smartphone/browser combination. But I have no idea of the exact location, sorry.

And if I understood well, in hybrid apps, anyways Firefox, Chrome, all the major browsers also use SQLLITE for local storage and offline mode.

Hope this helps a bit,

[Next page](https://forum.ionicframework.com/t/firebase-cloud-firestore/107603.md?page=2)