Microsoft Templates (.NET CLI)

• Nov 29, 2023
• 6 minutes to read

Important

Ensure your system meets these requirements.

This topic describes how to:

• Use Microsoft Templates to create a Blazor application from .NET Core CLI.
• Install the DevExpress.Blazor NuGet package that includes DevExpress components.
• Add DevExpress components to a project.

You can execute CLI commands in any command line interpreter: Command Prompt (CMD), Visual Studio Code and macOS terminals, and others.

1. Create a New Project

Run one of the following commands to create a project:

• Blazor App for .NET 6 or .NET 7:

  Server

  dotnet new blazorserver -n MyBlazorServerProject
  

  WebAssembly

  dotnet new blazorwasm -n MyBlazorWasmProject
  

  Hosted WebAssembly

  dotnet new blazorwasm -ho -n MyBlazorWasmHostedProject
  

• Blazor App for .NET 8:

  Server

  dotnet new blazor -n MyBlazorInteractiveServerApp
  

  WebAssembly

  dotnet new blazor -n MyBlazorInteractiveWasmApp -int WebAssembly
  

  Auto

  dotnet new blazor -n MyBlazorInteractiveAutoApp-int Auto
  

2. Obtain Your NuGet Feed Credentials

You need to obtain your personal NuGet feed credentials to access the DevExpress.Blazor NuGet package from your project. You can use NuGet feed URL or feed authorization key to manage DevExpress packages.

1. Make sure your DevExpress.com account has access to Blazor UI Components. This product line is included in the Universal, DXperience, and ASP.NET subscriptions. 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 credentials and copy them to the clipboard.

   

   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. To do this, create the nuget.config file with the following content:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="MyGet" value="https://api.nuget.org/v3/index.json" />
    <add key="DevExpress Nuget server" value="https://nuget.devexpress.com/{your-feed-authorization-key}/api/v3/index.json" />
  </packageSources>
</configuration>

Alternatively, you can use console commands:

.NET Core CLI

# Register packages with an authorization key
dotnet nuget add source https://nuget.devexpress.com/api/v3/index.json -n DXFeed -u DevExpress -p {your-feed-authorization-key}

# Register packages with a feed URL
dotnet nuget add source https://nuget.devexpress.com/{your-feed-authorization-key}/api/v3/index.json -n DXFeed

Refer to the following topic for more information: Install NuGet Packages with Command Line Interface (CLI) Tools.

An error can occur if the specified source is already in the source list. You can run dotnet nuget list source to view all the configured sources and ensure the specified and nuget.org package sources 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:

.NET Core CLI

dotnet add package DevExpress.Blazor
dotnet restore

5. Register DevExpress Resources

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

   _Imports.razor

   @using DevExpress.Blazor
   

2. Open the Program.cs file and add using DevExpress.Blazor. Then call the AddDevExpressBlazor method and specify the BootstrapVersion global option. The option’s default value is v4. If your application uses a theme based on Bootstrap 5, you should set the BootstrapVersion property to v5.

   Program.cs (Server or WebAssembly)

   using DevExpress.Blazor;
   
   /* ... */
   
   builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5);
   

3. Apply a theme with one of the following approaches:

   Note

   Based on your project structure, apply a theme in the appropriate project file:

   • Pages/_Layout.cshtml for Blazor Server applications created with a Microsoft template in .NET 6
   • Pages/_Host.cshtml for Blazor Server applications created with a DevExpress Template in .NET 6 and .NET 7 or with a Microsoft template in .NET 7
   • wwwroot/index.html for Blazor WebAssembly or Hybrid applications in .NET 6 and .NET 7
   • Components/App.razor for Blazor Web applications in .NET 8

   • Apply a DevExpress theme. We use the DevExpress Blazing Berry theme in our documentation. To apply this theme, add a link to a theme’s stylesheet before the site.css and <ProjectName>.styles.css links.

     If you do not implement any solutions to refresh cached resources on user machines, add the asp-append-version attribute to the theme link. The attribute ensures that web browsers on user machines use the actual version of DevExpress CSS resources instead of a version cached before. Refer to HTTP caching for more information about the browser cache.

     Blazing Berry

     <head>
         @*...*@
         @* Bootstrap 5 *@
         <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet"
                 asp-append-version="true"/>
         @* Bootstrap 4 *@
         <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs4.min.css" rel="stylesheet"
                 asp-append-version="true"/>
         <link href="css/site.css" rel="stylesheet" />
         <link href="<ProjectName>.styles.css" rel="stylesheet" />
         @*...*@
     </head>
     

   • Apply a Bootstrap theme. The project may already contain a link to the standard or custom Bootstrap theme. In this case, add a link to the bootstrap-external stylesheet (v4 or v5) to apply CSS variables from Bootstrap CSS files to DevExpress Blazor components.

     <head>
         @*...*@
         @* Bootstrap theme *@
         <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     
         @* bootstrap-external for Bootstrap 5 *@
         <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" /> 
         @* bootstrap-external for Bootstrap 4 *@
         <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css" />
         @*...*@
     </head>
     

4. For .NET 8 only. Register scripts required by DevExpress components – open the App.razor file and call the DxResourceManager.RegisterScripts method.

   App.razor

   <head>
       @*...*@
       <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.css" rel="stylesheet" asp-append-version="true" />
       @DxResourceManager.RegisterScripts()
       @*...*@
   </head>
   

5. For Blazor Server only (.NET 6 and .NET 7). Call the UseStaticWebAssets method on the host builder in the Program.cs file to enable the application to load client-side resources. Refer to the following topic for details: Static files in non-Development environments for Blazor Server apps.

   Program.cs

   builder.WebHost.UseWebRoot("wwwroot");
   builder.WebHost.UseStaticWebAssets();
   

6. For Blazor WebAssembly only (.NET 6 and .NET 7). If you enabled the ASP.NET Core hosted option when you created the project, make sure that the server-side project is set as the solution’s startup project.

6. Add DevExpress Blazor Components

Add DevExpress Blazor components to any .razor file in the Pages folder. For .NET 8 projects, enable interactivity for DevExpress components:

• Make sure the required interactive services are registered in the Program.cs file.

• Add the corresponding render mode attribute to a component’s page.

The following code demonstrates how to add a DxCalendar component to Pages/Index.razor based on the framework version:

.NET 6.0 or .NET 7.0

@page "/"

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

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

.NET 8.0

@page "/"
@rendermode InteractiveServer 

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

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

For instructions on how to add an individual DevExpress Blazor component to your application, refer to the documents below:

Accordion Button Calendar Chart CheckBox ComboBox Context Menu Dashboard

DropDown Flyout Form Layout Date Edit Grid Grid Layout Layout Breakpoint List Box

Loading Panel Masked Input Memo Menu Pager Pie Chart Pivot Grid Popup

Radio RadioGroup Reports Rich Text Editor Scheduler Spin Edit Stack Layout Tabs

TagBox Text Box Time Edit Toolbar TreeView Upload Wait Indicator Window

7. Run the Application

Use the corresponding command from the list below to run the application:

• Blazor App for .NET 6 or .NET 7:

  Server

  cd MyBlazorServerProject
  dotnet run
  

  WebAssembly

  cd MyBlazorWasmProject
  dotnet run
  

  Hosted WebAssembly

  cd MyBlazorWasmHostedProject
  dotnet run --project Server
  

• Blazor App for .NET 8:

  Server

  cd MyBlazorInteractiveServerApp
  dotnet run
  

  WebAssembly

  cd MyBlazorInteractiveWasmApp
  dotnet run --project MyBlazorInteractiveWasmApp
  

  Auto

  cd MyBlazorInteractiveAutoApp
  dotnet run --project MyBlazorInteractiveAutoApp
  

The command output contains the application URL, which can be different on different hosts:

Now listening on: http://localhost:5000

Open your browser and navigate to the URL to see the result.