Lesson 2 - Building a DEVELOPMENT - STAGING - PRODUCTION environment
02/02/2023 - 2 phút
Summary
Environment files concept
Keys, secrets, and configuration are often stored in .env files, with different parameters corresponding to specific build types. You may be familiar with .env files as part of the 12-factor app approach. The 12-factor principles are intended for software applications as a service - this method is not a perfect fit for RN development. However, approaching build configuration in a 12-factor model is a good idea.
To use .env configuration files in React Native (RN) applications, we need to add react-native-config to your project. Here, I will create 3 environments DEVELOPMENT - STAGING - PRODUCTION
Instructions
Create a base project
To create a project, use the command:
npx react-native init ReactNativeDevOps
Install and configure react-native-config
Install react-native-config
npm i react-native-config --save
Configure IOS
- Run the command
npx pod-install
Open Xcode with the command
open ios/ReactNativeDevOps.xcworkspace
then open the AppDelegate.mm file
Configure Android
Go to the android/app/build.gradle file and add the following code to line 2:
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
In the android/app/proguard-rules.pro file, add the line:
-keep class com.reactnativedevops.BuildConfig { *; }
Next, create 3 files in the root directory:
- DEVELOPMENT (.env)
API_KEY=devKey
API_URI=https://dev.com/api
- STAGING (.env.stg)
API_KEY=stagingKey
API_URI=https://staging.com/api
- PRODUCTION (.env.prod)
API_KEY=productKey
API_URI=https://prod.com/api
Then, use the config by adding to scripts in package.json
{
"name": "ReactNativeDevOps",
"version": "0.0.1",
"private": true,
"scripts": {
"dev-android": "ENVFILE=.env react-native run-android", # <- Add here
"stg-android": "ENVFILE=.env.stg react-native run-android", # <- Add here
"prod-android": "ENVFILE=.env.prod react-native run-android", # <- Add here
"stg-ios": "ENVFILE=.env.stg react-native run-ios", # <- Add here
"dev-ios": "ENVFILE=.env react-native run-ios", # <- Add here
"prod-ios": "ENVFILE=.env.prod react-native run-ios", # <- Add here
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"react": "18.2.0",
"react-native": "0.71.2",
"react-native-config": "^1.5.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native-community/eslint-config": "^3.2.0",
"@tsconfig/react-native": "^2.0.2",
"@types/jest": "^29.2.1",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.7",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"jest": {
"preset": "react-native"
}
}
After configuring, use the command to run the test config
- dev
npm run dev-ios
- stg
npm run stg-ios
- prod
npm run prod-ios
Thus, I have successfully configured 3 environments dev-stg-prod.