Flutter web flavor

Question

I have a Flutter web app that uses firebase and I have two firebase projects(dev and prod). I'll like to set up Flavors for this project(just web no mobile).

In mobile, I can use different GoogleService-Info.plist or google-services.json files for either flavor but I could not find anyway to do this on the web app as the configuration is done in the index.html file. Is there any way to do this? Maybe have different HTML files and specify which of them to be bundled while running the app?

Thanks.

Answer 1

You can use Firebase SDK auto-configuration. By relying on the reserved Hosting URL, you can deploy the same code to multiple Firebase projects.

On each of your Firebase projects, go to Project Overview -> Project settings. See here

Under "Your apps" select your web app. If you haven't, link your web app to a firebase hosting site.

In Firebase SDK snippet, select the automatic option. See here

Replace your current firebase configuration on index.html to:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.21.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.21.0/firebase-analytics.js"></script>

<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>

That's it, this will allow you to use the same index.html for different flavors.

More Info here