Blazor Component for Diploi

Operation

Getting started

1. In the Dashboard, click Create Project +
2. Under Pick Components, choose Blazor. Here you can also add a backend framework to create a monorepo app
3. In Pick Add-ons, you can add one or multiple databases to your app
4. Choose Create Repository to generate a new GitHub repo
5. 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: After installing packages, open the Deployment page and restart the running Blazor container so it loads the new dependencies.

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.

Links

• Blazor documentation
• ASP.NET Core documentation
• .NET documentation