Simple Feature Flag Service for your website

Feature flags are great tools when wanting to test stuff in your webbrowser before you make it public. Copy and paste my sample code and you are good to go!

icon of user profile

Published 31 Aug 2020

This Feature Flag Service gives you the possibility to

  • Set flags with appsetting
  • Set flags with a querystring
  • Set flags with SiteSettings/Startpage props in Episerver
  • Set flags with visitor group (Episerver)

Why use feature flag / feature toggling

Use it to introduce new features in parallell with the old code.

Feature toggling or feature flags gives you the possibility to test new features in production in parallell with the old code. Ive used it several times in projects to release new items, and test them in early sprints in production. The effect would be that you are quite confident that it will work, customer can test it early, no big bang release and time to market is fast. It ‘s not always you know if your new code will work in production, you may have some integrations only working in prod, therefore you’ll need to test it before going all in. This teqhnique gives you also the possibility to release a feature into production and activate it in an other time.

Set flags with a Querystring

The example code states that the first Flag1Key is “FeatureFlag:Flag1” so you may anywhere on site activate the flag with “?featureflag:flag1=true” or “false”

This sets a session cookie for this browser only (if you are using outputcache make it cookie dependent)

Feature flags and visitor groups in Episerver

With Episerver and “Visitor groups” you may easily use visitor group for enabling feature toggling and the possibilities are then endless.

Rule four in sample code;

flag1 = EPiServer.Security.PrincipalInfo.CurrentPrincipal.IsInRole("FeatureFlag:Flag1", EPiServer.Security.SecurityEntityType.VisitorGroup);

Activating the Flag from Epi UI

Connect the service to a property on your SiteSetting/startpage

See Rule Two in sample code.

Backend use

//_featureFlagService from DI constructor
if (_featureFlagService.IsFlag1Enabled){
//new code
return;
}
//old code

Frontend use

Populate the LayoutModel in MVC:

return new LayoutModel
{
x = ...
IsFeatureEnabled = _featureFlagService.IsFlag1Enabled
};

Output it in source:

<script>window._features = { "flag1": @(Model.Layout.IsFeatureEnabled ? "true" : "false") };</script>

Use

if (window._features.flag1) //new code

Sample code

I highly recommend this approach when working with new bigger features and releases.

Please do comment below what you think and/or/if you are using any external Feature Toggling frameworks?

Happy coding!

About the author

Luc Gosso
– Independent Senior Web Developer
working with Azure and Episerver

Twitter: @LucGosso
LinkedIn: linkedin.com/in/luc-gosso/
Github: github.com/lucgosso