#TECH

How to setup environment variables in React Native

Banner

There are times when we need to set up multiple environments in React Native for development, staging and final release. However, creating different environments is relatively easy. It’s the management part that’s difficult. In this article, I will explain how we can easily manage multiple environments in simple steps.

We generally have one environment when the project is in development, but as the project grows and we start to test and roll out the app, we need more environments with different URLs, API tokens, and other configurations. These environments could be –

  1. Development – This is generally used for developing new features. We use dummy data for checking the functionality and the flow of the app and that’s where the development environment helps.
  2. Staging or QA – On staging, the QA tests the functionality.  This environment is also where we share the build with our partners. Since it is almost the same as production the partners also feel like the production data is getting tested.
  3. Production – This is the environment where we roll out the app to the end users.

Let’s build a solution of how we can set up different environments in the application.

First creates an envs folder in the root of the app and make a JSON file of each of your environments like–

A. envs/development.json
B. envs/staging.json or envs/qa.json
C. envs/production.json

Put all the related data in these JSON files like API URLs, Token, and other related configurations if applicable.

Now we need to create a node script that will change the environment file according to the environment we have selected. Let’s create another folder with name as scripts on the root of the app and create file name as setup-environments.js and paste the script code mentioned below –

#!/bin/node
const fs = require("fs");
const selectedEnvironment = process.argv[2]
const envFileContent = require(`../envs/${selectedEnvironment}.json`);
fs.writeFileSync("env.json", JSON.stringify(envFileContent, undefined, 2));

 

Once you are done with the above script, then run this command on your terminal –

node scripts/setup-environment.js development

 

This command will create an env.json file on the root folder with all the related content. We can write another script to run the project directly and that will set all your environment variables automatically and you will need to just import that file in your project  and BOOM you are ready to use it.

"scripts": {
 "start": "react-native start",
 "env:qa": "node scripts/set-environment.js qa",
 "env:dev": "node scripts/set-environment.js development",
 "env:prod": "node scripts/set-environment.js prod",
 "_ios": "react-native run-ios",
"_android": "react-native run-android",
"ios": "yarn env:dev && yarn _ios",
 "ios:qa": "yarn env:qa && yarn _ios",
 "ios:prod": "yarn env:prod && yarn _ios",
"android": "yarn env:dev && yarn _android",
"android:qa": "yarn env:qa && yarn _android",
"android:prod": "yarn env:prod && yarn _android",
"_build:ios": "react-native bundle --platform ios ...",
 "build:ios": "yarn env:dev && yarn _build:ios",
"build:ios:qa": "yarn env:qa && yarn _build:ios",
"build:ios:prod": "yarn env:prod && yarn _build:ios",
"_build:android": "react-native bundle --platform android ...",
"build:android": "yarn env:dev && yarn _build:android",
"build:android:qa": "yarn env:qa && yarn _build:android",
 "build:android:prod": "yarn env:prod && yarn _build:android",
 },

 

How to use this in the project

The only thing you need to do is just import the env.json file in the file where you need to access the variable and you are ready to go. So now every time, you need to run the app on the simulator, just run this command on the terminal if you want to run the application in the development environment.

yarn ios

all the environment variables will be there on your app. And in the same way if you want to build the iOS release version for the app store, run this command.

yarn build:ios:prod

In the same way, you can run the command for Android and run the application on your local

By this way, you can manage multiple environments in your React Native project properly without writing much code. Follow the above steps and run your project and you will see that everything is working as planned.

I hope you can implement this in your project. If you have any questions or suggestions, please leave a comment. I would be happy to help you.

You might also like