setup_firebase_multiple_envs.mo

Correcter: Thomas Pucci

Prerequisites (~30min)

Foreword

You can install and setup Firebase with two different ways:

Javascript asynchronous setup

Native synchronous setup

Pros

- 👍 No Native code is required - ⏩ Setup is quick

- 🚀 In your application, you do not need to wait for firebase to instantiate each time you need it - ✅ You can use Firebase Phone Authentication

Cons

📲 You need install native libraries

This MO aims to setup Firebase with the Native synchronous setup. For the Javascript asynchronous setup read the docs here; and each time you need to call Firebase in your JS code, wait for the Firebase app initialization with onReady() method.

Steps (~30min)

It's pretty straightforward to install Firebase when you have only one environment. But what if you have multiple environments, such as dev, staging and production? Here's a step-by-step guide.

Android (~10min)

On Android, Firebase groups the different configurations in one file.

  1. Select your project

  2. Click "Add an application", choose Android

  3. Fill in the form (giving a name like Staging), click save, and close the window

  4. Repeat steps 3 to 4 for all your environments

  5. Download the google-services.json file

    1. Select one of the Android applications

    2. Click on "google-services.json"

  6. Put google-services.json in your app folder (android/app in React-Native)

  7. You might want to add google-services.json in your .gitignore

iOS (~20min)

On iOS, there is one Firebase configuration file per environment.

  1. Select your project

  2. Click "Add an application", choose iOS

  3. Fill in the form (giving a name like Staging), click save

  4. Download the configuration file GoogleService-Info.plist and rename it like GoogleService-Info.{APP_IDENTIFIER}.plist

    • Example: for tech.bam.myApp.staging, GoogleService-Info.tech.bam.myApp.staging.plist

  5. Repeat steps 3 to 5 for all your environments

  6. Duplicate your configuration file for dev environment two times and rename them like so:

    • GoogleService-Info.plist

    • GoogleService-Info..plist

  7. Put all your configuration files in the root of your iOS app folder (ios in React-Native)

  8. Make sure that your app identifier is injected in your .pbxproj. For example, if you're using Fastlane, add a update_app_identifier step like:

    update_app_identifier(
    xcodeproj: xcodeproj_full_path,
    plist_path: plist_full_path,
    app_identifier: ENV['APP_IDENTIFIER']
    )

    If you bootstrapped your project with BAM generator, use the following in the iOS build lane:

    update_app_identifier(
    xcodeproj: xcodeproj,
    plist_path: ENV['IOS_PLIST_PATH'],
    app_identifier: ENV['IOS_APP_ID']
    )
  9. In XCode, in Build phases, add a Select GoogleService-Info.plist build step before the Copy Bundle Resources step that contains:

    cp "GoogleService-Info.plist" "GoogleService-Info.plist.bak"
    cp "GoogleService-Info."$IOS_APP_ID".plist" "GoogleService-Info.plist"
  10. In XCode, in Build phases, add a Clean GoogleService-Info.plist build step after the Copy Bundle Resources step that contains:

    cp "GoogleService-Info.plist.bak" "GoogleService-Info.plist"
    rm "GoogleService-Info.plist.bak"
  11. Make sure that the GoogleService-Info.plist is listed in the resources of the Copy Bundle Resources step

  12. You might want to add GoogleService-Info.*.plist in your .gitignore

Troubleshooting

You can take a look at the commit that adds crash reporting and analytics in DailyScrum: 8005ce3

Last updated