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 the Blazor (server-side) project template.


  6. Click Create.

Step 2 - Install a NuGet Package

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


  2. 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 Early Access

    • Source -

    Click OK.


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

  4. In the invoked dialog, select the created DevExpress Early Access 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: