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 –
- 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.
- 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.
- 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–
B. envs/staging.json or envs/qa.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 –
Once you are done with the above script, then run this command on your terminal –
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.
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.
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.
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.