React Native

Setup Firebase on iOS/Android with multiple environments

It's pretty straightforward to install Firebase when you have only one environment. But what if you have multiple environments, such as ++code class="highlighter-rouge" style="font-weight: 300; text-align: justify; color: #666666;">dev++/code>, ++code class="highlighter-rouge" style="font-weight: 300; text-align: justify; color: #666666;">staging++/code> and ++code class="highlighter-rouge" style="font-weight: 300; text-align: justify; color: #666666;">production++/code>? Here's a step-by-step guide.

Managing Firebase configurations becomes more complex when you have multiple environments for your application, such as development, staging, and production. Each environment requires specific configuration files and settings to ensure seamless integration with Firebase. In this step-by-step guide, we will walk you through the process of installing Firebase for different environments on both Android and iOS platforms. By following these instructions, you'll be able to set up Firebase effortlessly and efficiently for each environment, enabling smooth functioning of your application across various stages of development.

Android

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

  1. Go to the Firebase console
  2. Select your project
  3. Click "Add an application", choose Android
  4. Fill in the form (giving a name like ++code class="highlighter-rouge">Staging++/code>), click save, and close the window
  5. Repeat steps 3 to 4 for all your environments
  6. Download the ++code class="highlighter-rouge">google-services.json++/code> file
  7. Select one of the Android applications
  8. Click on "google-services.json"
  9. Put ++code class="highlighter-rouge">google-services.json++/code> in your ++code class="highlighter-rouge">app++/code> folder (++code class="highlighter-rouge">android/app++/code> in React-Native)
  10. You might want to add ++code class="highlighter-rouge">google-services.json++/code> in your ++code class="highlighter-rouge">.gitignore++/code>
bam tech firebase ios/android

iOS

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

  1. Go to the Firebase console
  2. Select your project
  3. Click "Add an application", choose iOS
  4. Fill in the form (giving a name like ++code class="highlighter-rouge">Staging++/code>), click save
  5. Download the configuration file ++code class="highlighter-rouge">GoogleService-Info.plist++/code> and rename it like ++code class="highlighter-rouge">GoogleService-Info.{APP_IDENTIFIER}.plist++/code>
  6. Example: for ++code class="highlighter-rouge">tech.bam.myApp.staging++/code>, ++code class="highlighter-rouge">GoogleService-Info.tech.bam.myApp.staging.plist++/code>
  7. Repeat steps 3 to 5 for all your environments
  8. Put your configuration files in the root of your iOS app folder (++code class="highlighter-rouge">ios++/code> in React-Native)
  9. Make sure that your app identifier is injected in your ++code class="highlighter-rouge">.pbxproj++/code>. For example, if you're using Fastlane, add a ++code class="highlighter-rouge">update_app_identifier++/code> step like:++pre>++code>++code>update_app_identifier(
     xcodeproj: xcodeproj_full_path,
     plist_path: plist_full_path,
     app_identifier: ENV['APP_IDENTIFIER']
    )
    ++/code>++/pre>
  10. In XCode, in ++code class="highlighter-rouge">Build phases++/code>, add a ++code class="highlighter-rouge">Select GoogleService-Info.plist++/code> build step before the ++code class="highlighter-rouge">Copy Bundle Resources++/code> step that contains:++pre>++code>++code>cp "GoogleService-Info."$PRODUCT_BUNDLE_IDENTIFIER".plist" "GoogleService-Info.plist"
    ++/code>++/pre>
  11. In XCode, in ++code class="highlighter-rouge">Build phases++/code>, add a ++code class="highlighter-rouge">Clean GoogleService-Info.plist++/code> build step after the ++code class="highlighter-rouge">Copy Bundle Resources++/code> step that contains:++pre>++code>++code>rm "GoogleService-Info.plist"
    ++/code>++/pre>
  12. Make sure that the ++code class="highlighter-rouge">GoogleService-Info.plist++/code> is listed in the resources of the ++code class="highlighter-rouge">Copy Bundle Resources++/code> step
  13. You might want to add ++code class="highlighter-rouge">GoogleService-Info.*.plist++/code> in your ++code class="highlighter-rouge">.gitignore++/code>
bam tech firebase ios/android

Conclusion

Configuring Firebase for multiple environments is crucial for maintaining a well-structured and scalable development process. By following the outlined steps in this guide, you can easily set up Firebase on both Android and iOS platforms, ensuring proper integration and functionality for each environment. Remember to organize your configuration files appropriately and make necessary adjustments to your project settings to accommodate different environments. With Firebase successfully installed for each stage of development, you can now proceed with confidence, knowing that your application is equipped with the power of Firebase across all environments.

Développeur mobile ?

Rejoins nos équipes