Skip to main content
BuyLog In
Blazor
Search in…
Docs > Get Started - Blazor Server and WebAssembly > Microsoft Templates (DevExpress Installation)
A newer version of this page is available. .
All docs
V22.2
Blazor Components
Prerequisites
Supported Browsers
Get Started - Blazor Server and WebAssembly
DevExpress Templates (DevExpress Installation)
DevExpress Templates (NuGet Packages)
DevExpress Templates (.NET CLI)
Microsoft Templates (DevExpress Installation)
Microsoft Templates (NuGet Packages)
Microsoft Templates (.NET CLI)
Get Started - Blazor Hybrid
Troubleshooting
Demos
Videos
Common Concepts
Grid
Pivot Grid
Charts
Reports
Scheduler
Rich Text Editor
Data Editors
Buttons
Navigation and Layout
File Management
Dashboard
XAF (App UI & Security API)
Maintenance Mode
API Reference
Download CHM

Microsoft Templates (DevExpress Installation)

  • 4 minutes to read

Watch Video: Creating a Blazor Server & WebAssembly Apps Using Microsoft Templates

Important

  1. Ensure your system meets these requirements.
  2. Use the DevExpress .NET Product Installer to install DevExpress Blazor components.

This topic describes how to:

  • Use Microsoft templates to create a Blazor Server or WebAssembly project
  • Configure the project to use DevExpress components
  • Add DevExpress components

1. Create a New Project

This section describes how to create a new Blazor project. If you want to add DevExpress Blazor components to an existing application, go to Step 2.

  1. Click Create a new project on Visual Studio’s start page, select the Blazor Server App or Blazor WebAssembly App template, and click Next.

    Getting Started - Create a New Project

  2. Specify the project name and location, and click Next.

    Getting Started - Configure a New Project

  3. Specify additional options, and click Create.

    Additional Options

2. Install the DevExpress Blazor NuGet Package

  1. Select Tools → NuGet Package Manager → Manage NuGet Packages for Solution.

  2. Once the dialog appears on screen, open the Browse tab, select the DevExpress 22.2 Local package source, and install the DevExpress.Blazor NuGet package.

    The DevExpress 22.2 Local package is automatically added as a package source to your NuGet configuration files if you used the DevExpress .NET Product Installer.

    Install Package

  3. Build the project.

3. Register DevExpress Resources

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

    @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. 

    using DevExpress.Blazor;

/* ... */

builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5);

  3. Apply a theme in the layout file – Pages/_Layout.cshtml (Server, .NET6), Pages/_Host.cshtml (Server, .NET7), or wwwroot/index.html (WebAssembly and Hybrid). Do one of the following:

    • You can 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.

      <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>

    • The project may already contain a link to the standard or custom Bootstrap theme. In this case, you should also add a link to the bootstrap-external stylesheet (v4 or v5). This stylesheet applies 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 Blazor Server only. 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.

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

  5. For Blazor WebAssembly only. 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.

4. Add DevExpress Blazor Components

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