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.