🚀 How to implement remote configurations and feature flags on your applications

Mythu Siva

6 min readDec 21, 2023

Set up remote configuration and feature flags for your website or application in under 5 minutes.

TL;DR; In this post you will learn how to:

read feature flags on backend services using the npm package
read feature flags on the client-side using the generated CDN file
manage flags using the provided web interface

Example application: https://github.com/mythusiva/tic-tac-toe-reactjs/blob/main/README.md

Demo video: https://youtu.be/ZxoNgbsh4OA

Before we begin, I need to mention that I’m the creator of the fflag-ms npm package, the service hosted behind RapidAPI, and the feature flag management page. My goal here is to help you run all of this for free, it’s a freemium model.

Step 1: Set up a RapidAPI account

https://rapidapi.com/hub
Subscribe to the API: https://rapidapi.com/mythu.s2000/api/feature-flags2
Generate an application key, you’ll need this later

Step 2: Create and manage flags

Visit https://fflag-ms.com/
Enter your application key, and a namespace. A namespace will create logical separations for your application’s flags. You may choose to have one namespace for all flags. You can also separate your flags by environment.

Example with API Key and namespace filled out

Fetching the flags will produce a page like the following

Next, add some flags, it must be valid JSON.

Hit save, and congrats, you now have some flags!
Now let’s check the CDN url to see what is being shared publicly.

It’s empty because we haven’t exposed any names. However these flags will be available via the authenticated npm package, useful for backend applications.
Let’s expose the page-title name and check the CDN again.

Let’s reload the CDN url and check again.

We now have a way to manage our flags, generate a CDN url to use on our front-end client. What about our backend? Luckily, we have an npm module to help us.

Step 3: Use the NPM module on the backend

Install the npm package

$ npm i fflag-ms

Include it in your application, ideally at initialization. Use your RapidAPI key and also the namespace.

const FeatureFlags = require('fflag-ms');
const ff = new FeatureFlags({
  rapidAPIKey: 'xxx', 
  namespace: 'my-app',
  refreshIntervalMS: 300000, // 5 mins
});

Note, the refreshIntervalMS value can be as low as 1 min (60000), but know that this will mean more requests to the RapidAPI service, check the pricing page to calculate cost.
Now, just call the get method when ever you want to access a flag anywhere in your backend.

// Get enableExperiments value from feature flags, default to false if not found.
ff.get('enableExperiments', false);

🎉 Congrats you now have feature flags on the backend and front-end of your application!

Tips

The npm module, will allow you to manage flags the same way that the provided web-interface does. You can choose to write scripts to update flags or create your own interface.
The pricing of the RapidAPI service is set-up so that it can be essentially free. Usage of the CDN url also does not count towards your usage. There is post about it here as well.
Never use the npm module on the client side, since it will expose the RapidAPI key in the browser. Always use the public CDN url provided instead.
Favor resiliency by specifying a default value if the flag is removed or not available. Ultimately, your app should be designed to run without any flags being available.
Want to automate your feature flags using Zapier? You can now do this!

Key terms

name: a top-level key of your flags JSON. For example, {"key1":true,"key2":23}, will have the names key1 and key2.
flags: the entire JSON containing top-level keys and values. Values can be anything that is accepted by json, they will be preserved, this includes deeper objects.
exposed flags: the flags that you create will only be accessible to an application using the npm module or RapidAPI endpoints directly. Since these involve the application key, it would not be wise to use this on the client-side, where the key would be visible. Instead, you can use the CDN url. However, by default, it will be empty. You have to specify what names you want to expose on that CDN file.
namespace: the logical grouping of flags. You can group all your flags together, or separate them so that they can be managed by different people. You can also separate flags per environment; my-app-dev, my-app-production.

Feature flagging, also known as feature toggling or feature flipping, is a software development technique that involves designing and implementing features in a way that allows you to enable or disable them at runtime.

Incremental Rollouts: Feature flags allow you to release new features gradually to a subset of users. This enables you to test the functionality with a smaller audience before rolling it out to all users. This incremental rollout helps identify and address potential issues or bugs early in the release process.

A/B Testing: Feature flags are crucial for A/B testing, where different variations of a feature are presented to different groups of users. This allows you to experiment with different designs, functionalities, or algorithms and analyze user behavior to make data-driven decisions about which version performs better.

Hotfixes and Rollbacks: In the event of a critical bug or issue, feature flags provide a quick and easy way to disable the problematic feature without deploying a new version of the application. This allows for rapid hotfixes and rollbacks, reducing downtime and minimizing the impact on users.

Continuous Integration/Continuous Deployment (CI/CD): Feature flags are an integral part of a CI/CD pipeline. They enable developers to merge code into the main branch without necessarily making it visible to end users. This facilitates a smoother and more continuous deployment process, as features can be activated or deactivated as needed.

User Permissions and Access Control: Feature flags can be used to control access to certain features based on user roles or permissions. This is particularly useful in applications with different user types (e.g., administrators, regular users) where certain features should only be accessible to specific groups.

Reducing Code Complexity: Feature flags provide a mechanism for temporarily hiding or disabling parts of your codebase. This can be beneficial during development or when maintaining legacy code. It allows you to keep code in the codebase but inactive until it’s ready for release, reducing complexity and potential conflicts.

Preventing Information Overload: If your application has a large user base, introducing all features simultaneously may overwhelm users. Feature flags enable a more controlled introduction of features, helping users adapt to changes gradually and improving overall user experience.