I want my website to be able to pull data from firebase realtime db and display it as text on the html page

EoinP · May 29, 2019

I am creating a website for a local business. They were interested in going down the wordpress road to make it easy for them to edit, but i would much prefer not to build in wordpress.

So why do they want wordpress?

Well as it is a restaurant, opening hours change some times. They want to be able to update the opening hours themselves. I want to use firebase as there are many app builders out there now that use it and i could simply drag a few blocks and allow them to edit the opening hours via an app on their phone.

But i have come into a problem of making the website. Ive tried numerous guides on how to get it to work. I am trying to even make the website communicate in some shape or form so that the console will log the data but no use, I have attached screen shots. Can anyone help me?

Many Thanks.

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Firebase Web Test</title>
		<script
		src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
		
	</head>
	<body>
	
		
	<!-- Value -->
	<pre id="object"></pre>
	
	
	
	
	
	<!-- Child -->
	
	
		<script src="app.js></script>
		
	</body>

</html>

app.js

(function() {
	
	// Initialize Firebase

	const config = {
	  apiKey: "AIzaSyBv2ec5zJvAOvDp8u04pFI4Ws18CpIzReU",
	  authDomain: "pat-s-on-the-square.firebaseapp.com",
	  databaseURL: "https://pat-s-on-the-square.firebaseio.com",
	  storageBucket: "pat-s-on-the-square.appspot.com",
	};
	firebase.initializeApp(config);

	// Get elements
	const preObject = document.getElementById("object");
	
	// Create references
	
	const dbRefObject = firebase.database().ref().child("object");
	
	// Sync object changes
	dbRefObject.on("value", snap => console.log(snap.val()));
	
	
}())

mariushm · May 29, 2019

Why not simply add an "admin section" with a page where they can manually configure the hours.

Store the entered hours in a JSON or text file on the server, then on pages read the hours from that file.

You hardly need a database for a handful of values.

AnotherMax · May 31, 2019

It looks like you're using this: https://www.npmjs.com/package/firebase/v/3.1.0

Perhaps try and incude just the things you need (This would make the website download less which is good:

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-storage.js"></script>

Alternativly try using doing it this way, take a look at Step 3 and From the CDN. https://firebase.google.com/docs/web/setup#add_firebase_to_your_app