FEATURE_FLAGS.md

Feature Flags

We currently have a very simple feature flag system in place to test features that aren't production ready yet.

There are currently two ways of enabling feature flags:

• Via query strings (no build required, great for testing things in the browser)
• Via environment variables (build required, great for testing things in the launcher if you can't simply use mockLauncher)

Query Strings

1. Make sure the environment variable EPIC_CLIENT_FEATURE_FLAGS_QUERY_STRING_ENABLED is turned on
2. Make sure you pass in the ff query string key alongside a comma-separated list of feature flag values (in this case, free-games)

Keep in mind query strings are not tied to any specific URL paths, so you can add them anywhere. E.g.: http://my-epic-url.com/?ff=free-games

Environment Variables

1. Make sure you can't simply use query strings; usually adding ?mockLauncher=true to the URL should be sufficient to test something directly in the browser
2. Export environment variables that follow the pattern EPIC_CLIENT_FEATURE_FLAG followed by an underscore and the name of your feature in screaming snake case (E.g.: EPIC_CLIENT_FEATURE_FLAG_FREE_GAMES)
3. Use true to turn the feature flag on and false to turn it off (E.g.: EPIC_CLIENT_FEATURE_FLAG_FREE_GAMES = true)

Dev

To test for a feature flag, you will use the isFeatureFlagOn selector which lives under epic-diesel-common:

_{MyThing.container.js}

import {isFeatureFlagOn} from 'epic-diesel-common/src/redux/selectors/app.selectors';
import MyThing from './MyThing';

const mapStateToProps = {
  shouldRenderMyFeature: state => isFeatureFlagOn(state, 'free-games')
};

export default connect(mapStateToProps)(MyThing);

_MyThing.js

const MyThing = ({shouldRenderMyFeature}) => (
  <div>
    {shouldRenderMyFeature && <h1>My Feature</h1>}
  </div>
);

export default MyThing;

Keep in mind that the key you use with isFeatureFlagOn() should be lower case separate by a dash. So if you're using environment variables to turn on the "free-games" feature, it will be parsed as EPIC_CLIENT_FEATURE_FLAG_FREE_GAMES but you will access it using free-games.