Create a New Blazor Application

  • 2 minutes to read

Follow the steps below to add DevExpress Blazor components to your application. Ensure your system meets the following requirements.

Step 1 - Create a Project

  1. Create a new ASP.NET Core project in Visual Studio 2019. To do this, click Create a new project on Visual Studio's start page and select the Blazor App template.

    Blazor-GettingStarted-Create-a-New-Project

  2. Click Next.

  3. Specify the project name and location.

    Blazor-GettingStarted-Configure-a-New-Project

  4. Click Create.

  5. Select a project template.

    Blazor-GettingStarted-Select-Template

  6. Click Create.

Step 2 - Install a NuGet Package

  1. Go to nuget.devexpress.com, log in as a registered DevExpress customer and click Obtain Feed URL and copy the feed URL to clipboard.

    Blazor-NuGet-Feed

  2. Select Tools -> NuGet Package Manager -> Package Manager Settings.

    Blazor-GettingStarted-Package-Manager-Settings

  3. 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 - https://nuget.devexpress.com/{your feed authorization key}/api

    Click OK.

    Blazor-GettingStarted-NuGet-Feed-API

    NOTE

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

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

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

    To install the latest Release package version, clear the Include prereleases checkbox. To test a Beta version of the DevExpress.Blazor NuGet package, make sure that the Include prerelease option is enabled.

    Blazor-GettingStarted-Install-Package

Step 3 - Register DevExpress Resources

  1. Build the project.

  2. Link the following file to your layout’s HEAD section:

    • For Blazor Server (aka server-side Blazor), add the line below to the Pages/_Host.cshtml file.

      <head>
          ...
          <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
      </head>
      
    • For Blazor WebAssembly (aka client-side Blazor), add the line below to the wwwroot/index.html file.

      <head>
          ...
          <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
      </head>
      

      Call the AddDevExpressBlazor(IServiceCollection) method from your project's Program.Main() method:

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

    @using DevExpress.Blazor
    

Step 4 - Add DevExpress Blazor Components

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