CICD P1. Multiple Firebase Environments in Flutter

This will be first part of multi-part series, which will introduce ultimate CICD configuration for Flutter. I’ll split it to individual small tutorials as they standalone can contribute to many developers already.

First of all, we need to make sure we know how to handle multiple Firebase Environments.
Currently there are few ways, as having flavours or dart env config setup — however these are rather complicated to set-up on iOS side. After my question being not answered, I decided to do something about it myself.

Different Firebase environments made easy

Long story short, I’ve written a Node script, which generates correct environment before app build. All you need to do is:

1. Create a new folder rootApp/tools/firebase-environment-generator
2. Clone repo contents to this folder. Main ts file should appear in rootApp/tools/firebase-environment-generator/firebase-environment-generator.ts
3. Add your plist and/or json in the same path with correct suffix ( dev or prod ). Production files will have a suffix -prod , Development files will have a suffix -dev .
   You can get json file from Firebase while setting up an Android app.
   You can get plist file from Firebase while setting up an iOS app.

End result file structure should look like this:

What script does, is simply detects, which environment you want to build you app in and copies correct file into correct folder within android or ios folders.

For example, you run node firebase-environment-generator dev .

1. It locates google-services-dev.json and places it to ../android/app path naming google-services.json .
2. It locates GoogleService-Info-dev.plist and places it to ../ios/Runner path naming GoogleService-Info.plist .

That’s all it is.

To run the script, simply write node firebase-environment-generator dev or node firebase-environment-generator prod while you are in the correct path rootApp/tools/firebase-environment-generator .

Be aware that before generating new environment files — flutter clean needs to be run. Seems that iOS caches config files therefore it’s not always reflecting the change. However after flutter clean it works 100% of time.

BONUS

If you’d like to forget about these commands, you can configure your IDE for such purpose. I’ll show how to do it in Android Studio.

Find Edit Configuration and go inside

Add new Shell Script

Name the script appropriately and fill in required data:

1. Script path — path where your node is installed;
2. Script options — firebase-environment-generator dev or prod;
3. Working directory— your directory where script is located.

And click yes.

Now you have a shell script which you can run at any time.

Run it and you will see that everything went well! (Or not :))

You can improve the script to add pre-build flutter clean or even put script within same build as building the app. I’ll leave it up to you.

I hope this tutorial will help you to leverage multiple environments in Firebase.

In the next tutorial I’ll move one step further — how to build an app within multiple environments with different bundle ids. So that prod and dev app can be on the same mobile device.

Stay tuned!