0

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 ?

TSR
  • 17,242
  • 27
  • 93
  • 197

1 Answers1

2

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
atketan
  • 169
  • 5