Configure Production and Staging Environments in React-Native

Photo by Danil Shostak on Unsplash

Update (December 4, 2021): If you want a pre-configured setup for development, testing, staging, and production environments for your React Native app, you can try the react-native-template published on npm by me. This template additionally includes a few more interesting features such as preconfigured folder structure, splash screens, app icons, and a common set of libraries, as well as scripts to automate some common tasks.

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 Environments 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 configuring 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 names (for the identification of the different builds), having separate bundle ids for different environments(having 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.

Initial setup

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.

Different environments

Save configuration for different environments in the root directory:

1. .env — for default configuration (optional)
2. .env.staging — for staging configuration
3. .env.production — for production configuration
4. .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:

// .env
IS_PRODUCTION=false
API_BASE_URL=https://api.staging.foobar.com
// .env.staging
IS_PRODUCTION=false
API_BASE_URL=https://api.staging.foobar.com
// .env.production
IS_PRODUCTION=true
API_BASE_URL=https://api.foobar.com
// .env.example
IS_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.

At the end of the setup(Part 1 & Part 2), we could access the variables like:

import Config from "react-native-config";

console.log(Config.API_BASE_URL);

For staging configuration, it will print:

https://api.staging.foobar.com

and for production configuration:

https://api.foobar.com

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.

Thanks / Credits:

• Thanks, @luggit for this awesome module to make our job easier.
• Thanks, @ywongcode for this awesome guide to configure the iOS and Android environments.