Configure Production and Staging Environments in React-Native

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.

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

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_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

Software Engineer @ucreate.it

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store