Question

0

128

Views

How to use initialized Firebase in another file?

I want to separate the logic in the application and created a file for Firebase initialization and a separate file for the application logic. In the application logic file, I use firebase add to database and use set(). But there is an error in the console: set is not defined at HTMLButtonElement. How can I use firebase functions in a separate file from initialization?

//firebase.js

import {
  initializeApp
} from "https://www.gstatic.com/firebasejs/9.9.0/firebase-app.js";
import {
  getDatabase,
  ref,
  set,
  onValue,
  update,
  remove,
} from "https://www.gstatic.com/firebasejs/9.9.0/firebase-database.js";

const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

//script.js

set(ref(database, ".../"), {
  ...
})

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-11T00:56:18.891Z

You will have to use import/exports to achieve what you want.

Perhaps export whatever you wish from firebase.js:

// firebase.js
export const database = getDatabase(app);

... and import whatever you need in other files:

// script.js
import { database } from './firebase';
import { ref, set } from 'https://www.gstatic.com/firebasejs/9.9.0/firebase-database.js';

There is also the option of exporting everything from firebase.js and you will need only 1 import, but I haven't tested it yet with remote resources:

// firebase.js, option 2
export const database = getDatabase(app);
export { set, ref } from 'https://www.gstatic.com/firebasejs/9.9.0/firebase-database.js';

// script.js, option 2
import { database, set, ref } from './firebase';

Hope this helps and happy coding.