When developing an application, developers often need to create multiple builds with different configurations to simplify maintenance and testing. Typically, three builds are created: development, staging, and production. In this case, we will focus on setting up both production and development environments, as staging will be similar to development.
Step 1:
Installing react-native-config
// yarn
yarn add react-native-config && cd ios && pod install && cd ..
// or
// npm
npm install react-native-config --save && cd ios && pod install && cd ..
Step 2:
Create .env files for each configuration in project root directory:
i) .env.development
ENV=development
API_URL=https://api.dev.com
ANDROID_VERSION_CODE=1
ANDROID_VERSION_NAME=1.0
ANDROID_APPLICATION_ID="com.myapp"
ii) .env.production
ENV=production
API_URL=https://api.com
ANDROID_VERSION_CODE=1
ANDROID_VERSION_NAME=1.0
ANDROID_APPLICATION_ID="com.myapp"
iii) .env (To run through Android Studio if using project.env.get)
Also select Build Variants > :app > Active Build Variant
ENV=development // production / staging
API_URL=https://api.dev.com
ANDROID_VERSION_CODE=1
ANDROID_VERSION_NAME=1.0
ANDROID_APPLICATION_ID="com.myapp"
ANDROID CONFIGURATION:
Step 1:
Go to android/app/build.gradle and add these:
Keep build cases in lowercase like productiondebug, developmentrelease etc.
//react-native-config
project.ext.envConfigFiles = [
development: ".env.development",
production:'.env.production'
]
// ---
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
//react-native-config
// project.env.get -> mentioned in `.env` files
defaultConfig {
applicationId project.env.get("ANDROID_APPLICATION_ID")
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode project.env.get("ANDROID_VERSION_CODE").toInteger()
versionName project.env.get("ANDROID_VERSION_NAME")
resValue 'string', 'build_config_package','com.myapp'
}
buildTypes {
debug {
signingConfig signingConfigs.debug
matchingFallbacks = ['debug', 'release'] //react-native-config
}
Use
applicationIdSuffix/applicationIdwhich should be based onGoogleService.json'sandroid_client_info.package_nameif it exist
android {
ndkVersion rootProject.ext.ndkVersion
buildToolsVersion rootProject.ext.buildToolsVersion
compileSdk rootProject.ext.compileSdkVersion
....
//react-native-config
flavorDimensions "default"
productFlavors {
production {
// Can be used as per requirement for different environments
// minSdkVersion rootProject.ext.minSdkVersion
// applicationId "com.myapp"
// targetSdkVersion rootProject.ext.targetSdkVersion
// resValue "string", "build_config_package", "com.awrostamani"
// applicationId "com.myapp.myappprod"
applicationIdSuffix ".myappprod"
// Ensure the applicationIdSuffix matches the package_name in GoogleService.json if it exists. Otherwise, you can use any suffix (e.g., 'development'). Don't forget to add --appIdSuffix in the package.json command.
}
development {
// applicationId "com.myapp.myappdev"
applicationIdSuffix ".myappdev"
}
}
//react-native-config
....
Step 2:
Android Change App name,App Icon, GoogleService.json(as per environment(if multiple)):
In this setup, we copied the main folder and created a development folder where we modified the app icon and app name for the development environment.
Additionally, we configured the GoogleService.json files based on the environment if multiple GoogleService.json files present, else keep in android/app folder only.
For the debug and development builds, we used the development version of GoogleService.json, while the production version was placed in the main folder for production builds.
Step 3:
In package.json add these scripts:
"scripts": {
...
cleanCache": "npm start -- --reset-cache",
"start": "react-native start",
"killAllBundler": "killall node",
"adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:8081 tcp:8081 && adb reverse tcp:3000 tcp:3000",
"installAll": "yarn && cd ios && pod install && cd ..",
"cleanGitIgnoredFiles": "rm -rf .jso node_modules package-lock.json yarn.lock && cd ios && rm -rf build pods .xcode.env.local Podfile.lock && cd .. && cd android && rm -rf build && cd app && rm -rf build && cd .. && cd .. && yarn installAll",
"setDevelopment": "ENVFILE=.env.development",
"setStaging": "ENVFILE=.env.staging",
"setProduction": "ENVFILE=.env.production",
"aos:check": "react-native run-android --list-devices",
"aos:dev": "yarn installAll && yarn setDevelopment react-native run-android --mode=developmentdebug --appIdSuffix=myappdev",
"aos:dev-release": "yarn installAll && yarn setDevelopment react-native run-android --mode=developmentrelease --appIdSuffix=myappdev",
"aos:prod": "yarn installAll && yarn setProduction react-native run-android --mode=productiondebug --appIdSuffix=myappprod",
"aos:prod-release": "yarn installAll && yarn setProduction react-native run-android --mode=productionrelease --appIdSuffix=myappprod",
"aos:clean": "cd android && ./gradlew clean",
"aos:DR-apk": "yarn setDevelopment && yarn aos:clean && cd android && ./gradlew assembleDevelopmentRelease",
"aos:PR-apk": "yarn setProduction && yarn aos:clean && cd android && ./gradlew assembleProductionRelease",
"aos:DD-apk": "yarn setDevelopment && yarn aos:clean && cd android && ./gradlew assembleDevelopmentDebug",
"aos:PD-apk": "yarn setProduction && yarn aos:clean && cd android && ./gradlew assembleProductionDebug",
"open-apk": "open ./android/app/build/outputs/apk/",
"aos:dev-apk": "yarn aos:DD-apk && yarn open-apk",
"aos:prod-apk": "yarn aos:PD-apk && yarn open-apk",
"uninstallApks": "cd android && ./gradlew uA && cd ..",
"aos:dev:release-apk": "yarn aos:DR-apk && yarn open-apk",
"aos:prod:release-apk": "yarn aos:PR-apk && yarn open-apk"
...
}
i) Run yarn aos:dev to run in emulator in development environment.
ii) Run yarn aos:dev-apk to make build/apk in development environment.
Similarly, you can check for all
Usage of .env values in Native side:
Top comments (0)