CODEWITHSUNDEEP
firebasenpmwebpackvue.jsfirebase-hosting
David
David

Reputation: 787

Use firebase auto SDK setup with Webpack

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?

Upvotes: 1

Views: 477

Answers (2)

subelsky
subelsky

Reputation: 435

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)});`
  );
});

Upvotes: 0

David
David

Reputation: 787

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.

Upvotes: 1

Related Questions