I am new to Vue Js and Firebase. I want to learn firebase /firestore db connection ,data in/out but i am not getting any proper documentation or tutorial for the same.Please suggest.
I am using VUE CLI 2.
Create a src/firebaseDb.js file then add the following code to establish the real-time database connection in vue with your Firebase configurations details.
import * as firebase from 'firebase';
const 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"
}
const firebaseApp = firebase.initializeApp(firebaseConfig);
export const db = firebaseApp.firestore();
You can check this link its quite easy
https://www.positronx.io/vue-js-firebase-build-vue-crud-app-with-cloud-firestore/
i have created firebaseConfig.js file and connect to fire store.
import firebase from 'firebase/app'
require('firebase/firestore');
// Initialize Firebase
var config = {
apiKey: "AIzaSyC944Kh9T_Pcdn-kTZ6LywsIUATJBmQNTI",
authDomain: "halo-care-38f05.firebaseapp.com",
databaseURL: "https://halo-care-38f05.firebaseio.com",
projectId: "halo-care-38f05",
storageBucket: "halo-care-38f05.appspot.com",
messagingSenderId: "682838402004"
};
const firestore =firebase.initializeApp(config);
const db = firebase.firestore();
export default db;
Related
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getMessaging } from "firebase/messaging";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyA0dAgRPZLlgULgnOp2MH_3xtVbWPs03Cg",
authDomain: "u-63f99.firebaseapp.com",
projectId: "u-63f99",
storageBucket: "u-63f99.appspot.com",
messagingSenderId: "884933400988",
appId: "1:884933400988:web:0b7e0e37b0f23da236d059",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const fireStore = getFirestore(app);
const messaging = getMessaging(app);
export { auth, fireStore, messaging };
i'm getting this error, i don't know why messaging service is missing while i installed firebase SDK
your problem is probably because you're testing this on localhost (http).
if you look at the console logs you might notice beside that error something like:
code: 'messaging/unsupported-browser'
and cloud messaging only support https connections so you'd have to make your localhost run on https somehow to get it to work :)
If I use expo start, my firestore work fine in Expo Go. But when i use expo start --dev-client it stop working. I already tried using EAS using EAS Migration Guide, but the same error happen.
Here is the Error message:
#firebase/firestore:, Firestore (8.2.2): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
at node_modules/#firebase/logger/dist/index.cjs.js:98:8 in defaultLogHandler
at node_modules/#firebase/logger/dist/index.cjs.js:212:8 in Logger.prototype.error
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:60:8 in P
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:8135:20 in <global>
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:8105:8 in stream.onMessage$argument_0
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:5218:67 in Ds#constructor
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:11781:54 in <global>
#firebase/firestore:, Firestore (8.2.2): Connection, WebChannel transport errored
There is no problem with my connection, because the API in the App is still working.
is there an additional setting for EAS or expo-dev-client?
Here is how i start my firebase
class FirebaseServices {
static handleFirebaseConfig() {
var firebaseConfig = {
apiKey: 'API_KEY',
authDomain: "firebaseapp.com",
projectId: "PROJECT_ID",
storageBucket: "STORAGE",
messagingSenderId: "ID",
appId: "APP_ID",
measurementId: "ID"
};
let app;
if (firebase.apps.length === 0) {
app = firebase.initializeApp(firebaseConfig)
}
else {
app = firebase.app();
}
return app;
}} const db = FirebaseServices.handleFirebaseConfig().firestore()
I solve this using the answer from the thread, by adding experimentalForceLongPolling.
class FirebaseServices {
static handleFirebaseConfig() {
var firebaseConfig = {
apiKey: 'API_KEY',
authDomain: "firebaseapp.com",
projectId: "PROJECT_ID",
storageBucket: "STORAGE",
messagingSenderId: "ID",
appId: "APP_ID",
measurementId: "ID"
};
let app;
if (firebase.apps.length === 0) {
app = firebase.initializeApp(firebaseConfig)
firebase().firestore().settings({
experimentalForceLongPolling: true, // this line
useFetchStreams: false, // and this line
})
}
else {
app = firebase.app();
}
return app;
}
}
const db = FirebaseServices.handleFirebaseConfig().firestore()
And i already upgrade my firebase to v9, so it change to something like this
const app = initializeApp(firebaseConfig);
const firestoreDB = initializeFirestore(app, {
experimentalForceLongPolling: true,
useFetchStreams: false,
})
export const dbFs = getFirestore(app);
I m trying to fire base connectivity with react native
import * as firebase from 'firebase';
componentWillMount(){
var config = {
apiKey: "API_KEY",
authDomain: "*******-****.firebaseapp.com",
databaseURL: "https://*******-****.firebaseio.com",
projectId: "*******-****",
storageBucket: "*******-*****.appspot.com",
messagingSenderId: "************",
};
firebase.initializeApp(config);
console.log(firebase);
}
How do I solve this error?
Error:
TypeError: undefined is not a function (evaluating 'firebase.initializeApp(config)')
import it like
var firebase = require("firebase");
or
import firebase from ‘firebase’;
How could set the firebase to infinitered/ignite the best way?
I'm starting now and have several doubts however I think you should add a FirebaseConfig.js in the / Config. Right?
My file FirebaseConfig.js now.
import Config from 'react-native-config'**
const firebase = require ( 'firebase');
// Initialize Firebase
import Config from 'react-native-config'
const firebase = require('firebase');
// Initialize Firebase
const firebaseConfig = {
apiKey: Config.FIREBASE_API_KEY,
authDomain: Config.FIREBASE_AUTH_DOMAIN,
databaseURL: Config.FIREBASE_DATABASE_URL,
storageBucket: Config.FIREBASE_STORAGE_BUCKET,
messagingSenderId: Config.FIREBASE_MESSAGING_SENDER_ID
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
Wanted to try out the new firebase. However I can't get it working.
app-88ac8456cb.js:14207 Uncaught TypeError: firebase.intializeApp is not a function
I was using ES6 imports, however even if I use commonjs like in the docs, its not working.
const config = {
apiKey: "....",
authDomain: ".....firebaseapp.com",
databaseURL: "https://.....firebaseio.com",
storageBucket: ".....appspot.com",
};
let firebase = require('firebase');
let fireapp = firebase.intializeApp(config);
Installed: "firebase": "^3.0.1"
Node: 6.2.0
And using gulp with browserify
intializeApp is a typo. You want initializeApp.
If you cut and paste that from somewhere let me know and we can try and get it fixed!
This worked for me:
import 'firebase';
const config = {
apiKey: "....",
authDomain: ".....firebaseapp.com",
databaseURL: "https://.....firebaseio.com",
storageBucket: ".....appspot.com",
};
firebase.initializeApp(config);
firebase.database().ref(...)
//or
let fb = firebase.initializeApp(config);
fb.database().ref(...)