Using Non-Boolean Feature Flags
Mark Allen
7/16/2023
Feature flags aren’t just booleans that turn a feature on or off based upon their value. They can also be used to evaluate expressions such as the version of the application, compare a value to a string, or, as this example will look at, change the behaviour of the site based upon a time in the future.
This came from a question that we addressed on Stackoverflow, that asked about using a feature flag to show that the site will be shut down at a specific time and then disable the site at that time.
This can be accomplished by using a feature flag that disables the site when turned on, but does not meet the objective of informing the user that the site will shut down shortly. By moving away from just looking at feature flags as either “on” or “off,” and using an integer, both requirements can be met.
The solution is to use a feature flag that is based upon a timestamp–the time to shut down the site. If that flag is enabled, different messages can be displayed to the user just before the shutdown and then the site can be disabled after that.
Follow along this step-by-step guide. You can find the code here.
Step 1
Start by logging into DevCycle, if you don’t yet have an account, follow the creating an account guide.
Step 2
Get the dev environment key by going to https://app.devcycle.com/r/environments or navigating through the UI.
Avatar -> Settings -> Environments & Keys
Step 3
Checkout the devcyclereact project using git
git clone https://github.com/markcallen/devcyclereact
Step 4
Update next.config.js and change DevCycleKey to be your development client key.
Step 5
Create a new release feature flag called Site Maintenance, then add a new variable of type number called time-of-site-to-go-down. For details on how to do this see our getting started guides for your first feature flag and creating a new variable.
Set the value for the time-of-site-to-go-down variable to be 5 minutes from now (in milliseconds).
Get this from the command line using:
echo $((($(date +%s)+300)*1000))
Don’t forget to press save.
Here's a quick video on creating non-boolean feature flags with DevCycle.
Step 6
Start up the application
cd devcyclereact
yarn
npm run dev
Go to the site http://localhost:3000/countdown
Wait for 5 minutes and refresh the page.
Step 7
To go back to the original state, set the variation off value to be 0 and turn targeting off
Then the site shows that it is up.
Written By
Mark Allen