CODEWITHSUNDEEP
javascriptfirebaseflutterdartflutter-web
TSR
TSR

Reputation: 20446

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 ?

Upvotes: 0

Views: 1198

Answers (2)

Jonas
Jonas

Reputation: 7885

Here is my solution to this:

  1. Create separate index.html files for your environments, for example, index.html.pord and index.html.dev. Write whatever in your index.html files to configure your environment.

  2. Create a bash script index-environment.sh in your project root and copy the following code:

    if [ "$#" -ne 1 ]; then echo "Usage: $0 <copy_filename>" exit 1 fi

    filename=$1 copy_filename="index.html"

    cp "./web/$filename" "./web/$copy_filename" echo "File copied from $filename to $copy_filename"

This code takes a takes any file and creates a copy of it with the name index.html

  1. Before you run flutter build ... you run either bash index-environment.sh index.html.dev or bash index-environment.sh index.html.prod to generate an index.html you want to use for your current build.

You can use this in your deployment pipeline. I, for example, deploy my flutter app on vercel, where I have separate projects for prod and dev. I use the build command bash index-environment.sh index.html.dev && flutter build web to build my web app with the correct index.html

Upvotes: 0

atketan
atketan

Reputation: 169

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

Upvotes: 2

Related Questions