Use firebase auto SDK setup with Webpack

1
votes

I am creating a web app that uses Vue webpack with firebase. I would like to have my firebase credentials automatically change when i use firebase use <some_alias> on the firebase cli. In other projects, this simply meant including the /__/firebase/init.js file of firebase hosting. In this project, I am using the npm firebase library and can load in a specific firebase set of credentials with

import firebase from 'firebase'

var config = {
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...'
}
firebase.initializeApp(config)

export default {
  database: firebase.database,
  storage: firebase.storage,
  auth: firebase.auth
}

However, this does not get my credentials based on my current firebase workspace. Instead, I would like something like

import firebase from 'firebase'

const fbcli = require('firebase-tools');

export const getFirebaseInstance = () => {

  return fbcli.setup.web().then(config => {
    firebase.initializeApp(config)

    return firebase
  });
}

though synchronous. Is there any way to synchronously load in my firebase credentials?

2
firebasenpmwebpackvue.jsfirebase-hosting
Why do you want this to be synchronous? - FitzFish
If this function is not synchronous, that's probably because it reads a file internally. - FitzFish
After looking at the source code, it also do a request to some API, so doing it synchronously is by no way relevant there. - FitzFish
I want it to be synchronous because my existing code with hardcoded values is already synchronous. Making the module export a promise would require updating every occurrence of using Firebase in a very large codebase that uses it extensively. My second code also initializes the app multiple times, which is undesirable - David
also, this data is not fast changing. This seems like something that definitely should be possible in a build step of a project pipeline, as it is fairly easy to write a external script that updates this file before building. But I'd rather not add an unnecessary step to my build - David

2 Answers

1
votes

This was solved by checking window.location.host when in the prod environment and having a production config object if the host was our production hostname and reading from the values of a configuration file otherwise.

0
votes

Try using fs.writeFileSync as described in this example from a firebase blog post about reading credentials:

const fbcli = require('firebase-tools');
const fs = require('fs');

// by default, uses the current project and logged in user
fbcli.setup.web().then(config => {
  fs.writeFileSync(
    'build/initFirebase.js',
    `firebase.initializeApp(${JSON.stringify(config)});`
  );
});