Feature flags are a way of controlling the availability and behavior of features in your application without changing the code. They can help you with testing, experimentation, and gradual rollout of new functionality. Blazor is a framework for building interactive web UIs using C# and .NET. In this blog post, I will show you how to use feature flags in a Blazor application using a simple in-memory feature manager and a custom feature flag component.<\/p>\n\n\n\n
To follow this tutorial, you will need:<\/p>\n\n\n\n
The first step is to define some feature flags in appsettings.json. This is a JSON file that stores the configuration settings for your application. You can use it to store the names and values of your feature flags. To do this, follow these steps:<\/p>\n\n\n\n
Your appsettings.json file should look something like this:<\/p>\n\n\n\n
{\n \"FeatureManagement\": {\n \"Counter\": \"true\"\n }\n}<\/code><\/pre>\n\n\n\nStep 2: Create a feature manager service<\/h2>\n\n\n\n
The next step is to create a feature manager service that will read the feature flag settings from appsettings.json and provide a method to check the feature flag state. To do this, follow these steps:<\/p>\n\n\n\n
\n- In the Solution Explorer, right-click on your project and select Add > Class.<\/li>\n\n\n\n
- Name the class FeatureManager.cs and replace the existing code with the following code:<\/li>\n<\/ul>\n\n\n\n
using Microsoft.Extensions.Configuration;\r\nusing System.Threading.Tasks;\r\n\r\nnamespace FeatureFlagBlazorExample.Client.Helpers\r\n{\r\n\r\n public interface IFeatureManager\r\n {\r\n bool IsEnabled(string feature);\r\n }\r\n\r\n public class FeatureManager : IFeatureManager\r\n {\r\n private readonly IConfiguration _configuration;\r\n\r\n public FeatureManager(IConfiguration configuration)\r\n {\r\n _configuration = configuration;\r\n }\r\n\r\n public bool IsEnabled(string feature)\r\n {\r\n if (!string.IsNullOrEmpty(feature))\r\n {\r\n return _configuration.GetValue<bool>($\"FeatureManagement:{feature}\");\r\n }\r\n return false;\r\n }\r\n }\r\n}\r\n<\/code><\/pre>\n\n\n\nThis class implements the IFeatureManager interface, which defines a method called IsEnabledAsync that takes a feature name as a parameter and returns a boolean value indicating whether the feature is enabled or not. The class uses the IConfiguration service to access the appsettings.json file and read the feature flag settings.<\/p>\n\n\n\n
\n- In the program.cs file, add the following line before the line that contains await builder.Build().RunAsync();<\/li>\n<\/ul>\n\n\n\n
builder.Services.AddSingleton<IFeatureManager, FeatureManager>();<\/code><\/pre>\n\n\n\nThis will register the FeatureManager class as a singleton service that implements the IFeatureManager interface.<\/p>\n\n\n\n
Step 3: Create a feature flag component<\/h2>\n\n\n\n
The final step is to create a feature flag component that will render its child content only if the feature flag with the given name is enabled. It will use the IFeatureManager service to check the feature flag state asynchronously. To do this, follow these steps:<\/p>\n\n\n\n
\n- In the Solution Explorer, right-click on the Pages folder and select Add > Razor Component.<\/li>\n\n\n\n
- Name the component FeatureFlag.razor and replace the existing code with the following code:<\/li>\n<\/ul>\n\n\n\n
@using FeatureFlagBlazorExample.Client.Helpers;\r\n@inject IFeatureManager FeatureManager\r\n\r\n\r\n@if (featureIsEnabled)\r\n{\r\n @ChildContent\r\n}\r\n\r\n@code {\r\n private bool featureIsEnabled = false;\r\n\r\n [Parameter]\r\n public RenderFragment ChildContent { get; set; }\r\n\r\n [Parameter]\r\n public string FlagName { get; set; }\r\n\r\n protected override void OnInitialized()\r\n {\r\n Console.WriteLine(FlagName);\r\n if (string.IsNullOrEmpty(FlagName))\r\n return;\r\n\r\n featureIsEnabled = FeatureManager.IsEnabled(FlagName);\r\n Console.WriteLine(featureIsEnabled);\r\n }\r\n\r\n}<\/code><\/pre>\n\n\n\nThis component will render its child content only if the feature flag with the given name is enabled. It uses the IFeatureManager service to check the feature flag state asynchronously.<\/p>\n\n\n\n
Step 4: Use feature flags in your Blazor components<\/h2>\n\n\n\n
Now you are ready to use feature flags in your Blazor components. This will allow you to show or hide features based on the feature flag settings in appsettings.json. To do this, follow these steps:<\/p>\n\n\n\n
\n- In the Solution Explorer, open the Counter.razor component and wrap the content of the page within the FeatureFlag like so <\/li>\n<\/ul>\n\n\n\n
@page \"\/counter\"\r\n<FeatureFlag FlagName=\"Counter\">\r\n <PageTitle>Counter<\/PageTitle>\r\n\r\n <h1>Counter<\/h1>\r\n\r\n <p role=\"status\">Current count: @currentCount<\/p>\r\n\r\n <button class=\"btn btn-primary\" @onclick=\"IncrementCount\">Click me<\/button>\r\n<\/FeatureFlag>\r\n\r\n@code {\r\n private int currentCount = 0;\r\n\r\n private void IncrementCount()\r\n {\r\n currentCount++;\r\n }\r\n}\r\n<\/code><\/pre>\n\n\n\nRun your Blazor application and navigate to the home page and the fetch data page. You should see the features appear or disappear based on the feature flag settings in appsettings.json. You can also change the feature flag settings in appsettings.json and refresh the app in the browser. If it doesn’t work, you might need to check whether you have hot reload enabled or check if you actualy saved the change in the appsettings.json.<\/p>\n\n\n\n