The requested page is not available for the requested platform. You are viewing the content for Default platform.

Create a New Blazor Application

  • 2 min 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.


  2. Click Next.

  3. Specify the project name and location.


  4. Click Create.

  5. Select a project template.


  6. Click Create.

Step 2 - Install a NuGet Package

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


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


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

    • Name - DevExpress NuGet

    • Source -{your feed authorization key}/api

    Click OK.


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

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


Step 3 - Register DevExpress Resources

  1. Build the project.

  2. Make sure the following folder is automatically created in your project’s wwwroot directory:


    For existing Blazor projects, copy the DevExpress static files from the Lib/dx-blazor folder to the appropriate folder in your project.


    The Lib/dx-blazor folder is automatically cleared while the project is built and contains static files for an installed nuget package only. Do not store your files here.

  3. Link the dx-blazor.js and dx-blazor.css files to your layout’s HEAD section:

    • For server-side Blazor, add the lines below to the _Host.cshtml file.
    • For client-side Blazor, add the lines below to the Index.cshtml file.
        <link href="lib/dx-blazor/dx-blazor.css" rel="stylesheet" />
        <script src="lib/dx-blazor/dx-blazor.js"></script>

    Reference this JavaScript file only because the dx-blazor/dx-blazor.js file is the entry point for DevExpress module files.

  4. 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: