I want to show 'blogs' from my database in my web page. I already include the packages firebase-app and firebase-database,
but still it does not recognize initializeApp.
It show:
Uncaught ReferenceError: initializeApp is not defined
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-database.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2> hello world </h2>
<!-- the functions you need from the SDKs you need-->
<!-- Import the functions you need from the SsDKs you need-->
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDwq-CA3Fm1oYj3jLnPeeczNb9xXrKYtbo",
authDomain: "firebasic-a87d7.firebaseapp.com",
databaseURL: "https://firebasic-a87d7-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "firebasic-a87d7",
storageBucket: "firebasic-a87d7.appspot.com",
messagingSenderId: "701224819501",
appId: "1:701224819501:web:69eedfd3468db6f3f511a4",
measurementId: "G-WVEYYLK2VJ"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = firebase.database();
const blogRef = db.ref(blogs).on('value',handleSuccess,handleError);
function handleSuccess(items){
console.log(items);
}
function handleError(error){
console.log(error);
}
</script>
</body>
</html>
initializeApp / firebase.initializeApp are available when firebase-app.js had been loaded.
Rather use v9, which still can be setup through CDN:
<body>
<!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
<script type="module">
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js'
import { auth } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-auth.js'
import { database } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-database.js'
</script>
</body>
Or v8 with deferred loading:
<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
<script defer src="./init-firebase.js"></script>
File init-firebase.js:
var firebaseConfig = { ... };
firebase.initializeApp( firebaseConfig );
Firebase will add a global object in your window, firebase that hold the initializeApp method, so you have to access it through the firebase object but you cannot call initializeApp directly
BTW, your config has an invalid `firebase/database URL
please consider watching this video to have an intro about FB DB Get started with Firebase on web
Make sure to change your app and DB credentials on Firebase, cause they're public now everyone saw them
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2> hello world </h2>
<!-- the functions you need from the SDKs you need-->
<!-- Import the functions you need from the SsDKs you need-->
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-database.js"></script>
<script defer async>
console.log(firebase);
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDwq-CA3Fm1oYj3jLnPeeczNb9xXrKYtbo",
authDomain: "firebasic-a87d7.firebaseapp.com",
databaseURL: "https://firebasic-a87d7-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "firebasic-a87d7",
storageBucket: "firebasic-a87d7.appspot.com",
messagingSenderId: "701224819501",
appId: "1:701224819501:web:69eedfd3468db6f3f511a4",
measurementId: "G-WVEYYLK2VJ"
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.database();
const blogRef = db.ref(blogs).on('value', handleSuccess, handleError);
function handleSuccess(items) {
console.log(items);
}
function handleError(error) {
console.log(error);
}
</script>
</body>
</html>