Add examples of using realtime updates / Firebase db in a Redux PWA

[itsjustbrian]

Firebase (the database portion, in the context of this issue) is a good fit for PWAs built with Polymer and a lot of them have chosen it as their home, myself included. The PolymerFire elements made this interaction very straightforward in the 1.0-3.0 two-way binding realm. Now that one-way binding and Redux is the endorsed method with lit-element, it would be helpful to have some examples or a best-practices guide for using a Firebase database.

Particularly, data listeners (or any realtime updates in general) confuse me in the context of Redux.
How do actions that write data to the db work when there is a listener on that same reference?
What about when there isn't a listener? Does the behavior of the action need to change in that case?
How would attaching and detaching listeners work?

Using both Redux and Firebase can feel strange because Firebase accomplishes many of the same goals as a flux system like Redux. The local copy of your db it keeps is like the store, and listeners act a lot like subscribing to that store. For this reason some people don't recommend using them together, but more often than not you don't want all of your application state going through the network layer.

Maybe my questions/concerns can just be addressed in this issue, but since PolymerFire exists there's sort of a precedent of Polymer + Firebase working together, and I'm sure a lot of people could benefit from some official guidance on how to do it with lit-element / Redux

[IadityaM]

it'll be really helpful to get a guide on how to integrate firebase in the pwa-starter-kit. I was working on a starter kit based PWA with had to be in sync with a firebase based android app, but importing firebase resulted in errors that didn't yield any solutions in the firebase community so had to switch to react for the project instead.

Really looking forward to get the modules/guide for using Firebase with PSK for the next iteration of the project.

[itsjustbrian]

@IadityaM I think your issue might have more to do with the Firebase modules not supporting ESM. The polymer-cli only supports serving and building projects with ESM. To load Firebase in the starter kit, as of right now, you need to use the old fashioned script tags. Check out this issue for more info firebase/firebase-js-sdk#815

[IadityaM]

@fafcrumb I had gone through the link but even after using the solutions provided in there, the error message was the same.
What i would appreciate right now would be a guide to work with firebase and Redux in order to make the best of the features offered by both. Or at the very least an example using both optimized for performance and not using redux-saga instead of the base redux-thunk.

[keanulee]

From https://firebase.google.com/docs/web/setup, put the script tags under the "Web" tab in index.html:

<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

window.firebase will now be defined, so you can use it in your actions. For example, an action could look like:

const databaseRef = window.firebase.database().ref();
const todosRef = databaseRef.child("todos");
export const addToDo = newToDo => async dispatch => {
  todosRef.push().set(newToDo);
};

(example code from https://medium.com/quick-code/how-to-integrate-react-redux-and-firebase-in-3-simple-steps-c44804a6af38)

As mentioned in firebase/firebase-js-sdk#815, the Firebase SDK isn't available as an ES module so you'll have to rely on the regular script tag that define the global window.firebase. You could optionally make your codebase more ES module-like if you export that global from one file and import it everywhere else:

src/firebase.js

  export const firebase = window.firebase;

  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);

Some actions file

import { firebase } from '../firebase.js';

const databaseRef =firebase.database().ref();
const todosRef = databaseRef.child("todos");
export const addToDo = newToDo => async dispatch => {
  todosRef.push().set(newToDo);
};

[fleckdalm]

Any updates on this or best practice examples?

[stale]

This project is no longer under development and will be transitioning to a read-only repo. Thank you for your contributions.