Multiple Environments in React Native with Appcenter + Fastlane (Android only)

Jeff Gaoey — Fri, 25 Feb 2022 09:46:43 +0000

PART 1 - Registering Appcenter

1.Register Appcenter here https://appcenter.ms/
2.Add new app in Appcenter

3.Following Getting Started

4.Get API_TOKEN
go to Settings -> App API tokens -> Click New Api token
Warning! please save your API_TOKEN because It will disappear in next time.
5.Wording you must know

Owner Name = project's owner
App Name = project name

you can get both from Appcenter url.

https://appcenter.ms/users/{{owner-name}}/apps/{{app-name}}

organization account it will show like this.

https://appcenter.ms/orgs/{{your-owner-name}}/apps/{{app-name}}

And then create app in Appcenter for each environment you have (Repeat step 1 to 5)

PART 2 - Install react-native-config

Using react-native-config for using environment variable

1.Installation

npm install - save react-native-config

2.Setup react-native-config for android
Manually apply a plugin to your app at android/app/build.gradle.

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

See more in react-native-config docs. below here.
Link

3.Create your own environment files (.env.development, .env.preprod etc.)

4.Now you can use in your project like this.

// file .env

REACT_APP_URL_BACKEND_API=localhost:3000
ENV_NAME=demo
BUILD_VERSION=0.0.1

5.Don't forget to add Appcenter environment variable in your environment file, For example.

// file .env

REACT_APP_URL_BACKEND_API=localhost:3000
ENV_NAME=demo
BUILD_VERSION=0.0.1
APPCENTER_API_TOKEN=xxx
APPCENTER_OWNER_NAME=xxx
APPCENTER_OWNER_TYPE=xxx
APPCENTER_APP_NAME_IOS=xxx
APPCENTER_APP_NAME_ANDROID=xxx

PART 3 - Setup Product Flavors for Android

1.Go to android/app/build.gradle

2.Add env configuration.

3.Set flavorDimensions as "default"

4.Create product flavor following format here

productFalvors {
 [env name] {
     applicationIdSuffix '.{{env file suffix}}'
     resValue "string", "build_config_package", "{{package name}}"
 }
}

Environment file suffix is the suffix of your environment file

For example
env file name is .env.development
your env file suffix is .development

Package name. - you can get this in AndroidManifest.xml

Finally you will get Product Flavor like this

PART 4 - Creating launch screen and Icon for all flavors

Usually by default android in react-native has res folder to keep the icon and launch screen. see more at /android/app/src/main/res

For multiple environments, We have to separate icons and launch screen for it own.

1.Copy res folder at /android/app/src/main/res
2.Create your environment folder in /android/app/src level then paste res folder in that. For example /android/app/src/demo/res.
3.Rename your environment app_name itself - go to /android/app/src/demo/res/values/strings.xml and change value in <string name="app_name">{{app-name}}</string>
4.Repeat step 2 and 3 for all your environments.

5.Remove res folder in /android/app/src/main/res
6.Setup command for each environments in package.json

"scripts": {
// development
"start:android:dev": "APP_ENV=development ENVFILE=.env.development react-native run-android --variant=DevelopmentDebug",
"build:android:debug:dev": "cd android && ENVFILE=.env.development ./gradlew assembleDevelopmentDebug",
"build:android:release:dev": "cd android && ENVFILE=.env.development ./gradlew assembleDevelopmentRelease",
"start:dev": "APP_ENV=development ENVFILE=.env.development npx react-native start -- --reset-cache",

// demo
"start:android:demo": "APP_ENV=demo ENVFILE=.env.demo react-native run-android --variant=DemoDebug",
"build:android:debug:demo": "cd android && ENVFILE=.env.demo ./gradlew assembleDemoDebug",
 "build:android:release:demo": "cd android && ENVFILE=.env.demo ./gradlew assembleDemoRelease",
"start:demo": "APP_ENV=demo ENVFILE=.env.demo npx react-native start -- --reset-cache"
}

PART 5- Integrating Fastlane

Installing fastlane brew install fastlane
Create Fastfile /fastlane/Fastfile
Add deployment step in your Fastfile (Don't for get to add this in each environment you have)
Add command in package.json for deployment.

"scripts": {
 "createbuild": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"deploy:android:dev": "fastlane android_dev deploy --env development",
"deploy:android:demo": "fastlane android_demo deploy --env demo"
}

PART 6 - Running pipeline

npm run createbuild
remove /android/app/src/main/res
npm run deploy:android:dev

Thank you

Credit