I'm developing an App using React Native and Firebase. So, I created a separate js file to store config of firebase database and then I imported that config file into my screen files when I need to connect with firebase database.
So, I have to import that config file into each and every screen file which I need connect with my firebase database.
I want to know that, is it possible to import that config file globally?
I mean, I create a separate config file, then import it only once into a particular js file (Just for an example, let's think, import it only once into the App.js file) and then, use it in my screen files whenever I need to connect with my firebase database. But in this case, is it possible to use that config file without importing it into each and every screen file?
Hope you will understand what I want to do.
Yes, you just import the file in your main screen/ app entry point.
import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';
const config = {
apiKey: "API_KEY",
authDomain: "DOMAIN",
databaseURL: "DB_URL",
projectId: "PROJECT_ID",
storageBucket: "BUCKET",
messagingSenderId: "MSG_ID",
appId: "APP_ID"
};
app.initializeApp(config);
module.Store = {
Firebase() {
return app;
},
}
if (global) {
global.Store = module.Store;
}
In your main screen
import './Global';
all the functions in Global will be available to all screens.
Demo
Related
I am new to react and i have been trying to initialize firebase into my react app.
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
var firebaseConfig = {
apiKey: "AIzaSyCvSb1gFiUYMJA4SbsKlJvhFwJ8IFjSwkg",
authDomain: "raya-feedback.firebaseapp.com",
databaseURL: "https://raya-feedback-default-rtdb.europe-west1.firebasedatabase.app",
projectId: "raya-feedback",
storageBucket: "raya-feedback.appspot.com",
messagingSenderId: "575830594611",
appId: "1:575830594611:web:930556a8f2ccf9bf733f46"
};
firebase.initializeApp(firebaseConfig);
export {firebase};
;
This is my Firebase.js file that I am trying to import into my Body.js file and I have been getting this error "Module not found: Error: Can't resolve './Firebase.js'".
This is my file structure:
This is how I am importing it in the Body.js file
import firebase from './Firebase';
I am kind of lost and I have been trying to initialize in a multitude of different ways I see on Youtube and I am still stuck on this error.
Seeing your folder structure Firebase.js is inside src and your trying to process Firebase.js from src/body, since Firebase.js doesn't exist in body you are getting this error, you have to use
import { firebase } from '../Firebase';
So you may be encountering this error because there is some other error in your Firebase.js file.
I noticed in your code snippet above getauth needs to actually be getAuth
./ means the current directory,
../ means the parent directory (previous one)
../../ means the parent of the parent and so on.
you need to use ../Firebase
My NextJS bundle size seems to be huge (200-300 kB first load per page). I ran the bundle analyzer, and the culprit seems to be Firebase, which I use for user auth, storing data in Firestore, and calling Firebase functions. I have seen strategies to reduce bundle sizes like using dynamic imports, but I think the issue has more to do with how I am instantiating Firebase. This is what I am doing:
clientApp.ts :
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/functions";
const clientCredentials = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
if (!firebase.apps.length) {
firebase.initializeApp(clientCredentials);
}
const firebaseFunctions = firebase.functions();
firebaseFunctions.useEmulator("localhost", 5001);
export const auth = firebase.auth();
export const db = firebase.firestore();
export const functions = firebaseFunctions;
AuthContext.tsx :
import React from "react";
import firebase from "firebase/compat/app";
export const AuthContext = React.createContext<firebase.User | null>(null);
_app.tsx :
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { AuthProvider } from "../provider/AuthProvider";
function MyApp({ Component, pageProps }: AppProps) {
return (
<AuthProvider>
<div className="h-screen w-screen overflow-y-hidden">
<Component {...pageProps} />
</div>
</AuthProvider>
);
}
export default MyApp;
Then, I call const user = useContext(AuthContext); in my pages to get the user session data. To use Firestore or functions, I import db or functions from clientApp.ts. Does this make sense or is it ineficiente and contributing to the large bundle size?
I have tried dynamic imports, but either I did not implement them correctly or they are not helpful in this situation.
You're using the compatibility layer of Firebase's modular SDKs, so that you can run code that uses the older namespaced syntax. Unfortunately using this compatibility layer and syntax prevents your build tool from tree-shaking any unused code.
The solution is to use the newer modular syntax of the SDKs, as shown in the upgrade guide and in all samples in the documentation. I also recommend checking out Deep dive into the new Firebase JS SDK design and The new Firebase JS SDK is now GA on the Firebase blog.
So I started taking a look into firebase and just after defining the intialization as
import firebase from "firebase/compat"
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
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
};
const chatSupportApp = firebase.initializeApp(firebaseConfig, "my-app");
A wild warning was display!
/*It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');
ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
Typescript:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';*/
I search in many posts, including documentation and didn't really get how to initialize my app first before using any of the other imports
I found out lately that is was a bit hidden under "firebase/firebase-app"
so it get solved, as
import {initializeApp} from "firebase/firebase-app";
const firebaseConfig = {
apiKey: ...............
};
const chatSupportApp = initializeApp(firebaseConfig, "my-app");
export default chatSupportApp;
This started as a question that I search in most stack overflow posts, but since I solve it for now somehow I wanted also to share with the community in here, but also consider any other suggestion, the question will be then.
Is this approach correct? why all the documentation suggest to do it with
import { initializeApp } from 'firebase/app'; as:
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, getRedirectResult } from 'firebase/auth';
This really didn't work for me at all and I was not able to use it.
Thanks and enjoy your code!
import {initializeApp} from "firebase/firebase-app";
const firebaseConfig = {
apiKey: ...............
};
const chatSupportApp = initializeApp(firebaseConfig, "my-app");
export default chatSupportApp;
I'm trying to use firebase-ui in a VueJS project.
My api credentials is defined in a file called config.js
export default {
apiKey: "*****",
authDomain: "*****.firebaseapp.com",
databaseURL: "https://my-project.firebaseio.com",
projectId: "*****",
storageBucket: "*****",
messagingSenderId: "73482979",
appId: "1:685818581200:web:1f5ebjnfsdjnj",
measurementId: "G-BHJK6N67PZ"
};
I am the importing the config.js file in my init.js where the whole firebase setup is done:
import config from "./config";
import firebase from "firebase";
import firebaseui from "firebaseui";
import "firebase/auth";
import "firebase/firestore";
const app = firebase.initializeApp(config);
const auth = firebase.auth();
const firestore = app.firestore();
const authUi = new firebaseui.auth.AuthUI(auth); //Error is thrown at this point
export default app;
export { auth, authUi, firestore };
However the error -> Cannot read property 'auth' of undefined' is thrown and I've been unable to move past here for a few days now. I've checked the documentation (https://firebase.google.com/docs/auth/web/firebaseui#before_you_begin), everything is done correctly and even using the latest firebaseui version "firebaseui": "4.7.0" located in package.json
Any help with how I can solve this problem?
As of Firebase 9.0.0 (August 25, 2021) it should now be
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
to use the backwards compatible interface.
See https://firebase.google.com/docs/web/modular-upgrade for the full upgrade path
I got the same problem. After few hours of trying, I solve it by edit my config like :
import firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';
If your firebase version if greater than 7, you got to import from 'firebase/app' instead of 'firebase'.
And you have to import * from 'firebaseui', instead of import only firebaseui.
and my packages.json like:
"dependencies": {
"firebase": "^8.8.0-202162022140",
"firebaseui": "^4.8.1",
},
By the way, my project is using Vue3.js.
You're importing the Firebase client JS library incorrectly. The documentation for module bundlers shows:
// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"
Don't import from "firebase". Import from "firebase/app", and be sure to observe the conventions for the version of the SDK you're using.
The documentation for firebaseui might be out of date. Consider submitting your feedback using the "send feedback" button at the top of the doc page.
Not a problem/bug, but I have the following questions about the Firebase config file below:
firebaseconfig.js
import * as firebase from 'firebase';
const config = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_ID"
};
firebase.initializeApp(config);
export default firebase;
When I import firebase from this config file (firebaseconfig.js), does it run the entire firebase.js file and then import the firebase object each time, or does it just give me the firebase object at the end? If it's the first answer, then does that mean that multiple instances of firebase app get initialized? If it's the second answer, then when does the code preceding "export default firebase" get executed and not-executed?
When you require or import some javascript code, it only gets executed once, no matter how many times it's required or imported. The resulting export is essentially a singleton that's shared across all modules that uses it.