Cannot initialize Firebase Storage when deployed to Firebase Hosting - javascript

I have an app that is hosted on firebase hosting that works when running on my local server, but when I deploy it, firebase storage fails to initialize.
<script src="node_modules/firebase/firebase-app.js"></script>
<script src="node_modules/firebase/firebase-auth.js"></script>
<script src="node_modules/firebase/firebase-firestore.js"></script>
<script src="node_modules/firebase/firebase-functions.js"></script>
<script src="node_modules/firebase/firebase-storage.js"></script>
<script>
var config = {
apiKey: "<my key>",
authDomain: "<my domain>",
databaseURL: "<my url>",
projectId: "<my id>",
storageBucket: "<my bucket>",
messagingSenderId: "<my id>"
};
firebase.initializeApp(config);
var db = firebase.firestore(); <-- this works
var storage = firebase.storage(); <-- this doesn't
</script>
I am using the other services too without problem, and there is no differences in functionality between the deployed version and the local version except for that storage line.
when calling it from the console i get
firebase-storage.js:1
Uncaught TypeError: Cannot read property 'path' of null
at Function.t.makeFromBucketSpec (firebase-storage.js:1)
at Function.t.extractBucket_ (firebase-storage.js:1)
at new t (firebase-storage.js:1)
at new t (firebase-storage.js:1)
at Object.storage (firebase-storage.js:1)
at t._getService (firebase-app.js:1)
at t.ur.(/anonymous function) [as storage] (<my url>/esm-bundled/node_modules/firebase/firebase-app.js:1:34079)
at Object.f [as storage] (firebase-app.js:1)
at <anonymous>:1:10

I was able to solve this by using the hosted version of the library
<script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-storage.js"></script>

Related

How to get enviromental variable from Netlify UI to deployed Vite app

I deployed my React/Vite app. I'm using enviromental variables to configure Firebase.
const firebaseConfig = {
apiKey: import.meta.env.production.VITE_APP_FIREBASE_API_KEY,
authDomain: import.meta.env.production.VITE_APP_FIREBASE_AUTH_DOMAIN,
projectId: import.meta.env.production.VITE_APP_FIREBASE_PROJECT_ID,
storageBucket: import.meta.env.production.VITE_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.production.VITE_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: import.meta.env.production.VITE_APP_FIREBASE_APP_ID
}
I set up enviromental variables in the netify website settings. Here is a screenshot of env variables in settings.
Even so, it looks like the envs are undefined. I'm getting this error on deployed site:
Uncaught TypeError: Cannot read properties of undefined (reading 'VITE_APP_FIREBASE_API_KEY')
I checked if it's really in production mode by logging in import.meta.env.MODE console. It is.
Any ideas how to get enviromental variables?
I don't understand why you added "production" before the environment variables keys?
The correct thing would not be:
const firebaseConfig = {
apiKey: import.meta.env.VITE_APP_FIREBASE_API_KEY,
authDomain: import.meta.env.VITE_APP_FIREBASE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_APP_FIREBASE_PROJECT_ID,
storageBucket: import.meta.env.VITE_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_APP_FIREBASE_APP_ID
}

React: Firebase Config File Doesn't Work With Environment Variables

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
measurementId: process.env.MEASUREMENT_ID,
};
const app = initializeApp(firebaseConfig);
const auth = getAuth();
const db = getFirestore();
// rest of my code, being primarily functions such as `signInWithGoogle` is written here below but are irrelevant to this question
When I originally had all of the variables under firebaseConfig in their string forms, this worked. However, when I switched them out for these environment variables it no longer did and showed the following error:
The thing is, that I've used this same .env file for my MongoDB config file as such:
const uri = process.env.DB_URI;
This is what my .env file looks like:
DB_URI="[censored]"
API_KEY="[censored]"
AUTH_DOMAIN="[censored]"
PROJECT_ID="[censored]"
STORAGE_BUCKET="[censored]"
MESSAGE_SENDER_ID="[censored]"
APP_ID="[censored]"
MEASUREMENT_ID="[censored]"
My application with Firebase authentication was working until I wanted to make it so none of my files had to be gitignored by replacing strings in the firebase config file I have with these environment variables

How to support multiple Firebase environment in Javascript Web especially in Flutter

To support a single environment, the following code works fine in my flutter web index.html
<html>
...
<body>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<!-- Firebase Configuration -->
<script>
var firebaseConfig = {
apiKey: "...",
authDomain: "[YOUR_PROJECT].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
projectId: "[YOUR_PROJECT]",
storageBucket: "[YOUR_PROJECT].appspot.com",
messagingSenderId: "...",
appId: "1:...:web:...",
measurementId: "G-...",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
However, how to support multiple Firebase environments in Flutter Web?
For example, along with the above, I want to have two additional Environment named dev and preprod
For Dev, a different configuration:
var firebaseConfigDev = {
apiKey: "...",
authDomain: "[YOUR_PROJECT_DEV].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT_DEV].firebaseio.com",
projectId: "[YOUR_PROJECT_DEV]",
storageBucket: "[YOUR_PROJECT_DEV].appspot.com",
messagingSenderId: "...",
appId: "1:...:web:...",
measurementId: "G-...",
};
And for preprod, another configuration
var firebaseConfigPreprod = {
apiKey: "...",
authDomain: "[YOUR_PROJECT_PREPROD].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT_PREPROD].firebaseio.com",
projectId: "[YOUR_PROJECT_PREPROD]",
storageBucket: "[YOUR_PROJECT_PREPROD].appspot.com",
messagingSenderId: "...",
appId: "1:...:web:...",
measurementId: "G-...",
};
I searched everywhere on the internet and StackOverflow and could not find an example of how to achieve this. I however found it on Android, it is easy as How to maintain two google-services.json, production and debug and using build flavors.
But in flutter web, what is the equivalent of build flavors and google service json ?
As of now, unlike for mobile applications, there seems to be no easy way to achieve this in Flutter web.
Although as an alternative, you can achieve this through your web build pipeline.
Save index.html as a template (ex. index.html.template) in your project with all firebase configs defined as environment variables, and replace these variables to generate the actual index.html during the build
Populate these environment variables in the pipeline based on what environment the build is targeting (dev, preprod, prod, etc.), which in turn would make the respective index file
This way you can achieve dynamic builds with different Firebase configs

Firebase Storage in Web Application: storage.useEmulator is not a function

In my local web application development environment the web application is accessing the Firestore emulator correctly, but not the Storage emulator. Instead it accesses the production storage.
I load the module from http://localhost:5000/__/firebase/8.3.0/firebase-storage.js
I have tried this from https://firebase.google.com/docs/emulator-suite/connect_storage#web-v8:
var storage = firebase.storage();
storage.useEmulator("localhost", 9199);
But the useEmulator function does not exist. How can this be?
The function storage.useEmulator was introduced in a later version of firebase.
Have you configured your connection before opening it?
var firebaseConfig = {
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
storageBucket: '<your-storage-bucket-url>'
};
firebase.initializeApp(firebaseConfig);
And, I don't have direct xperience about it, but have you tried this way?
firebase.storage.useEmulator('localhost', xxxx)
And beware this could be a work in progress stuff: try this cmd:
firebase --open-sesame storageemulator

upload file on firebase web using node js throws error firebase.storage is not a function

i created a web app using node js express and firebase. i created a form which will upload a file to firebase but when i tried what's on the guide it gives an error..
var firebase = require('firebase');
var config = {
apiKey: "----------------------------------",
authDomain: "----------------------------------",
databaseURL: "-",----------------------------------
projectId: "---------",
storageBucket: "----------------",
messagingSenderId: "---------------"
};
firebase.initializeApp(config);
module.exports = firebase;
// Get a reference to the storage service, which is used to create references in your storage bucket
var storage = firebase.storage();
// Create a storage reference from our storage service
var storageRef = storage.ref();
this is the set up i use for using firebase on node js.
var storage = firebase.storage();
^
TypeError: firebase.storage is not a function
and this is the error i receive from the console. after searching they said that i need to use google-cloud npm. so my question is if i install google-cloud on my node do i need to create an account on google cloud platform?..
Node js google-cloud package is used instead of firebase to store files, videos etc. Right now firebase storage is not compatible with Nodejs that's why you are getting that error^, yoou can do something like this to use google-cloud:-
npm install --save google-cloud
And then to use storage in your project this is a sample code:-
const gcloud = require('google-cloud');
const storage = gcloud.storage({
projectId: //project id here,
keyFilename: //service account credentials here,
});
const storagebucket = storage.bucket('projectID.appspot.com');
This link here has the complete guide how to do google-cloud stuff.
https://medium.com/#stardusteric/nodejs-with-firebase-storage-c6ddcf131ceb

Categories