Skip to content

Feature Flags

Jump to bottom
Dylan edited this page Jan 27, 2023 · 48 revisions

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

:octocat: 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)
       Screenshot 2023-01-26 at 10 42 06 AM

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
         Screenshot 2023-01-26 at 11 31 59 AM
  • Click Save button, to save changes

FINAL STEP: Redeploy the app
   Redeploy the app you just set the flags for

  • 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

Footer

Clone this wiki locally