Configure a Blazor Application

  • 4 minutes to read

Follow the steps below to configure your Blazor application and add DevExpress components to it.

IMPORTANT

Step 1 - Create a New Project

The following steps describe how to create a new Blazor application (Blazor Server or Blazor WebAssembly). If you want to add DevExpress Blazor components to an existing application, go to Step 2.

  1. Click Create a new project on Visual Studio's start page and select the Blazor App template.

    GettingStarted Create a New Project

  2. Click Next.

  3. Specify the project name and location.

    GettingStarted Configure a New Project

  4. Click Create.

  5. Select a project template.

  6. Click Create.

Step 2 - Obtain Your Personal DevExpress NuGet Feed

This section describes how to add DevExpress Blazor packages to your applications.

  • Make sure your DevExpress.com account has access to Blazor UI Components.
  • Obtain your personal NuGet Feed URL to add DevExpress packages to your application.

Universal/DXperience/ASP.NET Subscription

The Blazor UI Components subscription is available as part of the Universal, DXperience, or ASP.NET subscription. Refer to the subscription comparison table for more information.

Go to nuget.devexpress.com, login as a registered DevExpress customer, obtain your NuGet Feed URL, and copy it to the clipboard.

NuGet Feed

You can also access this NuGet Feed URL in the Download Manager.

Free Blazor UI Component Subscription

For a limited time, you can obtain a free Blazor UI Components subscription.

Go to the Blazor Registration page and register your personal information.

  • If you already have a DevExpress account: login, verify your contact information, and click Register.

  • If you do not have a DevExpress account: enter you contact information and click Create Account.

Open the message that was sent to your email address, and copy the NuGet Feed URL to clipboard. You can also access this NuGet Feed at nuget.devexpress.com or in the Download Manager.

Step 3 - Install the DevExpress Blazor NuGet Package

  1. In Visual Studio, select Tools -> NuGet Package Manager -> Package Manager Settings.

    GettingStarted Package Manager Settings

  2. Navigate to NuGet Package Manager -> Package Sources. Click the plus sign at the top right corner to add a new NuGet package source. Use the following package settings:

    • Name - DevExpress

    • Source - the obtained NuGet Feed URL (https://nuget.devexpress.com/{your feed authorization key}/api)

    Click OK.

    GettingStarted NuGet Feed API

    NOTE

    Make sure the nuget.org package source is also enabled.

  3. Select Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution.

  4. In the invoked dialog, open the Browse tab, select the created DevExpress package source, and install the DevExpress.Blazor NuGet package.

    GettingStarted Install Package

  5. Build the project.

Step 4 - Register DevExpress Resources

Blazor Server

  1. Add the following line to the Pages/_Host.cshtml file's HEAD section:

    <head>
        <!--...-->
        <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
    </head>
    
  2. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor
    

Blazor WebAssembly

  1. Add the following line to the wwwroot/index.html file's HEAD section:

    <head>
        <!--...-->
        <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
    </head>
    
  2. Call the AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method from your project's Program.Main() method:

    using Microsoft.Extensions.DependencyInjection;
    
    public class Program {
        public static async Task Main(string[] args) {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            // ...
            builder.Services.AddDevExpressBlazor();
            await builder.Build().RunAsync();
        }
    }
    
  3. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor
    
  4. Configure the linker as described in Configure the Linker for ASP.NET Core Blazor.

    NOTE

    If you enabled the ASP.NET Core hosted option in the Blazor WebAssembly template, make sure that the server-side project is set as the solution's startup project.

Step 5 - Add DevExpress Blazor Components

For instructions on how to add an individual DevExpress Blazor component to your application, refer to the documents below: