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
}
Related
// 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
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
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
Hi I have set up Javascript API for firebase push notifications on my website. I have created firebase-messaging-sw.js file in my website directory.
In the documentation it indicates that in the service worker the application has to be initialized with the burned credentials.
firebase.initializeApp({
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "" })
const messaging = firebase.messaging();
Can the credentials be passed as a parameter to the service worker or how can I handle dynamic credentials?
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>