DEV Community

Jeff Gaoey
Jeff Gaoey

Posted on

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

#reactnative #frontend

PART 1 - Registering Appcenter

1.Register Appcenter here https://appcenter.ms/
2.Add new app in Appcenter
Image description
3.Following Getting Started
Image description
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
Enter fullscreen mode Exit fullscreen mode

you can get both from Appcenter url.

https://appcenter.ms/users/{{owner-name}}/apps/{{app-name}}
Enter fullscreen mode Exit fullscreen mode

organization account it will show like this.

https://appcenter.ms/orgs/{{your-owner-name}}/apps/{{app-name}}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

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

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
Enter fullscreen mode Exit fullscreen mode

Image description

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
Enter fullscreen mode Exit fullscreen mode

PART 3 - Setup Product Flavors for Android

1.Go to android/app/build.gradle

2.Add env configuration.
Image description

3.Set flavorDimensions as "default"
Image description

4.Create product flavor following format here

productFalvors {
 [env name] {
     applicationIdSuffix '.{{env file suffix}}'
     resValue "string", "build_config_package", "{{package name}}"
 }
}
Enter fullscreen mode Exit fullscreen mode
  • 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 Image description

Finally you will get Product Flavor like this
Image description

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.
Image description
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"
}
Enter fullscreen mode Exit fullscreen mode

PART 5- Integrating Fastlane

  1. Installing fastlane brew install fastlane
  2. Create Fastfile /fastlane/Fastfile

  3. Add deployment step in your Fastfile (Don't for get to add this in each environment you have)
    Image description

  4. 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"
}
Enter fullscreen mode Exit fullscreen mode

PART 6 - Running pipeline

  1. npm run createbuild
  2. remove /android/app/src/main/res
  3. npm run deploy:android:dev

Thank you

Credit

Top comments (0)

Read next

hieunh1801 profile image

react-hook-form demo

Nguyễn Hữu Hiếu -

akshatsoni26 profile image

Understanding Array Mutation in Redux: A Common Pitfall with useSelector

Akshat Soni -

rajeshkumaryadavdotcom profile image

5 modern CSS features for 2024

Rajesh Kumar Yadav -

garciadiazjaime profile image

Front-End Architecture: How to Host Your Web App for Free

Jaime -