Cross-IDE Project Template Kit
- 5 minutes to read
The DevExpress Template Kit offers a unified project creation experience for both Microsoft Visual Studio and Visual Studio Code. The Template Kit is an easier and more powerful version of DevExpress Blazor Template Gallery. It consolidates a broader range of templates and richer configuration options into a single, convenient interface.
Note
The Template Kit is not included in our Unified Component Installer and must be installed separately.
#Installation
The Template Kit is available as an extension for both Microsoft Visual Studio and Visual Studio Code (Windows only.)
#Install Template Kit for Visual Studio
You can download the Template Kit from the Visual Studio Marketplace or install it as an extension in the Visual Studio IDE.
- In Visual Studio, select Extensions → Manage Extensions….
- Search for “DevExpress Template Kit for Visual Studio”.
- Click the Install button.
#Install Template Kit for Visual Studio Code
- In Visual Studio Code, open the Extensions tab.
- Search for “DevExpress Template Kit for VS Code”.
- Click the Install button.
#Create a Project
Once the Template Kit is installed, you can use it to create DevExpress Blazor projects.
#Create a Project in Visual Studio
- In Visual Studio, select File → New → Project….
- In the Create a new project dialog, search for DevExpress Template Kit.
- Select the DevExpress <version number> Template Kit template.
- Click the Next button.
- Specify the project name and location and click the Create button.
- Click the Blazor tile.
- Configure the project and click the Create Project button.
#Create a Project in Visual Studio Code
- In Visual Studio Code, switch to the Explorer tab.
- Click the New DevExpress Project button.
- Specify the project name and press Enter.
- Select a project location and click the Select Folder button.
- Click the Blazor tile.
- Configure the project and click the Create Project button.
#Supported Project Templates
The DevExpress Template Kit includes the following Blazor project templates:
#Common
- ASP.NET Core Blazor Application
- Creates a web-based Blazor application with DevExpress Blazor components and themes/styles. The application is similar to the Microsoft Blazor template.
- Framework
- Specify the target .NET framework version.
- Render Mode
- Specify the render mode for the application’s Razor components.
- Interactivity Location
- Global interactivity means any interaction or state-change may cause the entire application to be refreshed or re-rendered. Per page/component interactivity isolates the interactive behavior to specific parts of your application.
- Authentication
- Specify the authentication type.
- Theme
- Specify a theme that defines appearance of DevExpress Blazor components.
- Component Size Mode
- Specify the global size mode for the entire application. You can override this setting for individual components in the application’s code.
- Add Component Resources
- Add specific component packages and register their static resources.
- Add AI Resources:
- Register the selected LLM service for AI-enabled DevExpress components.
#Reporting & Data Analytics
- ASP.NET Core Blazor Reporting Application
- Creates a web (Blazor Server or WebAssembly) application that displays a Report Viewer (JavaScript-Based or Native version) and/or an End-User Report Designer. The backend defines a pre-built tabular report bound to sample data (SQL, Object, or JSON). The application includes ready-to-use Docker files for deployment in Linux-based environments.
- Framework
- Specify the target .NET framework version.
- Add Page with JS-Based Document Viewer
- Select this option to add a web page that contains the KS-Based Document Viewer component.
- Add Page with Native Report Viewer
- Select this option to add a web page that contains the Blazor Report Viewer component. Applies to Blazor Server and standalone Blazor WebAssembly applications.
- Add SQL Data Connection to the Data Source Wizard
- Select this option to register a sample SQL connection string. Applies to Blazor Server and hosted Blazor WebAssembly applications.
- Add Sample JSON Data Connection Storage
- Select this option to register a sample JSON data connection storage.
- Add Data Type to Object Data Source Wizard
- Select this option to register a sample data object. Applies to Blazor Server and hosted Blazor WebAssembly applications.
- Enable Docker Support Based on the Selected OS
- Create a Dockerfile based on the selected operating system.
- Hosting Model
- Specify a hosting platform for Blazor Reporting Components.
#Hybrid & Enterprise Development
- .NET MAUI Blazor Hybrid and Web App
- Creates a .NET MAUI Blazor Hybrid application with a Blazor Web project that incorporates DevExpress Blazor components and themes. The application mimics the Microsoft .NET MAUI Blazor Hybrid template.
- Framework
- Specify a target .NET framework version.
- XAF Desktop & Web Application
- Creates XAF-powered Windows Forms, ASP.NET Core Blazor UI, and Backend Web API Service projects using Entity Framework Core or XPO ORM for your desktop and web application development.
- Framework
- Specify a target .NET framework version.
- ORM
- Select an Object-Relational Mapping Library for the project.
- Database
- Select a database provider for the project.
- Database Schema Update
- Specify whether the selected ORM automatically adds, modifies, or removes database objects that do not match data model structure.
- Platforms
- Add selected platform-specific projects.
- Tests
- Select this option to include a functional tests project based on EasyTest.
- Blazor / Web API Service Options
- Add a Web API to your project (either as a separate project or directly include it into the newly created project.)
- Security Options
- Strengthen your project’s security by including the selected options.
- Additional Modules
- Add the selected XAF built-in modules to the project.
- Multi-Tenancy
- Select this option to create a multi-tenant SaaS-ready application.
#Build the Project
Install DevExpress component packages to build your project. You can use the DevExpress Unified Component Installer that adds a local NuGet feed to your machine.
As an alternative to the Unified Component Installer, you can configure a personal DevExpress NuGet Feed that loads required packages from DevExpress NuGet Gallery. To do this, follow the instructions below:
- Obtain your NuGet feed URL.
Register the source. You can do this in your IDE or from a CLI: