Multiple Environments in React Native with Appcenter + Fastlane (Android only)
Tags: reactnative, frontend
Published: 2022-02-25 09:46:43

---
title: Multiple Environments in React Native with Appcenter + Fastlane (Android only)
published: true
description: 
tags: #reactnative #frontend
//cover_image: https://direct_url_to_image.jpg
---

## PART 1 - Registering Appcenter
1.Register Appcenter here https://appcenter.ms/
2.Add new app in Appcenter
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyqbln1ox48wngdz1580.png)
3.Following Getting Started
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgqkstbat2fu9q3egowi.png)
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](https://www.npmjs.com/package/react-native-config)

3.Create your own environment files (.env.development, .env.preprod etc.)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2yfjddgzlb30nq3zc98.png)

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
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b67hnwbljydkx549ki4u.png)

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r8b2iswvdh5xm8e2qp3.png)

3.Set flavorDimensions as "default"
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl6ei12razfcxa1139io.png)

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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54ik6bywxvksoi0ozr1d.png)

Finally you will get Product Flavor like this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb50bkp7jd1qrwr9wrhp.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpxalgyblugm42d6t0qw.png)
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
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kol07rzndxx5wryoa80l.png)

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"
}
```

## PART 6 - Running pipeline
1. `npm run createbuild`
2. `remove /android/app/src/main/res`
3. `npm run deploy:android:dev`

Thank you

Credit
+ https://github.com/luggit/react-native-config
+ https://www.folio3.com/how-to-manage-multiple-environments-in-a-react-native-app-for-android