Problem with using Firebase in online P5 Editor

p5.js Libraries
1

Firebase realtime database works fine in the old offline P5 editor. But when I use the same code in the new online editor, the variable firebase is not recognized:

       *"Uncaught ReferenceError: firebase is not defined (sketch: line 12)"*

The code is directly from The Coding Train 9.2 “Firebase: Saving Data - Programming with Text” with the currently recommended Firebase source link added to the index:

         <script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>

and with account config removed from sketch.js:

function setup() {
  console.log("Setup");
  var firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "....",
    appId: "..."
  };
  firebase.initializeApp(firebaseConfig);
  console.log(firebase);
}

Again, it works fine in the old offline P5 editor but not in the new online one. Any suggestions appreciated so the online editor can be used to replace the old offline editor.

Thanks in advance.

1 Like
2

Were you able to resolve this issue? I might start by checking existing public sketches on the web editor that contain “firebase” to see if any provide a good working model.

https://www.google.com/search?q=“editor.p5js.org”+firebase

My main concern with this would be that API key privacy. The web editor doesn’t have a good privacy model yet – as far as I know.

3

Yes, it was solved by replacing the firebase source in index.html with:
<script src="https://cdn.jsdelivr.net/npm/firebase@6.1.0/firebase.js"></script>

Thanks for your suggestion.

1 Like
4

rsklarew Thanks for posting your solution, it was great help.

(I adopted to the actual firebase version as well and it worked.)

1 Like