AWS Cloud Operations Blog

Introducing AWS AppConfig Feature Flags In Preview

Update (15 March 2022): AWS AppConfig Feature Flags are now generally available. The information below is still correct, but additional information can be found in the link at the end of this blog post.

Modern DevOps practices require development teams to continuously iterate their applications based on customer feedback. These iterations are mostly comprised of the introduction of new features within the application, or tuning the applications to cope with operational events such as limit increases or improving fault tolerance.

Feature flags, also known known as feature toggles, are widely used by developers and Devops professionals to quickly enable or disable features within their application code. One common use case is to simplify the launch of new features to an application. Developers can deploy the application code in advance and hide it behind a feature flag that prevents end users from accessing the feature. When it is time to make the feature public, developers enable the feature flag and the functionality becomes available to their users. Another use case is for DevOps professionals to enable an operational flag that turns on verbose logging when their application experiences an operational event and turn it back off when the operational event ends.

In 2019, we announced the launch of AWS AppConfig to enable our customers to deploy application configuration changes to their application using the same best practices that are used by thousands of teams across Amazon. AWS customers use AWS AppConfig to centrally manage and deploy their application configuration data and feature flags at application runtime.

While our customers have been using AWS AppConfig for use cases such as feature flags, allow-listing, and centrally managing their configuration data, we recently announced the launch of AWS AppConfig Feature Flags. This managed experience provides customers with the ability to quickly create feature flag configurations, define flags and flag attributes, define constraints to validate the flag attribute values and deploy new features to their application at runtime. Thousands of teams across Amazon use this software best practice to continuously release features to our customers and continuously iterate products based on customer feedback.

AWS AppConfig Feature Flags provide customers with the control to roll out new features at the rate that they want to introduce the change to their application. Customers can validate these changes to make sure that they are free of errors and match the expected input of their application. While deploying new values gradually, in case there is an error, AWS AppConfig can roll back the changes automatically to prevent any application outages.

To introduce you to AWS AppConfig Feature Flags, we’ll build a sample application that takes advantage of feature flags and show how the new managed experience works.

Sample Application Overview

Our sample application Feature Flag Store is an e-commerce website that displays multiple items on the homepage. The website lets customers explore more about the products by selecting them. Once done browsing, the website lets customers add items to the cart and complete checkout using one of the listed payment options. We will use AppConfig feature flags to deploy new features to this website without a full code deployment. We will walk through the creation and deployment of the following new features:

1) the ability to show the inventory of an item and

2) a secondary payment option within the checkout experience

Image showing the front end of the Feature Flag Store Application

The application consists of a static website for the frontend and an API based serverless backend using Amazon API Gateway, AWS Lambda, and Amazon DynamoDB. The feature flags will be created and fetched from AWS AppConfig. The application frontend is built using React and aimed at delivery through AWS Amplify Hosting . It can run locally without deployment to Amplify Hosting for development and demo purposes.

Architectural Diagram

Our application uses two Lambda functions. One of the Lambda functions retrieves the list of products from an Amazon DynamoDB table and fetches feature flags from AWS AppConfig. The second Lambda function fetches feature flags from AWS AppConfig to turn on the front-end feature. Both Lambda functions use the AWS AppConfig Lambda extension as a layer to fetch config data from AWS AppConfig. Integrating the AWS AppConfig Lambda extension with your Lambda functions simplifies the process of fetching configurations from AppConfig. You can also use AWS AppConfig to deploy configuration and feature flags to applications hosted on Amazon Elastic Compute Cloud (EC2) , containers, on-premises servers, IoT devices, and mobile applications.

We will first create the feature flags using AWS AppConfig and then introduce the new features to our application.

Create AWS AppConfig Application, Environment, and Feature Flags

  1. Go to AWS AppConfig in the AWS Management console and select “Get Started”.
  2. Select Create Application and enter your application name. Take a note of the application ID in the URL. We will use the application ID as we deploy the application.Enter name of the application and then click Create applicationTake a note of the application ID in the URL. We will use the application ID as we deploy the application..console.thinkwithwp.com/systems-manager/appconfig/applications/XXXXXX/?region=
  3. Once the application is created, select the Configuration profiles and feature flags tab. This tab now lets you store the free form configurations and feature flags. We will now create a feature flag configuration profile by selecting Create.Create configuration profile and feature flags tab highlighted
  4. Select Feature flag and create your feature flag configuration profile.Choose feature flag on the modal that has the two options as feature flag and freeform configuration
    Enter the name of the feature flag configuration profile and optional description or tags
  5. We have successfully created a feature flag configuration profile. This configuration profile lets you create and centrally manage feature flags for your application. We will now create the two feature flags – one that lets customers view the inventory of an item, and the other that enables mobile payments as a checkout option.Feature flag configuration profile is created select Add new flag to create a new flag
  6. Select Add New Flag to start creating flags. We will enter the flag name as “show-stock”. AppConfig automatically populates the unique flag key. You can also enable or disable the flag here before creating it.
    Create the first flag with flag name as show-stock
  7. AppConfig lets you not only create a Boolean flag that will let the code path be executed, but also store granular values within the flag as attributes. For example, if a developer wanted to enable the “show stock” feature to the customers, but also wanted to limit the value of maximum items to be displayed to 10, then they can add an attribute that controls the property of the flag. AppConfig also lets you add constraints that enable you to validate the attribute values. You can add multiple attributes that can be enabled or disabled as the flag data becomes available to the application. AppConfig supports the following attribute types:
    1. String
    2. Number
    3. Boolean
    4. String Arrays
    5. Number Arrays
  8. Create another flag with the key as “mobile-payment” within the same configuration profile as shown in the following. We will now add an attribute in this flag which will change how the text corresponding to this option is displayed on the UI. Select Add an attribute and set the attribute key as “title”, attribute type as “string” and type in any string value. Select Create flag.Create mobile-payment flag with an attribute called title and enter value
  9. Select Save new version to save the unwritten changes. Note that the two feature flags are not enabled yet.Feature Flags created but savedSaved feature flags as a new version
  10. Select Start Deployment. Select Create Environment to create the environment to which this configuration will be deployed to. Take a note of the environment ID. While creating the environment, you can optionally add Amazon CloudWatch alarms in the monitors section. Adding a monitor lets AWS AppConfig roll back the configuration deployment to the previous version in case an error occurs while deploying the configuration.
  11.  Start deployment to deploy the flags. At this step, select deployment strategy of your choice. Select Start deployment to deploy the feature flags.Start Deployment page with Environment, hosted config version and deployment strategies selected Deployment details page with deployment in progress

Note that when you create a feature flag configuration profile, AWS AppConfig saves the data along with some metadata as a hosted configuration. You can use the following CLI command to view the JSON file that is created by AppConfig.

aws appconfig get-hosted-configuration-version --application-id <value> --configuration-profile-id <value> --version-number <value> <filename>

You will get the following JSON as the output.

{
  "flags": {
    "mobile_payment": {
      "_createdAt": "2021-10-01T20:58:48.884Z",
      "_updatedAt": "2021-10-01T20:58:48.884Z",
      "attributes": {
        "title": {
          "constraints": {
            "type": "string"
          }
        }
      },
      "name": "mobile-payment"
    },
    "show_stock": {
      "_createdAt": "2021-10-01T18:46:02.458Z",
      "_updatedAt": "2021-10-01T18:46:02.458Z",
      "name": "Show-stock"
    }
  },
  "values": {
    "mobile_payment": {
      "_createdAt": "2021-10-01T20:58:48.884Z",
      "_updatedAt": "2021-10-01T20:58:48.884Z",
      "enabled": false,
      "title": "Mobile payments (for orders over $5)"
    },
    "show_stock": {
      "_createdAt": "2021-10-01T18:46:02.458Z",
      "_updatedAt": "2021-10-01T18:46:02.458Z",
      "enabled": false
    }
  },
  "version": "1"
}

To retrive the deployed configuration, you can call GetLatestConfiguration API as described in our documentation. As a response to the GetLatestConfiguration API call, the information that defines your feature flags and attributes will be stripped out. The simplified JSON contains a map of keys that match each of the flag keys you specified and values that are a map with the “enabled” attribute either true or false. In this case, since we have not yet enabled the features, this attribute will be set to false. You will recieve the following output as a result of the GetLatestConfiguration call.

{
  "mobile_payment": {
    "enabled": false
  },
  "show_stock": {
    "enabled": false
  }
}

We will now install the application and release the new features. The backend is built using the AWS Serverless Application Model (SAM) and requires the AWS SAM CLI for installation. See instructions for installing AWS SAM CLI here.

Install the backend application

  1. Clone the sample application repo onto your local development machine using
    gh repo clone aws-samples/aws-appconfig-feature-flags
  2. Run the following commands to change to the backend directory and install dependencies.
    cd appconfig-feature-flags
    cd backend
    npm install
  3. Process and build your application using the AWS SAM template file using sam build
  4. Deploy the backend application using the following command and follow the prompts. sam deploy --guided
  5. Add the IDs of the AppConfig Application, Environment, and Configuration Profile when prompted, and confirm all of the deployment prompts.
  6. In the output of the deployment, note the DynamoDBTableName key and the HTTPApiUrl key.
  7. You will get the output similar to the following:
    Key DynamoDBTableName Description The name of your DynamoDB table Value sam-app-DynamoDBTable-XXXXXXXXXXX
    Key HttpApiUrl Description URL of your API endpoint Value https://XXXXXXXX.execute-api.XX-XXXXXXXX-1.amazonaws.com

Populate DynamoDB table with sample data

  1. Open the template file dynamodb.json.template and replace YOUR_DYNAMODB_TABLE_NAME with the DynamoDBTableName key from sam deploy output. Save the file as dynamodb.json.
  2. Run the following command to populate the DynamoDB table with sample data:
    aws dynamodb batch-write-item --request-items file://dynamodb.json
  3. You will get the following output:
    {
    "UnprocessedItems": {}
    }

Install the front-end application

  1. Change to the frontend directory and install the dependencies using
    cd frontend

    npm install
  2. Open the template file config.json.template in the folder src and replace YOUR_API_ENDPOINT with the HTTPApiUrl key from sam deploy output. Save the file as config.json.
  3. Start the local development server using the following
    npm start
  4. Open http://localhost:3000/ in your browser to view the web application. You will see the following website displayed. The website contains multiple items listed but does not show the inventory for each item. Select any item and add the item to the cart. Go to your cart and you will see that you can only use “Debit card” as the only payment option. We will now use AWS AppConfig to deploy the feature flags, that we created earlier, to the application.Front end of the feature flag store application with feature flags disabled

Checkout page with only one payment option Deploying AppConfig Feature Flags

  1. Go back to the feature flag configuration profile and enable both the flags by selecting the toggles. Save it as a new version.Enable both feature flags
  2. Select Start Deployment to deploy the feature flags to the web application. Choose the environment and deployment strategy to deploy your flags, and then select Start Deployment again.
  3. You will be able to view the progress of the deployment on the deployment details page as follows. While this example uses the AWS AppConfig Lambda extension to retrieve the feature flags, you can refer to documentation on how to retrieve feature flags for your applications.
  4. Once the deployment is complete, reload your browser to see the features on the website at application runtime.Website frontend with show stock enabledWebsite frontend with Mobile payment option enabled

You can also call the GetLatestConfiguration API to see the JSON data that is retrieved by the application.

{
  "mobile_payment": {
    "enabled": true,
    "title": "Mobile payments (for orders over $5)"
  },
  "show_stock": {
    "enabled": true
  }
}

Conclusion

AWS AppConfig feature flags let you safely release new features to your production environments independent of code deployments. This lets Developers and DevOps teams validate feature flag configuration data and deploy single or multiple feature flags to their application in a monitored and controlled way. Separating application configuration from code has been a best practice within Amazon for years, and AWS AppConfig feature flags have made it easier for our customers to use create, manage, and deploy their feature flags using AWS AppConfig.

Update (15 March 2022): AWS AppConfig Feature Flags are now generally available. Additonal information can be found here.

About the authors

Vinni Satija Sagar

Vinni is a Product Manager for AWS AppConfig and is based in Washington D.C. She is passionate about taking a working backward approach with customers. She enjoys using technology to create solutions that address customer needs.

Gunnar Grosch

Gunnar is a Senior Developer Advocate at AWS based in Sweden. He focuses on creating content to inspire hands-on builders and helping the developer community to grow. Resilience, reliability, chaos engineering, operational excellence, and serverless are topics that bring him extra joy.