Skip to content

Managing Environments

Brett Weissbart edited this page Jul 31, 2019 · 2 revisions

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

Command Line

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.

Environment Switcher

When running the app in RN development mode, you can use Flagship's developer menu to switch between environments.

  1. Tap the version number button in the bottom right of your screen

image

  1. Tap on Env Switcher

image

  1. Select an environment

  2. Review the settings to be applied and tap Switch to [...] env

image

  1. Your app will reload with the specified config

Using Environments in your App

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);

Built in Configurations

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:

name (required)

The internal name of your app; for example, this will be used to name the Xcode project files.

Example: name: 'BestBargains'

displayName (required)

The user-facing name of the app to be displayed on the user's home screen.

Example: displayName: 'Best Bargains'

associatedDomains

Specify domains to enable Android deep linking.

Example: associatedDomains: ['www.bestbargains.com']

disableDevFeature

Whether to hide the Flagship developer menu. Should be set to true for store builds. Defaults to false.

Example: disableDevFeature: true

codepush

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'
  },
}

zendeskChat

An account key for react-native-zendesk-chat.

Example:

zendeskChat: {
  accountKey: 'xxxx'
}

firebase

Configuration to enable react-native-firebase

Example:

firebase: {
  ios: {
    googleServicesPlistFile: './firebase/GoogleServices.plist`
  },
  android: {
    googleServicesJsonFile: './firebase/google_services.json`
  }
}

exceptionDomains

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']

enabledCapabilitiesIOS

An array of supported capabilities for your app.

Example: enabledCapabilitiesIOS: ['push']

entitlmentsFileIOS (required)

Location to an entitlements file.

Example: entitlementsFileIOS: './uat.entitlements'

usageDescriptionIOS (required)

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'
  }
]

bundleIds (required)

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'
}

appIconDir (required)

The location of the directory containing your app icons. See Creating App Icons.

Example:

appIconDir: {
  android: 'assets/appIcon/android`
  ios: `assets/appIcon/ios`
}

launchScreen (required)

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'
  }
}

urlScheme

The URL scheme for your app. See references for iOS and Android.

Example: urlScheme: 'bestbargainsapp'

sentry

Path to a properties file to enable built-in support for Sentry error tracking.

Example:

sentry: {
  propertiesPath: 'sentry.properties'
}

targetedDevices

Which Apple devices the app supports. Options are iPhone, iPad, or Universal.

Example: targetedDevices: 'iPhone'

adobeAnalytics

Paths to configuration files to enable react-native-adobe-analytics.

Example:

adobeAnalytics: {
  ios: {
    configPath: './assets/ADBMobileConfig.uat.json'
  },
  android: {
    configPath: './assets/ADBMobileConfig.uat.json'
  }
}