{"id":159,"date":"2020-06-24T15:00:45","date_gmt":"2020-06-24T13:00:45","guid":{"rendered":"https:\/\/archicode.be\/?p=159"},"modified":"2020-06-24T15:00:45","modified_gmt":"2020-06-24T13:00:45","slug":"feature-flags-using-azure-feature","status":"publish","type":"post","link":"https:\/\/archicode.be\/index.php\/2020\/06\/24\/feature-flags-using-azure-feature\/","title":{"rendered":"Feature flags using Azure feature"},"content":{"rendered":"\n

Feature flags are very useful when you develop an application and while you don’t want users to use the feature that isn’t really ready, you don’t want to stay on a side branch for too long as merging and rebasing from the main branch can become quite the chore. Enter feature flags.<\/p>\n\n\n\n

So how do we do it?<\/h2>\n\n\n\n

There are tons of libraries we can use to do this but before we get into that, a word of caution : Get Rid Of Your Feature Flags As Soon As You Don’t Need Them Anymore. <\/strong><\/em>Creating feature flags is easy, managing them can become a headache, especially when you have a list of them in your configuration files and\/or in your code. The feature flag must <\/strong><\/em>be removed as soon as it is not needed anymore whether the feature is ready to be used, or is never going to be used or whatever reason you may find that makes hiding the feature unnecessary anymore.<\/p>\n\n\n\n

As I’m a big fan of Azure, we will leverage it to create, manage and remove our feature flags with very little hassle if at all. To continue this guide, you need an azure account. You can create it here<\/a><\/strong>, it is free and you have access to a lot of different functions and infrastructures. Once you’re done, you can come back and we’ll go on.<\/p>\n\n\n\n

In Azure<\/h2>\n\n\n\n

Once you’re in azure, you need to create your app configuration. This is basically very similar to a simple appsettings.json file but it’s hosted in Azure instead of being deployed with your application. There are many advantages to do this but it is well beyond the scope of this article.<\/p>\n\n\n\n

To create an app configuration, you need to click on the create resource button and then search for app configuration. <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Once you click on it, and then on the create button, you’ll get to choose which subscription to use, which resource group you want it to be a part of, its name, location and the pricing tier (between free and standard, I choose free \ud83d\ude01)<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n

You’ll be asked for a confirmation and then you’ll have to wait for a few seconds for the app configuration to be created and deployed in Azure.
Before you move on, copy and paste the connection string to the resource. You can find it under Settings > Access Keys. You’re going to need it afterwards.<\/p>\n\n\n\n

Create your first Feature Flag<\/h2>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

In the resource you just created, under operations<\/em> you’ll find the Feature manager. To create one, all you have to do is to click on the add button on the top of the blade (a blade is a section screen in the Azure dashboard).
You have to enter the name of the feature and a description.
An important concept on this screen is the toggle On\/Off. When selecting On, you mark the feature as active. While this is something that you might need, I advise to always create the feature as Off and activate it only when you are ready.
Once you’re happy with the data you just filled in, click on the apply button on the bottom of the screen et voil\u00e0<\/em>! The feature is created we can now go to Visual Studio, open our application and use our newly created Feature Flag.<\/p>\n\n\n\n

Configure your application<\/h2>\n\n\n\n

Before we dive into the code, you need to tell the application to use the app settings feature in Azure. Now, we could just copy and paste the connection string in the appsettings.json, but we’re going to store it in the local user-secret repo in your application folder. To do so, all you need to do is open a terminal, go to your application folder and type this command.<\/p>\n\n\n\n

dotnet user-secrets set ConnectionStrings:AppConfig <your connection string><\/code><\/pre>\n\n\n\n
if you have this error : “Could not find the global property ‘UserSecretsId’ in MSBuild project”, run the dotnet user-secrets init<\/strong> first and run the command again.
You may also need to add double quotes to the connection string you copied from azure like so Endpoint=”https:\/\/yourconfig.azconfig.io;Id=yourid;Secret=yoursecret<\/strong>” other wise you may get this error : 
Could not execute because the specified command or file was not found.
 Possible reasons for this include:
 You misspelled a built-in dotnet command.
 You intended to execute a .NET Core program, but dotnet-user-secret does not exist.
 You intended to run a global tool, but a dotnet-prefixed executable with this name could not be found on the PATH. <\/em>

or that one 

The term ‘Id=<something>’ is not recognized as the name of a
 cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify
 that the path is correct and try again.<\/em><\/p>\n\n\n\n
In order to tell your application that it needs to use the Feature Flags configured in Azure, you need to 
1. Install the following nuget package : Microsoft.Azure.Appconfiguration.AspNetCore<\/em> and Microsoft.FeatureManagement.AspNetCore<\/em>
2. have the following code in your program.cs<\/strong><\/p>\n\n\n\n
public static IHostBuilder CreateHostBuilder(string[] args) =>\n            Host.CreateDefaultBuilder(args)\n            .ConfigureAppConfiguration((hostingContext, config) =>\n            {\n                var settings = config.Build();\n                config.AddAzureAppConfiguration(options =>\n                {\n                    options.Connect(settings[\"ConnectionStrings:AppConfig\"]).UseFeatureFlags();\n                });\n            })\n            .ConfigureWebHostDefaults(webBuilder =>\n                {                    \n                    webBuilder.UseStartup<Startup>();\n                });<\/code><\/pre>\n\n\n\n
What does this code do?  
The ConfigureAppConfiguration method is used to tell your app that you will have a configuration file and the AddAzureAppConfiguration method just tells it where to go look for the configuration.  Note that you don’t have to configure anything else in order to get the connection string from the user-secrets you created earlier.<\/p>\n\n\n\n
Now, we need to go to the startup.cs<\/strong> file and add a couple more setups.
In the ConfigureServices method, we need to add services.AddFeatureManagement(); and in the Configure method, we add the middleware app.UseAzureAppConfiguration();<\/p>\n\n\n\n
Use the Feature Flags<\/h2>\n\n\n\n
We use the built-in Dependency Injection to inject the IFeatureManagementSnapshot dependency in order to use it in our web page.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
We can now hide a section of our code behind an plain old if statement.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
There are other ways to use the Feature Flags in a web application, like by using annotations and even directly in the razor code, but that’s going to be for another post.

You can find the code used in this post here https:\/\/github.com\/HerraHak\/FeatureFlagDemo<\/a>.
<\/p>\n\n\n\n
Happy coding !<\/p>\n","protected":false},"excerpt":{"rendered":"
Feature flags are very useful when you develop an application and while you don’t want users to use the feature that isn’t really ready, you don’t want to stay on a side branch for too long as merging and rebasing from the main branch can become quite the chore. Enter feature flags. So how do…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[2],"tags":[],"class_list":["post-159","post","type-post","status-publish","format-standard","hentry","category-net"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":324,"url":"https:\/\/archicode.be\/index.php\/2023\/11\/07\/how-to-use-feature-flags-in-blazor\/","url_meta":{"origin":159,"position":0},"title":"How to use Feature Flags in Blazor","author":"Hakim","date":"November 7, 2023","format":false,"excerpt":"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,\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":366,"url":"https:\/\/archicode.be\/index.php\/2024\/05\/11\/understanding-inject-in-blazor-components\/","url_meta":{"origin":159,"position":1},"title":"Understanding @inject in Blazor Components","author":"Hakim","date":"May 11, 2024","format":false,"excerpt":"Blazor, Microsoft\u2019s framework for building interactive client-side web UI with .NET, offers a robust solution for dependency injection (DI) in the form of the\u00a0@inject\u00a0directive. This powerful feature allows developers to inject services directly into their components, promoting a clean and modular architecture. What is Dependency Injection? Dependency Injection (DI) is\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":60,"url":"https:\/\/archicode.be\/index.php\/2019\/02\/17\/encourage-your-kids-to-read-books\/","url_meta":{"origin":159,"position":2},"title":"Encourage your kids to read books","author":"Hakim","date":"February 17, 2019","format":false,"excerpt":"Books are a given, or so I thought. While technological progress allowed many children to receive a smartphone from parents, grand-parents, uncles, aunts,... It seems to be detrimental to books and children willingness to read them. I have loved technology for as long I can remember, even before my parents\u2026","rel":"","context":"In "Misc"","block_context":{"text":"Misc","link":"https:\/\/archicode.be\/index.php\/category\/misc\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":287,"url":"https:\/\/archicode.be\/index.php\/2023\/05\/28\/infrastructure-as-code-and-source-controle\/","url_meta":{"origin":159,"position":3},"title":"Infrastructure as Code and source controle","author":"Hakim","date":"May 28, 2023","format":false,"excerpt":"For those who don't what is this about, Infrastructure as Code is a set of files when executed with the right tool, will create resources such as storage account, databases, virtual network etc. It is mostly associated with the cloud. As I've been working lately with Terraform, I really enjoyed\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":92,"url":"https:\/\/archicode.be\/index.php\/2019\/06\/10\/how-to-blazorify-an-existing-mvc-app\/","url_meta":{"origin":159,"position":4},"title":"How to blazorify an existing mvc app","author":"Hakim","date":"June 10, 2019","format":false,"excerpt":"Blazor is awesome. \u00a0If you don't know what it is, you can check it out here\u00a0but to summarize, it's a framework that allows .net code to run in your browser using the power of Web Assembly. I've found a lot of tutorials using the official blazor templates but only hints\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"migrate_solution_to_dotnet_core_3.gif","src":"\/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 1x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 1.5x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 2x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 3x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 4x"},"classes":[]},{"id":163,"url":"https:\/\/archicode.be\/index.php\/2020\/07\/07\/blazor-convince-your-architect\/","url_meta":{"origin":159,"position":5},"title":"Blazor : convince your CTO (or whomever takes the technical decisions)","author":"Hakim","date":"July 7, 2020","format":false,"excerpt":"When there is something new on the market, we developers want to work with it. There might be several reasons for that, but not always the shortcut decision makers think we favour, which is wanting to try the new shiny thing. Most of the time, we want to work with\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/comments?post=159"}],"version-history":[{"count":0,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts\/159\/revisions"}],"wp:attachment":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/media?parent=159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/categories?post=159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/tags?post=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}