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

npm run dev-ios

npm run stg-ios

prod

npm run prod-ios

Thus, I have successfully configured 3 environments dev-stg-prod.