Blazor

Blazor is a .NET web UI framework for building interactive web apps using C# and Razor components instead of JavaScript. Choose this component when you’re building dashboards, internal tools, or full-featured web apps where you want to stay in the .NET ecosystem and share code across client and server. Diploi builds your Blazor project and deploys it with the runtime and assets it needs to run.

Add to your project

Paste this entry into the components list in diploi.yaml to add Blazor to your project.

components:
  - name: Blazor
    identifier: blazor
    package: https://github.com/diploi/component-blazor#v10.0-05.2026

If the folder of the component in your repository is not named blazor, add a folder parameter with the name of the folder.
Import the environment variables of add-ons, such as a database, into the component with env.include in diploi.yaml:

components:
  - name: Blazor
    identifier: blazor
    package: https://github.com/diploi/component-blazor#v10.0-05.2026
    env:
      include:
        - postgres.*

Blazor reference

Readme

Operation

Getting started

In the Dashboard, click Create Project +
Under Pick Components, choose Blazor. Here you can also add a backend framework to create a monorepo app
In Pick Add-ons, you can add one or multiple databases to your app
Choose Create Repository to generate a new GitHub repo
Finally, click Launch Stack

Link to the full guide - upcoming

Development

During development, the container uses dotnet watch to enable automatic reloads when files change. The development server is started with:

dotnet watch --no-launch-profile --hot-reload --non-interactive

This will:

Use dotnet watch to monitor for changes to .cs, .razor, and .css files and restart the server when changes are detected.
Run the Blazor Server application with hot reload enabled.
Start the app on port 5054.
Enable automatic browser refresh when Razor components or CSS files change.

Installing Packages

Front-end libraries (CSS/JS frameworks like Bootstrap, jQuery, etc.):

First, ensure .NET tools are restored:

dotnet tool restore

Then install front-end libraries using LibMan:

dotnet tool run libman install <library>@<version> --provider cdnjs --destination wwwroot/lib/<library>

For example:

dotnet tool run libman install bootstrap@5.3.0 --provider cdnjs --destination wwwroot/lib/bootstrap
dotnet tool run libman install jquery@3.7.1 --provider cdnjs --destination wwwroot/lib/jquery

NuGet packages (C# libraries and frameworks):

dotnet add package <PackageName>

For example:

dotnet add package Newtonsoft.Json
dotnet add package Microsoft.EntityFrameworkCore.SqlServer

The libman.json file manages client-side libraries, while the .csproj file tracks NuGet dependencies. Both are automatically restored during development and build.

Important: Important: After running dotnet add package , always run dotnet build to resolve new dependency update.

Production

Builds a production-ready image. During the build, dependencies are restored with dotnet restore and the application is published with dotnet publish. When the container starts, it runs:

dotnet component-blazor.dll

This uses the compiled .NET application optimized for production deployment.

Data Protection

The application uses ASP.NET Core Data Protection for securing authentication cookies and anti-forgery tokens. In Kubernetes deployments, data protection keys are persisted using a PersistentVolumeClaim to ensure session continuity across pod restarts.