BuyLog In
Blazor
V 20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
All docs
Docs > Get Started > Install Components and Create an Application > Alternative Install Methods > Microsoft Templates (CLI)
All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
Full-text search
Blazor Components
Get Started
Prerequisites
Install Components and Create an Application
DevExpress .NET Product Installer
Alternative Install Methods
DevExpress Templates (Visual Studio)
DevExpress Templates (CLI)
Microsoft Templates (Visual Studio)
Microsoft Templates (CLI)
Demos
Videos
Common Concepts
Data Grid
Pivot Grid
Charts
Reports
Scheduler
Data Editors
Buttons
Navigation and Layout
File Management
Rich Text Editor
API Reference
Download CHM

Microsoft Templates (CLI)

  • 4 minutes to read
IMPORTANT

Ensure your system meets these requirements.

This topic describes how to:

1. Create a New Project

Run one of the following commands to create a project:

  • Blazor Server App 

    dotnet new blazorserver -o MyBlazorServerProject
cd MyBlazorServerProject

  • Blazor WebAssembly App

    dotnet new blazorwasm -o MyBlazorWasmProject
cd MyBlazorWasmProject

  • Blazor Hosted WebAssembly App

    dotnet new blazorwasm -ho -o MyBlazorWasmHostedProject
cd MyBlazorWasmHostedProject

2. Obtain Your DevExpress NuGet Feed

You need to obtain your personal NuGet feed URL to access the DevExpress.Blazor NuGet package from your project.

  1. Make sure your DevExpress.com account has access to Blazor UI Components. This product line is available as part of the Universal, DXperience, or ASP.NET subscription. Refer to the subscription comparison matrix for more information.

  2. Use your DevExpress credentials to log into nuget.devexpress.com.

  3. Obtain your NuGet feed URL and copy it to the clipboard.

    NuGet Feed

    You can find the same URL in the Download Manager.

3. Register the NuGet Feed as a Package Source

Add the feed as a package source to your NuGet configuration files.

dotnet nuget add source https://nuget.devexpress.com/{your-feed-url}/api -n DevExpress

An error can occur if the specified source is already in the source list. Run dotnet nuget list source to view all the configured sources. Make sure that the specified source and the nuget.org package source are enabled. To enable them, use the dotnet nuget enable source command.

4. Install the DevExpress Blazor NuGet Package

Run the following commands to add the DevExpress.Blazor NuGet package to the newly created application:

dotnet add package DevExpress.Blazor
dotnet restore

5. Register DevExpress Resources

Blazor Server

  1. Add the following line to the Pages/_Host.cshtml file's HEAD section: 

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

  2. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor

  3. (Optional) Apply a DevExpress Bootstrap theme. We use the DevExpress Blazing Berry theme in our demos and documentation.

Blazor WebAssembly

  1. Add the following line to the wwwroot/index.html file's HEAD section: 

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

  2. Call the AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method from your project's Program.Main() method:

    using Microsoft.Extensions.DependencyInjection;

public class Program {
    public static async Task Main(string[] args) {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        // ...
        builder.Services.AddDevExpressBlazor();
        await builder.Build().RunAsync();
    }
}

  3. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor

  4. Configure the linker as described in Configure the Linker for ASP.NET Core Blazor.

    NOTE

    If you enabled the ASP.NET Core hosted option when you create the project, make sure that the server-side project is set as the solution's startup project.

  5. (Optional) Apply a DevExpress Bootstrap theme. We use the DevExpress Blazing Berry theme in our demos and documentation.

6. Add DevExpress Blazor Components

Add DevExpress Blazor components to any .razor file in the Pages folder. For example, the following code demonstrates how to add a DxCalendar component to Pages/Index.razor:

@page "/"

<DxCalendar @bind-SelectedDate="@SelectedDate" />

@code{
    DateTime SelectedDate { get; set; } = DateTime.Now;
}

The following help topics contain information on how to add different DevExpress Blazor components:

7. Run the Application

Run a Server or WebAssembly application:

dotnet run

Run a hosted WebAssembly application:

cd Server
dotnet run

The project starts listening on https://localhost:5000. Open it in the browser.

Run the application