Today, I am going to make your life as a React Native developer bit easier. I am going to share how to configure Production and Staging environment configurations in your React Native Application.
Why do we need this configuration setup?
While developing an application, most probably, a situation will come, when you will need a different configuration setup for Development and Production environments to keep all of your Testing Environment separate from the Released(Production) Environment and test your features in the Testing(Staging) environment before publishing to the Production. For example, the API urls, separate bundle ids and application ids, separate application Display Names and Google-Services.json or GoogleService-info.plist files etc. In order to do so, we will be configuring our React-Native application for Testing(Staging) and Released(Production) environments.
Approach to be used
We will be using react-native-config for managing the variables for different environments. It will help us to set up our configuration in the web like approach i.e. by using the environment(.env) files.
Additionally, we will be using the concept of Product Flavours in android and Schemes in iOS to make the configurations separate for each of the environments.
The Readme doc for react-native-config covers most of the configuration setup but that is limited to configure only the variables for different environments. This blog post is created to go one step further and perform some more useful stuff like having separate application name(for the identification of the different builds), having separate bundle ids for different environments(to have dedicated Staging and Production apps to keep the Stable and In-Progress features separate), to have different Google-Service files to have separate Firebase configurations and more.
Firstly, we will create a demo React-Native project using the command:
npx react-native init configdemo
After initialising the project, we will install the react-native-config package using the command:
yarn add react-native-config
Install pods for the iOS project:
cd ios; pod install
Note: Replace all of the references for the configdemo with your project’s name.
Save configuration for different environments in the root directory:
- .env — for default configuration (optional)
- .env.staging — for staging configuration
- .env.production — for production configuration
- .env.example — for indicating the variables defined in the staging and production env files
Note: Only commit the .env.example to your VCS(Version Control System) as others will expose our environment configurations in VCS which may raise some security concerns.
The content of all of the 4 files could be:
// .envIS_PRODUCTION=falseAPI_BASE_URL=https://api.staging.foobar.com// .env.stagingIS_PRODUCTION=falseAPI_BASE_URL=https://api.staging.foobar.com// .env.productionIS_PRODUCTION=trueAPI_BASE_URL=https://api.foobar.com// .env.exampleIS_PRODUCTION=<true or false>API_BASE_URL=<API BASE URL>
By default react-native-config will read from .env, but we will be configuring it to pick up the respective environment in the upcoming sections.
import Config from "react-native-config";
For staging configuration, it will print:
and for production configuration:
This setup guide is divided into 3 parts:
Part 1: Android configuration for environment variables
Part 2: iOS configuration for environment variables
Part 3: Configure Bundle Ids, App Name and Google Service Files
You can skip the Part 3 steps if you do not want to have separate Application name or Separate Bundle Ids or separate Firebase Configurations for Staging and Production environments.