Quickstart: Create an ASP.NET Core app with Azure App Configuration
In this quickstart, you'll use Azure App Configuration to centralize storage and management of application settings for an ASP.NET Core app. ASP.NET Core builds a single, key-value-based configuration object using settings from one or more data sources specified by an app. These data sources are known as configuration providers. Because App Configuration's .NET Core client is implemented as a configuration provider, the service appears like another data source.
Prerequisites
- Azure subscription - create one for free
- .NET Core SDK
Tip
The Azure Cloud Shell is a free, interactive shell that you can use to run the command line instructions in this article. It has common Azure tools preinstalled, including the .NET Core SDK. If you're logged in to your Azure subscription, launch your Azure Cloud Shell from shell.azure.com. You can learn more about Azure Cloud Shell by reading our documentation
Create an App Configuration store
To create a new App Configuration store, sign in to the Azure portal. In the upper-left corner of the home page, select Create a resource. In the Search services and marketplace box, enter App Configuration and select Enter.
Select App Configuration from the search results, and then select Create.
On the Create App Configuration pane, enter the following settings:
Setting Suggested value Description Subscription Your subscription Select the Azure subscription that you want to use to test App Configuration. If your account has only one subscription, it's automatically selected and the Subscription list isn't displayed. Resource group AppConfigTestResources Select or create a resource group for your App Configuration store resource. This group is useful for organizing multiple resources that you might want to delete at the same time by deleting the resource group. For more information, see Use resource groups to manage your Azure resources. Resource name Globally unique name Enter a unique resource name to use for the App Configuration store resource. The name must be a string between 5 and 50 characters and contain only numbers, letters, and the -
character. The name can't start or end with the-
character.Location Central US Use Location to specify the geographic location in which your app configuration store is hosted. For the best performance, create the resource in the same region as other components of your application. Pricing tier Free Select the desired pricing tier. For more information, see the App Configuration pricing page. Select Review + create to validate your settings.
Select Create. The deployment might take a few minutes.
After the deployment finishes, navigate to the App Configuration resource. Select Settings > Access keys. Make a note of the primary read-only key connection string. You'll use this connection string later to configure your application to communicate with the App Configuration store that you created.
Select Operations > Configuration explorer > Create > Key-value to add the following key-value pairs:
Key Value TestApp:Settings:BackgroundColor
#FFF TestApp:Settings:FontColor
#000 TestApp:Settings:FontSize
24 TestApp:Settings:Message
Data from Azure App Configuration Leave Label and Content type empty for now. Select Apply.
Create an ASP.NET Core web app
Use the .NET Core command-line interface (CLI) to create a new ASP.NET Core MVC project. The Azure Cloud Shell provides these tools for you. They're also available across the Windows, macOS, and Linux platforms.
Run the following command to create an ASP.NET Core MVC project in a new TestAppConfig folder:
dotnet new mvc --no-https --output TestAppConfig
Add Secret Manager
A tool called Secret Manager stores sensitive data for development work outside of your project tree. This approach helps prevent the accidental sharing of app secrets within source code. Complete the following steps to enable the use of Secret Manager in the ASP.NET Core project:
Navigate to the project's root directory, and run the following command to enable secrets storage in the project:
dotnet user-secrets init
A UserSecretsId
element containing a GUID is added to the .csproj file:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<UserSecretsId>8296b5b7-6db3-4ae9-a590-899ac642c0d7</UserSecretsId>
</PropertyGroup>
</Project>
Tip
To learn more about Secret Manager, see Safe storage of app secrets in development in ASP.NET Core.
Connect to the App Configuration store
Run the following command to add a Microsoft.Azure.AppConfiguration.AspNetCore NuGet package reference:
dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
Run the following command in the same directory as the .csproj file. The command uses Secret Manager to store a secret named
ConnectionStrings:AppConfig
, which stores the connection string for your App Configuration store. Replace the<your_connection_string>
placeholder with your App Configuration store's connection string. You can find the connection string under Access Keys in the Azure portal.dotnet user-secrets set ConnectionStrings:AppConfig "<your_connection_string>"
Important
Some shells will truncate the connection string unless it's enclosed in quotes. Ensure that the output of the
dotnet user-secrets list
command shows the entire connection string. If it doesn't, rerun the command, enclosing the connection string in quotes.Secret Manager is used only to test the web app locally. When the app is deployed to Azure App Service, use the Connection Strings application setting in App Service instead of Secret Manager to store the connection string.
Access this secret using the .NET Core Configuration API. A colon (
:
) works in the configuration name with the Configuration API on all supported platforms. For more information, see Configuration keys and values.Select the correct syntax based on your environment.
In Program.cs, replace its content with the following code:
var builder = WebApplication.CreateBuilder(args); //Retrieve the Connection String from the secrets manager var connectionString = builder.Configuration.GetConnectionString("AppConfig"); builder.Host.ConfigureAppConfiguration(builder => { //Connect to your App Config Store using the connection string builder.AddAzureAppConfiguration(connectionString); }) .ConfigureServices(services => { services.AddControllersWithViews(); }); var app = builder.Build(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); } app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); app.Run();
This code will connect to your App Configuration store using a connection string and load all key-values. For more information on the configuration provider APIs, reference the configuration provider for App Configuration docs.
Read from the App Configuration store
Complete the following steps to read and display values stored in the App Configuration store. The .NET Core Configuration API will be used to access the store. Razor syntax will be used to display the keys' values.
Open <app root>/Views/Home/Index.cshtml, and replace its content with the following code:
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
<style>
body {
background-color: @Configuration["TestApp:Settings:BackgroundColor"]
}
h1 {
color: @Configuration["TestApp:Settings:FontColor"];
font-size: @Configuration["TestApp:Settings:FontSize"]px;
}
</style>
<h1>@Configuration["TestApp:Settings:Message"]</h1>
In the preceding code, the App Configuration store's keys are used as follows:
- The
TestApp:Settings:BackgroundColor
key's value is assigned to the CSSbackground-color
property. - The
TestApp:Settings:FontColor
key's value is assigned to the CSScolor
property. - The
TestApp:Settings:FontSize
key's value is assigned to the CSSfont-size
property. - The
TestApp:Settings:Message
key's value is displayed as a heading.
Build and run the app locally
To build the app using the .NET Core CLI, navigate to the root directory of your project. Run the following command in the command shell:
dotnet build
After the build completes successfully, run the following command to run the web app locally:
dotnet run
If you're working on your local machine, use a browser to navigate to
http://localhost:5000
or as specified in the command output. This address is the default URL for the locally hosted web app. If you're working in the Azure Cloud Shell, select the Web Preview button followed by Configure.When prompted to configure the port for preview, enter 5000 and select Open and browse. The web page will read "Data from Azure App Configuration."
Clean up resources
If you do not want to continue using the resources created in this article, delete the resource group you created here to avoid charges.
Important
Deleting a resource group is irreversible. The resource group and all the resources in it are permanently deleted. Make sure that you don't accidentally delete the wrong resource group or resources. If you created the resources for this article inside a resource group that contains other resources you want to keep, delete each resource individually from its respective pane instead of deleting the resource group.
- Sign in to the Azure portal, and select Resource groups.
- In the Filter by name box, enter the name of your resource group.
- In the result list, select the resource group name to see an overview.
- Select Delete resource group.
- You're asked to confirm the deletion of the resource group. Enter the name of your resource group to confirm, and select Delete.
After a few moments, the resource group and all its resources are deleted.
Next steps
In this quickstart, you:
- Provisioned a new App Configuration store.
- Registered the App Configuration store's .NET Core configuration provider.
- Read the App Configuration store's keys with the configuration provider.
- Displayed the App Configuration store's key values using Razor syntax.
To learn how to configure your ASP.NET Core app to dynamically refresh configuration settings, continue to the next tutorial.
Feedback
Submit and view feedback for