Firebase + glitch project

html
javascript

#1

Hi, so i’m currently creating a project where my website retrieves orders from customers in my database which I created in Firebase. My problem is verifying I’ve connected to the database and then displaying it in my table. Thank you in advance for any help! Just in case you need to know I am able to host on firebase using my firebase.json file as well.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://www.gstatic.com/firebasejs/5.8.0/firebase.js"></script>

  </head>  
  <body>
<script src="https://www.gstatic.com/firebasejs/5.8.0/firebase.js"></script>
<script>
var config = {
    apiKey: "****",
    authDomain: "rgjnrgjndrg",
    databaseURL: "grdgrmkjdgrmkdr",
    projectId: "rgrdgdrgrddrg",
    storageBucket: "grdbrghdrbhg",
    messagingSenderId: "grngrdjngrjndrgkj"
  };
  firebase.initializeApp(config);
  
  
});
</script>

    
    
    <table id ="orders">
      <tr>
        <th>Order</th>
        <th>name</th>
        <th>order No.</th>
        <th>Items</th>
        <th>Price</th>
      </tr>
      
      <tr>
        <td>ben</td>
        <td>c345</td>
        <td>food</td>
        <td>£500</td>
      </tr>
        
      
      
      
    </table>
  </body>
</html>
<style>
body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  font-style: italic;
  color: #373fff;
}

#orders{
 border:2px solid black; 
}
th{
 border: 1px solid black;
  border-left:none;
  border-right:none;
}


</style>

MOD EDIT: remove sensitive data


#2

Hey @The-father-of-storms, welcome to the Glitch Forums!

It looks to me like your next step is to set up your connection and read appropriate data - Google’s Firebase docs are pretty good here, so I’d suggest starting with https://firebase.google.com/docs/database/web/start for the connection part and then reading up on reading (and writing) data at https://firebase.google.com/docs/database/web/read-and-write. The specific commands you’ll use depend on how your data is structured, so it’ll be hard to give specific commands that you’ll want to use, but hopefully this will get you started.

As an aside, it looks like you’re including the Firebase JavaScript library twice in your code. That probably won’t cause any problems, but it’s unnecessary.

Lastly since this isn’t a question specific to Glitch,. I’m going to move it to the Coding Help category - perhaps some other community members might have more specific guidance to offer.


#3

Ok great thanks for the help.