Skip to main content
BuyLog In
Blazor
Search in…
Docs > Get Started > Create a Project > Blazor Web App
All docs
V24.1
Blazor Components
Prerequisites
Supported Browsers
Get Started
Install Components and Project Templates
Create a Project
Blazor Web App
Blazor Hybrid
Set Up NuGet Packages
Register DevExpress Resources
Add Components to the Application
Enable Interactive Render Mode
Upgrade to a New Version
Demos
Examples
Videos
Common Concepts
Components
Styling and Themes
Security Considerations
Troubleshooting
Blazor & WinForms App UI Framework (Powered by EF Core)
Maintenance Mode
API Reference
Download CHM

Create a Blazor Web App

  • 4 minutes to read

This topic contains detailed instructions on how to create Blazor Web App applications from both DevExpress and Microsoft templates in Visual Studio and the .NET CLI.

Important

Ensure your system meets these requirements.

The following options are available:

Watch Video: Creating a Blazor Web App Using DevExpress Templates (.NET 8)

Watch Video: Adding DevExpress Blazor Components to an Existing Project (.NET 8)

Watch Video: Creating Blazor Server & WebAssembly Apps Using DevExpress Templates (.NET 6)

Watch Video: Creating Blazor Server & WebAssembly Apps Using Microsoft Templates (.NET 6)

Follow the steps below to run the DevExpress Template Gallery in Visual Studio:

  1. Open Visual Studio and click Create a new project on the start page.

  2. In the Create a New Project dialog, select DevExpress v24.1 Blazor App Template Gallery and click Next.

    Create a new application

  3. Specify the Project Name and Location, and click Create.

  4. In the invoked Template Gallery, specify Project Name, Target Framework, Render Mode, and Authentication options, and click Run Wizard.

    Template Gallery

  5. The Project Wizard appears.

    Project Wizard - Themes

    The wizard includes the following tabs:

    Themes. Choose a built-in DevExpress theme or a Bootstrap theme.

    Settings. This tab contains a different set of options for Blazor Server and WebAssembly applications:

    • Component Size Mode - Specifies the size mode for DevExpress Blazor components. The wizard adds the SizeMode global option in the Program.cs file. Individual component settings can override this option.
    • Progressive Web Application (available for a WebAssembly project in .NET6 and .NET7) - Specifies whether to create a Progressive Web Application (PWA). PWA brings a native desktop app user experience to cross-platform web applications. Launch PWA from the start menu, run it in its own app window, and work with it offline. You can specify PWA-specific settings in the wwwroot/manifest.json file.
    • Add Rich Text Editor Resources - Adds Rich Text Editor packages to the project, imports the DevExpress.Blazor.Office and DevExpress.Blazor.RichEdit namespaces, and registers CSS resources for the Rich Editor component.

  6. Click Create Project in the wizard.

Visual Studio: DevExpress Template

  1. Open Visual Studio and click Create a new project on the start page.

  2. Select the DevExpress Blazor App (Developer Express Inc.) template and click Next.

    Blazor App

  3. Specify Project Name and Location, and click Next.

  4. Specify Framework, Authentication Type, and Render Mode, and click Create.

.NET CLI: DevExpress Template

Based on the render mode and framework version, run one of the following commands to create a project:

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

    dotnet new dx.blazor -n MyBlazorServerApp -f net7.0 -int Server

  • DevExpress Blazor App for .NET 8 or .NET 9:

    dotnet new dx.blazor -n MyBlazorInteractiveServerApp -f net8.0 -int Server

The newly created project references the DevExpress.Blazor NuGet package. NuGet automatically restores this package if you registered the DevExpress NuGet feed.

You can also pass the NuGet feed as a -nf parameter when you create a project. The following command creates the project and adds the NuGet.config file with the DevExpress feed to the project folder.

dotnet new dx.blazor -n MyBlazorServerApp -nf https://nuget.devexpress.com/{your-feed-authorization-key}/api/v3/index.json

To see the list of available template options, execute the following command:

dotnet new dx.blazor -h

Template options

Visual Studio: Microsoft Template

Follow the steps below to use Microsoft Blazor project templates in Visual Studio:

  1. Click Create a new project on Visual Studio’s start page, select a Blazor template based on your content and hosting model preferences, and click Next.

    All Microsoft Templates

  2. Specify project name and location. Click Next.

  3. Specify additional options (framework version, render mode, etc.), and click Create.

.NET CLI: Microsoft Template

Based on the render mode and framework version, run one of the following commands to create a project:

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

    dotnet new blazorserver -n MyBlazorServerProject

  • Blazor App for .NET 8 or .NET 9:

    dotnet new blazor -n MyBlazorInteractiveServerApp

Next Step

If you created a project from a DevExpress template and successfully restored NuGet packages, click the following button:

Read Tutorial: Add DevExpress Components to an Application

Otherwise, proceed to the following step:

Read Tutorial: Set Up the DevExpress Nuget Package in the Application