How to add firebase database to javascript? - 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>

Related

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 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.

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";

Firebase data retrieval to web

// Initialize Firebase
var config = {
apiKey: "AIzaSyBz13eirmEOGD1uXOZwf6tKGnEsjfwsUFo",
authDomain: "platformtechproject.firebaseapp.com",
databaseURL: "https://platformtechproject.firebaseio.com",
projectId: "platformtechproject",
storageBucket: "platformtechproject.appspot.com",
messagingSenderId: "1065758005439"
};
firebase.initializeApp(config);
var database = firebase.database();
ref msgs clllection
var msgRef = firebase.database().ref('survey');
I am trying to connect to firebase, but I continue getting these errors on chrome console failing to connect to firebase:
Chrome console error
This is because you did not write:
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
in the <head>...</head>
You have to write it to be able to use the firebase sdk in your project.
more info here:
https://firebase.google.com/docs/web/setup

no alert after firebase called

I can't show alert after called firebase
<script>
var config = {
apiKey: "AIzaSyCnmZWNwp3CfjXDcDL5MADIej6GwvxWEtQ",
authDomain: "dsmweb-ba185.firebaseapp.com",
databaseURL: "https://dsmweb-ba185.firebaseio.com",
storageBucket: "dsmweb-ba185.appspot.com",
};
firebase.initializeApp(config);
alert('asdf');
</script>
This is my source code, and what is wrong?
something happend in " firebase.initializeApp(config); "

Categories

Resources