Feature Flags

About

Feature flags is a software technique that enables a product team to enable or disable (aka show or hide) specific product features on-demand without the need for code modifications or new pull requests.

History and Decision

Issue: Feature flags & toggling

📑 Architecture Decision Record for Feature Flags

Initially Learning Resources considered integrating a third-party feature flag solution called nuxt-feature-toggle. This solution was easy to integrate and use, however it lacked the capability to pass more customized options to flagged components. This limitation along with the other future extensibility considerations led Learning Resources to implement an in-house solution that replicates the intuitive integration / usability of the nuxt-feature-toggle but with room for future extensibility and customization.

For Users

Who are the users?

• Product/project managers
• Developers
• Other project administrators

How to: toggle a feature

STEP 1: Login to AWS Amplify

• Login using your single sign-on link

STEP 2: Select an environment

• Select LearningResource-Production or LearningResources-Staging depending on which environment you which to toggle a feature for.
• Then click Management console within AWSAdministratorAccess

STEP 3: Go to Amplify

• Click AWS Amplify
  If you don't see AWS Amplify, search for it in the search bar

STEP 4: Select an app

• Think of the app as the domain you want to toggle a feature for
  For example, for our staging website select Learning Resources (Staging)

STEP 5: Manage Environment Variables

• Click Environment variables (located in left menu)
• Then, click Manage variables (located top right)
    
  
  

STEP 6: Toggle Feature

• Find the feature you want to toggle. Features follow the naming convention of 'F_[FEATURE_NAME]'
• Enter a valid value into the input box to toggle the feature on or off.
       - true | 1 | {"isEnabled":true} will turn the feature on
       - false | 0 | {"isEnabled":false} will turn the feature off
      
• Click Save button, to save changes
  
  

FINAL STEP: Redeploy the app
Redeploy the app for the flags to take effect

• Use breadcrumbs to go back to app's main page
• Click Hosting environments, then click Deploy (the green subway nav)
• Click Redeploy this version

For Developers

How to: create a new feature flag

STEP 1: Set feature name

• Set feature name in the featureNames in constants.js
  Follow naming convention F_[FEATURE_NAME]

STEP 2: Add feature to Nuxt ConfigRuntime

• Add feature name to features under publicRuntimeConfig in nuxt.config.js
  Example: features: { [featureNames.F_MY_FEATURE]: process.env.F_MY_FEATURE }

STEP 3: Add feature to Amplify environment variables

• Add the variable to both staging and production environments
  The variable name should be the same as the one you defined in code

FINAL STEP: Wrap your feature in a feature tag

• Wrap your component or html with <feature></feature>
  Example: <feature :name=F_MY_FEATURE><featureComponent/></feature>
  Now your feature is ready to be toggled in AWS Amplify