How To Manage Configuration In React Native: React-Native-Config
As most developers working on building apps, it is most probable that they are built in a sort of iterative way going through the whole building, testing, realizing it won’t run, try something again, realize it still won’t work, and then repeat the cycle over and over again until the solution finally chooses to reveal itself.
During that iterative process, it is essential not to write directly on the production database that could possibly mess with the given data. Also, it is not advisable to run out of API quota while testing the app out.
What is react-native-config?
This is where react-native-config comes in the picture. The whole process allows developers to set up and segregate different configuration files for every different environment. This advocates a sort of twelve-factor configuration management explained by the following:
Apps will sometimes store actual config as constants within the code. This is a direct violation of twelve-factor which strictly requires separation of the config from the code. Config varies quite substantially across different deploys while the code doesn’t.
Using a litmus test to see whether an app has actually been configured properly factored out of the whole code relies on whether the whole codebase could actually be made using open sources at any given moment, even without compromising any of its credentials.
With that embedded in mind, this explains why the SERVER_URL and also the GOOGLE_API_KEY should actually not exist in the code. This is quite like the idea of making the app ready for potential open source at any given time in the future.
What are the uses for react-native-config?
The question is, what exactly can be done using react-native-config?
Single Place. For one, it allows for safe and proper storage of all the configuration variables in a single place making them easy to access from anywhere.
Duplication not required. Another cool thing about this is that Java, Javascript, Objective-C/Swift do not require duplication for applications on different environments using React Native. Access the configuration for a single place and easily use it for all of the supported platforms.
Once this package is installed as well as configured, all that needs to be done next is to create a .env file in the project’s main root. An example of this could be a .env.dev, .env.staging, and even a .env.prod in order to represent the different environments. Once done, everything is now super easy to access anywhere in the app.
The installation process for react-native-config
The installation process is quite simple due to this being done on React Native. All that needs to be done is to type:
$ npm install react-native-config –save
$ react-native link react-native-config
Configuring for iOS
As expected, Apple had to be different. Either way, the process still is not that complicated. Just open the .xcodeproj and there are a few things that have to be done.
- Go straight to the Build Settings tab, check out for “preprocess” then proceed to set “Preprocess Info.plist” File into a “Yes”.
- The next thing to do is to set “Info.plist Preprocessor Prefix File to a “${BUILD_DIR}/GeneratedInfoPlistDotEnv.h”
- The last thing to do is set the “Info.plist Other Preprocessor Flags” to a “traditional”
Now everything’s done configuring, it’s time to actually hook it up. Make sure to create a brand new scheme that rides along with the different environments Staging, Dev, and also Production.
Here’s an easy way to do this:
- In the Xcode, located next to the whole play & stop buttons, look around and select the current scheme by selecting the “Manage Schemes”.
- With the window wide open, all that needs to be done is select the current scheme then proceed to select the gear icon, then press “Duplicate.”
Oh yeah, make sure that the “Shared” option is selected for the new schemes so when other developers are working on the project, they won’t need to go through the whole step.
- Name the new scheme (for example Dev) then expand the “Build” and proceed to click on the “Pre-actions”. Once finished, click the plus sign then finally the “New Run Script Action.”
- Finally, the last thing that needs to be done is to paste the script below into the box. Make sure to replace the .env.dev with the known appropriate file for that given environment
echo “.env.dev” > /tmp/envfile
Once done, everything is ready and it is easy to do the same for all of the staging and production environments. It is also possible to choose just what scheme the app is running or building on.
Configuring for Android
The android process is a bit more complicated. Starting out, there needs to be an additional one line to the android/app/build.gradle. This should be done right after the other “apply”:
apply plugin: “com.android.application” /* This should already exist */
apply from: project(‘:react-native-config’).projectDir.getPath() + “/dotenv.gradle”
Although everything is good to go, it’s better to preconfigure certain things as much as possible just like in iOS.
For the 3 given environments, it is necessary to set up 5 different scripts.
3 should be to run the app in dev mode.
2 should be to build for both production and staging.
Basically, this is setting a new environment variable telling react-native-config just which file to reference and also run it normally. This can be done using the package.json making things much easier:
“scripts”: {
“android-dev”: “ENVFILE=.env.dev react-native run-android”,
“android-staging”: “ENVFILE=.env.staging react-native run-android”,
“android-prod”: “ENVFILE=.env.prod react-native run-android”,
},
Basically, the react-native-config works as a simple and also consistent way of dealing with the different configuration needs existing inside the app. Easily setting it up as well as adjusting the workflow is very much achievable especially since this is all done on React Native which was essentially made to help everything function much smoother.
