Hello Developers, We are using react-native-config to manage multiple environments in Project like Development, Staging and Production. If we have requirements to manage different firebase for Development, Staging and Production then? Today we will see how to manage multiple project environments with multiple firebase GoogleServices-Info.plist and google-service.json files.
Highlights of article -
- Create React Native Application
- Add Development, Staging, Production Target
- Add Development, Staging, Production Schema
- Link each Schema with each Target
- Add Build, Set Pre-Actions and Select Run Target Executable
- Place Development, Staging and Production GoogleService-Info.plist file
- Link each GoogleService-Info.plist file with each Target
- Update .podfile to share dependency with Development, Staging and Production Target
- SetUp various environment in Android
- SetUp Product Flavor
- Place Development, Staging and Production google-services.json file in Android Application
Learn more about - Securing React Native Application
Learn more about - Top 10 React Tricks Every Developer Should Use
So, first let’s create React Native Application, and setup application icons & all. You can create new application using -
npx react-native init Shopping
Now, follow the steps, we will setup for iOS & Android.
Step - 1
Open iOS Project and Go to Target
Step - 2
Right Click on it and press duplicate, It will prompt with three option Duplicate and Transition to iPad, Duplicate Only and Cancel.
Step - 3
Press on Duplicate Only
Step - 4
Now rename Target name to Shopping-Development
Step - 5
Same way create another Target and rename it to Shopping-Staging
Step - 6
Now, it’s time to create Multiple Project Schema, Shopping, Shopping-Staging, Shopping-Development, Click on Project Schema and Press on Manage Schemas
Step - 7
Select your Project Schema (Shopping) and click on Settings Icon at bottom, and it will prompt with options, (Duplicate, Import, Export, etc),
Step - 8
Pressed on Duplicate, Now, it will create a new schema for you, Now Rename schema with Shopping-Development, same way duplicate and create schema with Shopping-Staging.
Step - 9
So, Finally we have three schema, Shopping, Shopping-Development, Shopping-Staging
Step - 10
So, Now we have three Schema and three Targets
Step - 11
Now, it's time to assign a target to each schema. We have three targets and three schemas, so we will assign one target to each schema. So, first select Shopping Schema, press on Edit Schema option.
Step - 12
Go to the Build Section from left, and make sure you have only one Targets Shopping. Also make sure for that target you have selected all Checkmark mentions on the screenshot. Also you should select only one target according to your requirement. If you can’t find it then click on the plus icon at bottom.
Step - 13
Which will prompt like this, select your Target according to your schema. So here, We are selecting Shopping.
Step - 14
Now, Go To Run Section - and choose Shopping.app as executable.
Step - 15
Now, To set react-native config env for Production environment, click on Pre-actions and add New Run-Script Action.
Step - 16
Copy the script code as shown in Screenshot, for Shopping Schema, we are referring env.production, same way for Shopping-Staging we refer env.staging and for Shopping-Development we refer env.development. So, Do this for Staging Schema, and Development Schema. Using this process we have assigned Target to our schema,
Step - 17
Now, it's time to assign GoogleService-Info.plist to our Target. We have three targets and we have three different firebase accounts each for Development, Staging, production. So you required three GoogleService-Info.plist, So, It’s time to add multiple GoogleSevices-Info.plist according to Environment. So, Create GoogleServices folder inside Shopping (Project) folder,
Step - 18
Create Development, Staging, Production folder inside GoogleServices folder according to your environment name and add GoogleService-Info.plist file into it.
Step - 19
While adding GoogleService-Info.plist for Production make sure you have select (checkmark) that target, in our case we select (checkmark) only Shopping Target. It means that .plist file specific to Shopping Target.
Step - 20
Same way while adding GoogleService-Info.plist for Staging, you only select (checkmark) only Shopping-Staging Target only.
Step - 21
If you have used custom Run Script and all, then you have to make sure all the scripts which are in Shopping (Main Target), might not be there for Shopping-Development, Shopping-Staging Target. Here, I have few scripts which are in Shopping Target, you can see [CP] Copy Pods Resources. Reason behind the [CP] scripts not copy because of while you do npx pod-install, at that time it will install / execute only Shopping Target’s [CP] Scripts.
Step - 22
So, the problem is with .podfile, if you see the pod file we have initially installed all dependencies for Shopping target, which we need to share with Shopping-Development, Shopping-Staging Target as well. So let’s modify our .podfile according.
Step - 23
For Android go to android/app/build.gradle and add three environment, Development, Staging, Production as shown in Screenshot.
Step - 24
In android/app/build.gradle inside android ... defaultConfig add flavorDimensions "default" as shown in Screenshot
Step - 25
Now, add productFlavors as mention in screenshot, you can specify different applicationId according to your Target/Environment.
Step - 26
Now, it's time to add multiple google-services.json according to Development, Staging and Production environment as shown in Screenshot.
That's it, now you can run your React Native Application with different Schema and it will take environment (URL/Constants), GoogleService-Info.plist and google-services.json according to your target.
Thanks for reading Blog!
KPITENG | DIGITAL TRANSFORMATION
www.kpiteng.com/blogs | hello@kpiteng.com
Connect | Follow Us On - Linkedin | [Facebook]
Top comments (1)
Can you show me (android)
🙏🏽