Working with Multiple Environments in iOS/React-Native using Schemes

There is always a need for multiple environments based deployments and build processes. In this fast-paced world, CI/CD process of our application should be able to cater all environments and their resources.

Problem Statement

Let’s suppose we have different flavors in our app like dev, qa, and stage and for all those instances base URLs can be different as well as bundle identifiers. Also, we can have different instances in firebase having different firebase configuration GoogleService-Info.plist files so that your remote configuration and crashlytics can be segregated. Here comes the problem, how will you define bundle identifiers for different schemes in iOS, and how will you set different googleinfo.plist files for different schemes. Stay tuned! I am going to tell you that in following simple steps

• Add New Build Configurations
  Add the new build configurations based on your needs. You will accomplish this by cloning the current Release or Debug Configuration.
  For this example we will create two configuration StagingQA copy of Debug and ProductionQA copy of Release:

• Add Schemes for your new build configuration
  If you create schemas for your application, each build configuration will be easier to handle for different bundle ids or display names or app icons. Just make sure that the schema that you created is “shared” and has the right build configuration reference in Run and Archive . There are a couple of ways to create a new schema the fastest one is option(⌥) +click on the play symbol and then duplicate the original scheme. You can name those schemas as you want.

• Change Bundle Identifier and Add Preprocessor Directive
  Now you need to go to the build settings of your target and change the bundle identifier for the newly added configuration as desired. Moreover, you can also specify preprocessor directives for your configuration so that you can use them as an if-else statement to change whatever you want

• Configure FirbaseApplication in your code
  Make sure that the Firebase is already added in your ios or react native application via pods. Follow https://rnfirebase.io/ for react-native or https://firebase.google.com/docs/ios/setup for native iOS apps. In the AppDelegate.m file where you configured your Firebase app like [FIRApp configure]; in application:didFinishLaunchingWithOptions: method. You can modify it for using different GoogleInfo.plist files provided firebase console like:

Here you can see, we have used the preprocessor directives (defined for the configuration that we have added) to use different googleinfo.plist files for different schemas.

• Run The Project
  For Native iOS, you just need to select the desired scheme from the top and run the project. For react-native, running the project for different schemes is a bit tricky.
  
  Use this command to run the project for the different scheme in react-native

react-native run-ios  — scheme “MySchemeName”  — configuration MyConfigName

Most probably, you will face a problem with bundled js files for running the project for a different scheme, like you may face No Bundle URL found error while running for the non-default scheme with a different bundle identifier. For that you can generate the js bundle file, using the following command.

react-native bundle — entry-file=’index.js’ — bundle-output=’./ios/main.jsbundle’ — dev=false — platform=’ios’ — assets-dest=’./ios’

What the above command did was, it created a js bundle as an output. So instead of using the index file which was only available to the default scheme, we can use main.jsbundle for other schemes.

You just need to drag and drop main.jsbundle in your project and make sure it’s added to the target.

That’s it.