'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 ?

Solution 1:^[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	atketan

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

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]