Firebase code block

I’m trying to pull in a data point from my firebase real-time data base into a code block, and can’t seem to get it working. Can this be done? Has anyone done it befor? 
 

Yes, this can be done. Please provide the community with more details, including a working link to the page on the site (and password if required to view it), the code you are using and the firebase details.

https://www.finlabs.design/test2

password - firebase

Here's the code i have in the code block:

<h1 style="color: white" id="bigOne"></h1>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyDTF-oVteDQjlcA5Peao6kIDhITvrSx9LQ",
    authDomain: "finlabsenrollment.firebaseapp.com",
    databaseURL: "https://finlabsenrollment-default-rtdb.firebaseio.com",
    projectId: "finlabsenrollment",
    storageBucket: "finlabsenrollment.appspot.com",
    messagingSenderId: "923882092186",
    appId: "1:923882092186:web:4762b27686474c2146d123",
    measurementId: "G-JVHZ21E5YW"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  
  var bigOne = document.getElementById('bigOne');
  var dbRef = firebase.database().ref().child('text');
  dbRef.on('value', snap => bigOne.innerText = snap.val());
</script>

On 1/5/2021 at 3:34 AM, Adamluk said:

https://www.finlabs.design/test2

password - firebase

Here's the code i have in the code block:

 

<h1 style="color: white" id="bigOne"></h1>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyDTF-oVteDQjlcA5Peao6kIDhITvrSx9LQ",
    authDomain: "finlabsenrollment.firebaseapp.com",
    databaseURL: "https://finlabsenrollment-default-rtdb.firebaseio.com",
    projectId: "finlabsenrollment",
    storageBucket: "finlabsenrollment.appspot.com",
    messagingSenderId: "923882092186",
    appId: "1:923882092186:web:4762b27686474c2146d123",
    measurementId: "G-JVHZ21E5YW"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  
  var bigOne = document.getElementById('bigOne');
  var dbRef = firebase.database().ref().child('text');
  dbRef.on('value', snap => bigOne.innerText = snap.val());
</script>

Incorrect password. Can you check again?

Try now, should be all set

Hi. Where did you get above code?

The first thing I noticed is an error in the console.

Quote

Uncaught TypeError: firebase.database is not a function at...

And yes indeed firebase.database is not defined. From some reading on the web the solution appears to be to add the following to your code.

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

You want to add it under...

<!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->

After I loaded the database code and ran the startup code again I saw "hello" on the page. Apparently a sign of life.

Let us know how it goes.

Such a silly mistake on my part!!! Thanks you so much!!! what did you use to check the errors? 

I used Chrome DevTools. Other browsers have equivalent tools.