Develop Reference

Form button, conneted to Firebase

I want to connect a form to Firebase. How can i connect the button in Html with Firebase by using JavaScript
HTML:
<div class="form-popup" id="myForm">
<form id="add-data" class="form-container">
<button type="submit" class="btn">XXXX"</button>
</form>
In JavaScript:
form.addEventListener('submit', (e) => {
e.preventDefault();
db.collection('xxxx').add({
})

Inside ur javascript:
//Firebase configuration
var firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
// Initialize Firebase
var db = firebase.initializeApp(firebaseConfig);
//continue ur code here...
form.addEventListener('submit', (e) => {
e.preventDefault();
db.collection('xxxx').add({
})`

can't able to retrieve data from firestore

this is my code , I want to retrieve data from firestore but there is an error occur(which is given below). how do i resolve this error or any other alternative option to retrieve data?..
Error:tasks.html:201 Uncaught ReferenceError: firebase is not defined at tasks.html:201
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyD_h_EWO8z7ODYoj47CiF4hzf5qnjqE2Rc",
authDomain: "blocktask-ae24a.firebaseapp.com",
databaseURL: "https://blocktask-ae24a.firebaseio.com",
projectId: "blocktask-ae24a",
storageBucket: "blocktask-ae24a.appspot.com",
messagingSenderId: "665923751623",
appId: "1:665923751623:web:c0726bb66583506dceb8e2",
measurementId: "G-X8RKV7R4K9"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
db.collection("users").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
});
</script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-database.js"></script>
enter image description here
enter image description here

How to import firebase in service worker?

Here is my code. I do not know why I get an error. Here is the part of my code where I want to use it:
importScripts('https://www.gstatic.com/firebasejs/3.7.4/firebase.js');
var firebaseConfig = {
apiKey: xxxxxxxxxxx,
authDomain: xxxxxxxxxxxxx,
databaseURL: xxxxxxxxxxxxxxxxxx,
projectId: xxxxxxxxxxx,
storageBucket: xxxxxxxxxx,
messagingSenderId: xxxxxxxxxxxx,
appId: xxxxxxxxxxxxxxxxx
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Try This,
import firebase from 'firebase'
const config = {
apiKey: xxxxxxxxxx,
authDomain: xxxxxxxxxx,
databaseURL: xxxxxxxxxx,
projectId: xxxxxxxxxx,
storageBucket: xxxxxxxxxx,
messagingSenderId: xxxxxxxxxx
appId: xxxxxxxxxx
};
firebase.initializeApp(config);
firebase.firestore().settings({});
export default firebase;

Add web application platform to the firebase console or project from there you find config information and add it in code.

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 storage error - is not a function

Using html/JS, I am trying to write a file.
I included this on html head :
<head>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-firestore.js"></script>
Then at the end of the body I have :
//...
<script src="javascripts/main.js"></script>
<script>
var config = {
apiKey: "xxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
projectId: "xxxx",
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({timestampsInSnapshots:true});
</script>
Then on the main.js file when I try to write to storgae :
var storageRef = firebase.storage().storage.ref()('me/' + file.name);
var task=storageRef.put(file);
task.on('state_changed',
function progress(snapshot){console.log(snapshot.bytesTransferred)},
function error(err){},
function complete(){});
I get this error on the console :
firebase.storage is not a function
EDIT:
Tried again and got same error with :
// Create a root reference
var storageRef = firebase.storage().ref();
// Create a reference to 'images/mountains.jpg'
var finalRef = storageRef.child('me/' + file.name);
finalRef.put(file).then(function(snapshot){
console.log('uploading');
});

you need to add this also:
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-storage.js"></script>
to be able to use firebase storage api.
Also change this:
var storageRef = firebase.storage().storage.ref()('me/' + file.name);
Into this:
var storageRef = firebase.storage().ref('me/' + file.name);
Check this for more info:
https://firebase.google.com/docs/storage/web/create-reference

change you script main.js position like this
<script>
var config = {
apiKey: "xxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
projectId: "xxxx",
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({timestampsInSnapshots:true});
</script>
//to here
<script src="javascripts/main.js"></script>

Check whether your firebase import is correct. It won't work if you imported it incorrectly.
It should be like this
import * as firebase from "firebase/app";
Not this
import * as firebase from "firebase";