Flutter Firebase — setting different deployment targets for iOS, Android, and Web

Question

The problem is how to set up your Flutter environment so you can target separate firebase instances (say for dev, prod, staging, ...)

Answer 1

In this example, I have three firebase instances (aka "firebase projects") called dev , staging , and prod .

Using This Solution

iOS and Android

For iOS and Android , to target these firebase instances I use Flutter flavors:

> flutter run --flavor dev

> flutter run --flavor staging

> flutter run --flavor prod

Web (Local web hosting server)

For the Web , to target these firebase instances I use firebase deploy targets:

> firebase use dev
> flutter build web
> firebase serve

> firebase use staging
> flutter build web
> firebase serve

> firebase use prod
> flutter build web
> firebase serve

CTL-C to stop the local web server

Web (Firebase web hosting server)

For the Web , to target these firebase instances I use firebase deploy targets:

> firebase use dev
> flutter build web
> firebase deploy

> firebase use staging
> flutter build web
> firebase deploy

> firebase use prod
> flutter build web
> firebase deploy

---

Setting Things Up

Assumptions

• You have already set up your Firebase instances and are comfortable navigating around the Firebase Console .
• You have set up your firebase public build target folder to build/web for web hosting.

Setting Up Flutter Flavors for iOS and Android

See the following for implementation of Flutter Flavors:

• Build flavors in Flutter (Android and iOS) with different Firebase projects per flavor As software platforms often change, if you run into problems with these instructions, please look at the comments on the article. Often readers have provided very useful solutions to new and common problems.

Setting Up Deploy Targets for the Web

Configuring Your Flutter Project for the Web

Flutter for the Web is now on the Flutter stable channel. Make sure you have the current version of Flutter:

> flutter channel stable
> flutter upgrade

Configure the web folder in your project:

> flutter config --enable-web
> flutter create .

Check the that the Web is configured to Flutter:

> flutter doctor

[✓] Flutter: is fully installed. (Channel stable, 1.27.0, on macOS 11.2.1 20D74 darwin-x64, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2020.3.2)
[✓] Connected device (3 available)

• No issues found!

Also check the devices:

> flutter devices
1 connected device:

Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150

Configuring the Firebase Deploy Targets

List the firebase projects you have access to when you entered > firebase login .

> firebase projects:list

You can assign a project alias (in my case, dev , staging , and prod ) to each firebase instance by entering:

> firebase use --add
? Which project do you want to add?
my-great-app
my-great-app-staging
my-great-app-development

It will ask you which firebase instance you want to add an alias for: Use the arrow keys to highlight your selection then press Enter to select it.

? Which project do you want to add? my-great-app
? What alias do you want to use for this project? (e.g. staging) prod

In this case, I gave the alias prod by the firebase instance my-great-app .

To see which firebase instances you can switch between using firebase use just enter:

> firebase use

Adding Firebase Config details to your project

Some StackOverflow answers tell you to put your Firebase config into your projects web/index.html file. This isn't necessary. Rather than doing that, you just switch between firebase configs using firebase use prod , firebase use staging , firebase use prod from the Terminal command line to make each instance of firebase " active ". When you do flutter build web , the build process automatically picks up the the correct firebase config from the active firebase instance.

How does this magic happen? Click here for the gory details on Adding SDKs Using Reserved URLs .

1. In each of your firebase instances, ensure that you have a web app </> for each instance.
2. Set the SDK Snippet to ' Automatic'

3. Copy the code snippet from one of your firebase instances and add it to your web/index.html file. Your <body> tag should look something like this, depending on which firebase SDKs you are using in your Flutter app:

<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/8.2.10/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/8.2.10/firebase-analytics.js"></script>
<script src="/__/firebase/8.2.10/firebase-auth.js"></script>
<script src="/__/firebase/8.2.10/firebase-firestore.js"></script>
<script src="/__/firebase/8.2.10/firebase-storage.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
    
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
       
    
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js?v=1367769473');
      });
    }
  </script>
  <script src="main.dart.js" type='application/javascript"></script>

Answer 2

Dynamically Place Firebase Config Files Depending On Target

This github repository contains a link to setup instructions, and scripts which will automatically place your iOS and Android Firebase config files into the appropriate places on demand, depending on which project you want to deploy to.

Repo: https://github.com/deimantasa/flutter-firebase-environment-generator-advanced

Guide: https://aurimas-deimantas.medium.com/cicd-p2-multiple-firebase-environments-in-flutter-deb919cfac2b