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
Related
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: '',
});
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();
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.
// 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
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;