Managing Environments
Flagship manages configuration settings with environment files. The files are located in the top-level env directory and use the naming syntax env.{name}.js. Each file exports a JS object that contains desired settings for the specified environment. For example, an app may have a different API endpoint between UAT and production builds.
Your app must have an environment named env.prod.js, as this is the default environment when running the app. You may have any number of other named environments.
- Selecting the Environment
- Using Environments in your App
-
Built in Configurations
- name (required)
- displayName (required)
- associatedDomains
- disableDevFeature
- codepush
- zendeskChat
- firebase
- exceptionDomains
- enabledCapabilitiesIOS
- entitlmentsFileIOS (required)
- usageDescriptionIOS (required)
- bundleIds (required)
- appIconDir (required)
- launchScreen (required)
- urlScheme
- sentry
- targetedDevices
- adobeAnalytics
The environment can be specified when running Flagship init by passing the --env flag. For example, to select an env named env.uat.js, run init with yarn run init --env="uat". If no env is selected, init will use the prod environment.
When running the app in RN development mode, you can use Flagship's developer menu to switch between environments.
- Tap the version number button in the bottom right of your screen
- Tap on Env Switcher
-
Select an environment
-
Review the settings to be applied and tap Switch to [...] env
- Your app will reload with the specified config
You can retrieve the active configuration by importing it from the fsapp package:
import { env } from '@brandingbrand/fsapp';You can then reference any property on the env object:
console.log(env.apiHost);You can place any key and value into the environment files, but Flagship has a number of built-in items as well. Here's a description of these items:
The internal name of your app; for example, this will be used to name the Xcode project files.
Example: name: 'BestBargains'
The user-facing name of the app to be displayed on the user's home screen.
Example: displayName: 'Best Bargains'
Specify domains to enable Android deep linking.
Example: associatedDomains: ['www.bestbargains.com']
Whether to hide the Flagship developer menu. Should be set to true for store builds. Defaults to false.
Example: disableDevFeature: true
Configuration to enable built-in support for Code Push.
Example:
codepush: {
appCenterToken: 'xxxxx'
android: {
name: 'BestBargains-Android',
appKey: 'xxxxx',
deploymentKey: 'xxxxx'
},
ios: {
name: 'BestBargains-IOS',
appKey: 'xxxxx',
deploymentKey: 'xxxxx'
},
}
An account key for react-native-zendesk-chat.
Example:
zendeskChat: {
accountKey: 'xxxx'
}
Configuration to enable react-native-firebase
Example:
firebase: {
ios: {
googleServicesPlistFile: './firebase/GoogleServices.plist`
},
android: {
googleServicesJsonFile: './firebase/google_services.json`
}
}
An array of domains in which non-secure traffic will be permitted. This is highly discouraged except for development purposes! Note that localhost is automatically added by Flagship.
Example: exceptionDomains: ['www.bestbargains.com']
An array of supported capabilities for your app.
Example: enabledCapabilitiesIOS: ['push']
Location to an entitlements file.
Example: entitlementsFileIOS: './uat.entitlements'
Text to be displayed to users when requesting access to features such as the camera or calendar. Please note that due to software restrictions, you must provide usage descriptions for every grant type even if your app does not implement all of them.
Example:
{
key: 'NSAppleMusicUsageDescription',
string: 'Allow Best Bargains to access your music'
},
{
key: 'NSBluetoothPeripheralUsageDescription',
string: 'Allow Best Bargains to access bluetooth peripherals'
},
{
key: 'NSCalendarsUsageDescription',
string: 'Allow Best Bargains to access your calendar to save events'
},
{
key: 'NSCameraUsageDescription',
string: 'Allow Best Bargains to access your camera to scan barcodes'
},
{
key: 'NSLocationWhenInUseUsageDescription',
string: 'Allow Best Bargains to access your location for a customized experience'
},
{
key: 'NSMotionUsageDescription',
string: 'Allow Best Bargains to access your motion'
},
{
key: 'NSPhotoLibraryAddUsageDescription',
string: 'Allow Best Bargains to add photos to your library from your products'
},
{
key: 'NSPhotoLibraryUsageDescription',
string: 'Allow Best Bargains to access your photo library so you can upload pictures of your products'
},
{
key: 'NSSpeechRecognitionUsageDescription',
string: 'Allow Best Bargains to use speech recognition for hands-free shopping'
},
{
key: 'NSFaceIDUsageDescription',
string: 'Allow Best Bargains to use FaceID to make login a breeze'
}
]The bundle identifiers created for your apps within the Apple and Google Play developer portals.
Example:
bundleIds: {
android: 'com.bestbargains.android',
ios: 'com.bestbargains.ios'
}
The location of the directory containing your app icons. See Creating App Icons.
Example:
appIconDir: {
android: 'assets/appIcon/android`
ios: `assets/appIcon/ios`
}
The location of the directories containing your launch screen files. See Creating Launch Screens
Example:
launchScreen: {
android: 'assets/launchScreen/android',
ios: {
images: 'assets/launchScreen/ios/LaunchImages.xcassets',
xib: 'assets/launchScreen/ios/LaunchScreen.xib'
}
}
The URL scheme for your app. See references for iOS and Android.
Example: urlScheme: 'bestbargainsapp'
Path to a properties file to enable built-in support for Sentry error tracking.
Example:
sentry: {
propertiesPath: 'sentry.properties'
}
Which Apple devices the app supports. Options are iPhone, iPad, or Universal.
Example: targetedDevices: 'iPhone'
Paths to configuration files to enable react-native-adobe-analytics.
Example:
adobeAnalytics: {
ios: {
configPath: './assets/ADBMobileConfig.uat.json'
},
android: {
configPath: './assets/ADBMobileConfig.uat.json'
}
}