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 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 left corner to add a new NuGet package source. Use the following package settings:

    • Name - DevExpress NuGet

    • Source - https://nuget.devexpress.com/{your feed authorization key}/api

    Click OK.

    Blazor-GettingStarted-NuGet-Feed-API

  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.

    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: