Lesson 2 - Building a DEVELOPMENT - STAGING - PRODUCTION environment

02/02/2023 - 2 phút

Follow  on Google News

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

  1. 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:

  1. DEVELOPMENT (.env)
API_KEY=devKey
API_URI=https://dev.com/api
  1. STAGING (.env.stg)
API_KEY=stagingKey
API_URI=https://staging.com/api
  1. 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

  1. dev
npm run dev-ios
  1. stg
npm run stg-ios
  1. prod
npm run prod-ios

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