Develop Reference

"firebase is not defined" error using the current vr. of firebase

I tried making a simple chat forum using YouTube tutorial. upon its release it works wonderful so I tried using its code structure while updating the core infos and it only result in an error. I tried many time to avail, I'm new to programming so im looking for help.
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js"</script>
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-database.js"</script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyCTBkpUWMU_pL6qIb_hMXVDS_sCYQ2BROU",
authDomain: "rd-try-ce276.firebaseapp.com",
databaseURL: "https://rd-try-ce276-default-rtdb.firebaseio.com",
projectId: "rd-try-ce276",
storageBucket: "rd-try-ce276.appspot.com",
messagingSenderId: "47874427531",
appId: "1:47874427531:web:819f34b203e6ae82c0628e"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebase);
function sendMessage() {
alert("Hello! I am an alert box!");
//get message
var message = document.getElementById("message").value;
//save in database
firebase.database().ref("messages").push().set({
"message": message
})
}
</script>

undefined is not an object (evaluating 'firebase.initializeApp')

Whenevr I open the debugger in safari I get an error saying that undefined is not an object (evaluating 'firebase.initializeApp') and it points toward firebase.initializeApp(firebaseConfig);.
var firebase
let firebaseConfig = {
apiKey: "removed",
authDomain: "removed",
projectId: "removed",
storageBucket: "removed",
messagingSenderId: "removed",
appId: "removed"
};
firebase.initializeApp(firebaseConfig);
let db = firebase.firestore();

firebase.initializeApp is the v8 (and below) way of initializing the app. You could consider using the v9 (and above) style like this:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js";
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
More details on initialization upgrades to v9 here.
Or, using the Compat version (compatability with v8)
import firebase from "https://www.gstatic.com/firebasejs/9.8.4/firebase-app-compat.js"
firebase.initializeApp({ /* config */ });

How can I link up my Firebase CDN snippet to my JavaScript file?

I can't link the function below to my JavaScript file. I am using Firebase CDN code snippet. What am I doing wrong?
Firebase snippet:
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/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/7.0.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAPeU7jO2Zz5kdrh-4g4ehfcrL8Aufzubs",
authDomain: "udemy-modern-javascript-cee40.firebaseapp.com",
databaseURL: "https://udemy-modern-javascript-cee40.firebaseio.com",
projectId: "udemy-modern-javascript-cee40",
storageBucket: "udemy-modern-javascript-cee40.appspot.com",
messagingSenderId: "941299603483",
appId: "1:941299603483:web:afcd4f1da6878b51ef80be",
measurementId: "G-BRYW3TQNLL"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.analytics();
js file:
db.collection('recipes').get().then((snapshot)=>{
console.log(snapshot);
}).catch(err =>{
console.log(err)
});
The error msg is:
sandbox.js:1 Uncaught TypeError: db.collection is not a function at sandbox.js:1 (anonymous) # sandbox.js:1

The db variable from the script tag in your HTML file is not automatically available in the .js file.
You'll typically want to put all JavaScript (including what you now have in the script tag into the .js file or have all of it in the script tag in the HTML file.
Putting all code in the .js file is more common, so that'd become:
var firebaseConfig = {
apiKey: "AIzaSyAPeU7jO2Zz5kdrh-4g4ehfcrL8Aufzubs",
authDomain: "udemy-modern-javascript-cee40.firebaseapp.com",
databaseURL: "https://udemy-modern-javascript-cee40.firebaseio.com",
projectId: "udemy-modern-javascript-cee40",
storageBucket: "udemy-modern-javascript-cee40.appspot.com",
messagingSenderId: "941299603483",
appId: "1:941299603483:web:afcd4f1da6878b51ef80be",
measurementId: "G-BRYW3TQNLL"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.analytics();
db.collection('recipes').get().then((snapshot)=>{
console.log(snapshot);
}).catch(err =>{
console.log(err)
});
const db = firebase.analytics();

How to add firebase database to javascript?

I try to make an online store. I did the register/login part using firebase and it works, but when I try to retrieve data from database in another javascript file, I get an error.
The javascript line where I get the error:
var userDataRef = firebase.database().ref('users/');
The error:
Uncaught ReferenceError: firebase is not defined
at BooksArtJS.js:17
The html code:
<script src="BooksArtJS.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"> </script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
<script>
var firebaseConfig = {
apiKey: "theApiKey",
authDomain: "theAuthDomain",
databaseURL: "theDatabaseURL",
projectId: "theProjectID",
storageBucket: "theStorageBucket",
messagingSenderId: "theMessagingSenderID",
appId: "theAppID"
};
firebase.initializeApp(firebaseConfig);
</script>

Try moving your script with BooksArtJS.js after firebaseConfig script, also, for security reasons it is better to make a new js file called something like "conn.js" and moving your config files there.

It seems that the BooksArtJS.js script is using firebase. You should place script after firebase is loaded:
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
<script>
var firebaseConfig = {
apiKey: "theApiKey",
authDomain: "theAuthDomain",
databaseURL: "theDatabaseURL",
projectId: "theProjectID",
storageBucket: "theStorageBucket",
messagingSenderId: "theMessagingSenderID",
appId: "theAppID"
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="BooksArtJS.js"></script>

I think the only thing you have wrong "users/" Look:
var userDataRef = firebase.database().ref('users/');
Change it to "users"
var userDataRef = firebase.database().ref('users');
Or you can use:
var userDataRef = firebase.database().ref('users/' + data);

If you are using firebase version 9.0.2 you can use the code as below.
The HTML code.
<script>
const firebaseApp = firebase.initializeApp({
apiKey: "theApiKey",
authDomain: "theAuthDomain",
databaseURL: "theDatabaseURL",
projectId: "theProjectID",
storageBucket: "theStorageBucket",
messagingSenderId: "theMessagingSenderID",
appId: "theAppID"
});
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js"></script>

Firebase Real-time Database connection from Java -> JavaScript

I want to set up a Firebase Real-time Database connection from my Java backend to my JavaScript frontend, but the messages are not pushed to the client.
The backend Java code looks like this:
FirebaseOptions options = new FirebaseOptions.Builder()
.setServiceAccount(getServletContext().getResourceAsStream("/WEB-INF/xxx.json"))
.setDatabaseUrl("https://xxx.firebaseio.com")
.build();
FirebaseApp.initializeApp(options);
DatabaseReference ref = FirebaseDatabase
.getInstance()
.getReference();
ref.child("users").setValue("aaa");
My javascript code on the frontend looks like this:
var config = {
apiKey: "xxx",
authDomain: "xxx.firebaseapp.com",
databaseURL: "https://xxx.firebaseio.com",
storageBucket: "xxx",
messagingSenderId: "xxx"
};
firebase.initializeApp(config);
var database = firebase.database();
var myRef = firebase.database().ref("users");
myRef.on('value', function(snapshot) {
alert(5);
});
Is there something wrong with this code or why are the messages are not pushed? Am I missing something?