Update to Firebase 8+

[faizanabidnaqvi]

Hi there!

Thanks so much for creating this project! I have been on the lookout for a good firestore based CMS for various internal use apps and while I found some (and used them), many got outdated and don't use the latest firebase features such as realtime listeners. This one does, and so much more.

I have been using Firebase Emulators for testing new projects but that only works on Firebase 8+. It will be great to have the latest Firebase version in this project so we can test locally before deploying. The current peer dependency version for firebase doesn't allow me to call the useEmulator functions. If I install firebase 8 in my setup and run the app, I get import errors probably because Firebase has changed the way to import after v8.

[fgatti675]

Hi @faizanabidnaqvi
So I have updated the imports internally to make it compatible with Firestore SDK 8.
Internally we are checking some Firestore data types and have run into this bug:
firebase/firebase-js-sdk#4125
I have added a workaround for that particular case in version 0.19.0, but it is hacky, until they have a proper solution. I haven't done extensive testing with Firebase 8 but to my understanding everything should be ok.
Let me know! 👍

[faizanabidnaqvi]

Hey @fgatti675

Thanks so much for the quick response and for adding the feature! :D I updated to the latest Firestore version and while I haven't tested extensively too, the examples seem to be running fine.

However, to use the Firebase local emulator suite, I did have to do a workaround. In order to start the emulator, we need to call this code after firebase.initializeApp:

if (window.location.hostname === "localhost"){
      firebase.firestore().useEmulator("localhost",8080)
      firebase.auth().useEmulator("http://localhost:9099/")
    }

Since Firebase is initialized internally by the CMSApp, I believe, I couldn't call this code outside of it (that is in the index.ts file). As a workaround, I created a new component in index that wraps the CMSApp and uses a useEffect hook to start the emulators:

const MyCMSApp = () => {

  //use emulator after render.
  useEffect(()=>{
    if (window.location.hostname === "localhost"){
      firebase.firestore().useEmulator("localhost",8080)
      firebase.auth().useEmulator("http://localhost:9099/")
    }
  }, [])
  return (
    <CMSApp
        name={"My Online Shop"}
        authentication={myAuthenticator}
        navigation={navigation}
        firebaseConfig={firebaseConfig}
    />
  )
}

This makes the emulator work fine at least in the basic example. :) It will be nice to have a more elegant solution to use emulator but I am not sure how or whether it will be worth it!

Thanks again for the awesome work!

[fgatti675]

Hey @faizanabidnaqvi
I have added an onFirebaseInit callback in the CMSApp level so you can just call the emulator initialisation code in it :)
It has been added in version 0.22.0