Develop Reference

Web/Firebase - I cannot access the realtime database

I cannot read or write to the firebase real-time database... please help.
I have set my rules to both read and write 'true', and I've tested it in the playground.
I'm using the create-react-app boilerplate setup.
My version of the firebase is 9.6.4
Here's my firebase file
import { initializeApp } from 'firebase/app';
import { getDatabase, set, ref } from 'firebase/database';
const firebaseConfig = {
apiKey: 'AIzamGZ1LBAAtb',
authDomain: 'helpme.firebaseapp.com',
databaseURL: 'https://helpme.firebaseio.com',
projectId: 'helpme',
storageBucket: 'helpme.appt.com',
messagingSenderId: '93help1',
appId: '1:293268271119:web:d4e9e73help',
measurementId: 'helpKQLWS',
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
set(ref(db, 'chatroom'), {
name: '',
createdAt: '',
photo: '',
});

How to use environment specific firebase configs to initialize firebase app?

I have a react application with two firebase configs, one for staging environment and one for prod environment.
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxxxxxxxx"
};
const prodFirebaseConfig = {
apiKey: "-----------------------------",
authDomain: "-----------------------------",
databaseURL: "-----------------------------",
projectId: "-----------------------------",
storageBucket: "-----------------------------",
messagingSenderId: "-----------------------------",
appId: "-----------------------------",
measurementId: "-----------------------------"
}
Now, I want something like when I am deploying my app to production I should initialize my app with production config else with staging config.
// Something like this
if(env === 'prod') {
const myFirebase = firebase.initializeApp(prodFirebaseConfig );
} else {
const myFirebase = firebase.initializeApp(firebaseConfig);
}
It's like app which is running on staging environment should use staging firebase and one which is running on production should use prod firebase. I am using webpack to build files.
I am new to firebase, any help regarding best way to manage this and multiple deployments would be appreciated.
Thanks

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 functions running in development mode but not in production mode

I had planned to deploy a react js app which is built by using the firebase database. It was running smoothly in development but while setting the environment to production it stucks while loading.
Note: Firebase api-keys,auth-domain, etc. are given correctly.
This is my config.js file
const environments = {
development: {
firebase: {
apiKey: <my_api_key>,
authDomain: <my_auth_domain>,
databaseURL: <my_database_url>,
projectId: <my_project_id>,
storageBucket: <my_storage_bucket>,
messagingSenderId: <my_messaging_sender_id>
},
adminServer: {
url: <url>
}
},
production: {
firebase: {
apiKey: <my_api_key>,
authDomain: <my_auth_domain>,
databaseURL: <my_database_url>,
projectId: <my_project_id>,
storageBucket: <my_storage_bucket>,
messagingSenderId: <my_messaging_sender_id>
},
adminServer: {
url: <url>
}
}
};
const active_env = environments.production;
export default active_env;

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