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.

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

    Blazor-GettingStarted-Select-Template

  6. Click Create.

Step 2 - Install a NuGet Package

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

    Blazor-GettingStarted-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 - https://nuget.devexpress.com/early-access/api

    Click OK.

    Blazor-GettingStarted-Early-Access-API

  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.

    Blazor-GettingStarted-Install-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:

    Lib/dx-blazor
        dx-blazor/.gitignore
        dx-blazor/modules/
        dx-blazor/dx-blazor.js
        dx-blazor/dx-blazor.css
    

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

    Note

    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.
    <head>
        ...
        <link href="lib/dx-blazor/dx-blazor.css" rel="stylesheet" />
        <script src="lib/dx-blazor/dx-blazor.js"></script>
    </head>
    
    Note

    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: