Firebase DatabaseURL - configuring firebase

问题

I'm trying to use Firebase with my react app.

I have a file with the config as follows:

import * as firebase from 'firebase';

const config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DB_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGE_ID,
}

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const database = firebase.database();
const auth = firebase.auth()

export {firebase, auth, database };

When I try this, I get an error that says:

FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include databaseURL option when calling firebase.initializeApp().

I can't understand this error because I have config included in the call to initialise the app. Config includes the database URL.

How do you initialise the database?

回答1:

You don't need that if statement around the firebase.initializeApp(config);

  import * as firebase from 'firebase';

  const config = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DB_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGE_ID,
  }

  firebase.initializeApp(config);

You shouldn't need to export these objects, once you initialise the app it should be usable within the project without exporting.

  const database = firebase.database();
  const auth = firebase.auth()

  export {firebase, auth, database };

回答2:

Don't initialize firebase more than once.

https://github.com/firebase/firebase-functions/issues/228

回答3:

Same issue here. Context: Gatsby - gatsby-node.js

For SOME reason it dsnt like my env db url. need to hardcode just that value.

    const config = {
      apiKey: process.env.GATSBY_FIREBASE_API_KEY,
      authDomain: process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
      databaseURL: "https://blabla.firebaseio.com",
      projectId: process.env.GATSBY_FIREBASE_PROJECT_ID,
      storageBucket: process.env.GATSBY_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.GATSBY_FIREBASE_MESSAGING_SENDER_ID
    }

and it worked.

cya

回答4:

Restarting the development server solves the issue, if you have just written the code and trying to compile it throws this error. So you can try to exit the batch job and again restart the server.

回答5:

I also got this uncaught error related to firebase.Atlast Finally error should be solved. Actually when we are using environment variables they should not pass in to bundle.js file which is a client side javascript file..We can use "DefinePlugin" which is a webpack plugin that should manually pass those env variables in to bundle.js file.

回答6:

Seems like your code is just fine. Just print and check process.env.FIREBASE_DATABASE_URL and its exactly same as mentioned in firebase console. (If you are using create react app, dont forget to add REACT_APP_ to all your env variables, https://create-react-app.dev/docs/adding-custom-environment-variables/)

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/storage';

const appConfiguration = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
    measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

export const session_type = firebase.auth.Auth.Persistence.LOCAL;

export const app = firebase.initializeApp(appConfiguration);
export const auth = app.auth();
export const db = app.firestore();
export const storage = app.storage();

will get the job done.

回答7:

I think it is a copy paste error :)

in .env file REACT_APP_DATABASE_URL

but i use process.env.REACT_APP_DB

Please check it , it worked fine

import firebase from 'firebase/app'
import 'firebase/database';
const config = {
    apiKey: process.env.REACT_APP_APIKEY,
    authDomain: process.env.REACT_APP_AUTHDOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PID,
    storageBucket: process.env.REACT_APP_SB,
    messagingSenderId: process.env.REACT_APP_SID,
    appId: process.env.REACT_APP_APPID,
    measurementId: process.env.REACT_APP_MID
};


firebase.initializeApp(config);
const database = firebase.database();

export { database };
export default firebase;

回答8:

In the firebase.js, when I removed the blank between databaseURL: and process.env.FIREBASE_DATABASE_URL., it worked.

const config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

回答9:

Same issue here but after putting firebaseconfig in componentDidMount() it will solved.

componentDidMount(){

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};
firebase.initializeApp(firebaseConfig);
const myitem = firebase.database().ref('items/').once('value',snapshot=>{
  console.log(snapshot.val())
})

}

来源：https://stackoverflow.com/questions/49911490/firebase-databaseurl-configuring-firebase

标签

firebase

firebase-realtime-database