Part 3 - Configure Bundle Ids, App Name and Google Service Files
It is Part 3 in a series of the setup guide to configure the Staging and Production environments in the application.
Now, let us focus on setting up the android and iOS apps to have separate bundle ids, separate app name and Google Service files.
3.1 Android Setup
Setting up the app ids for the android has been covered up in the Part 1.
Our next step would be to select the correct Google-Services.json for the currently selected build variant. To do so, we would have to make 2 folders under the path android/app/src/ with the names staging and production. Under these 2 folders, place your respective Google-Services.json files for the staging and production variants.
Now, your android/app/src/ should look like:
The idea behind having these 2 folders is to have the respective configurations for different app flavours from the the android/app/src/.
A fun fact about this approach is that we can even define our respective splash screens, app icons etc depending upon the currently selected build flavour, e.g.:
That’s it. The respective Google-Services.json and other configurations inside the res folder will be chosen automatically depending upon the selected build variant(flavour).
3.2 iOS Setup
The iOS setup includes some extra steps for the configuration. So, bear with me. We will be covering up each and every aspect of the story.
3.2.1 Adding new configurations
Select your project under PROJECT in XCode and in the Info tab, search for Configurations. In there you will have two default configurations — Debug and Release. Click on the “+” button and duplicate both, name them Staging.Debug and Staging.Release respectively. Do the same for the Production configuration as well from the default Debug and Release configurations.
Now, your configurations should look like:
Now, we have to connect the respective configuration with the respective scheme. Let us take an example for the staging environment.
- In the Xcode menu, go to Product > Scheme > Edit Scheme
- Change the Build Configuration of Run, Test and Analyze to use the Staging.Debug, which we have created earlier. Change the Build Configuration for Profile and Archive to be Staging.Release.
After updating all of the Build Configurations, we would have:
Repeat the same steps for the Production configurations.
3.2.2 Making different Display Names for different Build types
Select your Target and in the Build Settings tab, search for Product Name. For both Staging.Debug and Staging.Release, change the product name to ConfigDemo-Staging.
In the project’s info.plist, update the value of the Bundle display name to be $(PRODUCT_NAME)
3.2.3 Configuring different bundle ids for each configuration
To have different bundle ids for different schemes and build types, search for the “Product bundle identifier” in the “Build Settings” and update the desired bundle ids for different build configurations:
For each configuration you’ve added, also add the following corresponding entries to your Pod File:
#Replace configdemo with your project nameproject 'configdemo', 'Debug' => :debug, 'Release' => :release, 'Production.Debug' => :debug, 'Production.Release' => :release, 'Staging.Debug' => :debug, 'Staging.Release' => :release
If you are in React-Native version >= 0.63.0 and <0.69.0 with flipper enabled, then replace use_flipper! with the following configurations to enable flipper for the different configurations:
use_flipper!(configurations: ['Debug', 'Production.Debug', 'Staging.Debug'])3.2.4 Adding different GoogleService-Info.plist for different configurations
Inside the ios/{project_name} i.e. ios/configdemo in our case, of your project, create a folder with the name Firebase. Name the GoogleService-Info.plist files in a format GoogleService-Info.{your_bundle_id}.plist. For example, in our case, for staging and production configurations, the file names could be GoogleService-Info.com.configdemo.staging.plist and GoogleService-Info.com.configdemo.production.plist. Now place these files inside the Firebase directory. So, your ios directory should look like this:
Select your Target and in the Build Settings tab, click on the + button and select Add User-Defined Settings to create a new user setting, give it the name GOOGLE_SERVICE_INFO_PLIST_NAME. Add the respective name of the GoogleService-Info.plist file for the respective build type. After entering the names, your user defined GOOGLE_SERVICE_INFO_PLIST_NAME variable should look like:
Now, go to the Build Phase tab and from the “+” icon, select New Run Script Phase. From here, we will be adding a new script to choose the Right GOOGLE_SERVICE_INFO_PLIST_NAME for our selected build scheme.
A new Run Script will appear at the bottom of the list.
You can rename it for some relevant name by double clicking on the name Run Script and name it like Copy Google Service Plist. Drag this script to come right below to the Link Binary With Libraries so as to run it before Copy Bundle Resources.
Inside this Run Script, put the below script:
# Type a script or drag a script file from your workspace to insert its path.GOOGLE_SERVICE_INFO_PLIST_FROM="${PROJECT_DIR}/configdemo/Firebase/${GOOGLE_SERVICE_INFO_PLIST_NAME}"BUILD_APP_DIR="${BUILT_PRODUCTS_DIR}/${FULL_PRODUCT_NAME}"GOOGLE_SERVICE_INFO_PLIST_TO="${BUILD_APP_DIR}/GoogleService-Info.plist"cp "${GOOGLE_SERVICE_INFO_PLIST_FROM}" "${GOOGLE_SERVICE_INFO_PLIST_TO}"
Replace the configdemo with the name of your project. This script will copy the respective Google Service Plist file for the selected Build Type to the build directory at the compile time.
So, that’s it. Now we have everything setup for our different configurations.
Thanks Guys!
I hope you will find this guide useful and it may helped you to configure your app for production and staging environments. If you have any questions or suggestions, please leave a comment below. Thank you very much for reading.
