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

Asked 17/3, 2022 at 4:25 Answered 30/1 at 16:39

javascript firebase flutter dart flutter-web

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 ?

Deianira answered 17/3, 2022 at 4:25 Comment(0)

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

Instrument answered 19/3, 2022 at 12:33 Comment(3)

Good suggestion – Deianira 19/3, 2022 at 14:43

Are these env variables in Github for example, or in the repo? – Terra 30/10, 2022 at 8:33

Do you have any link that we follow to setup this scenario ? – Funeral 20/12, 2022 at 6:35

Here is my solution to this:

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.
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

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

Cookson answered 30/1 at 16:39 Comment(0)

Recommended topics

Hot tags