In web development, starting a new project often means wading through a sea of boilerplate code. This boilerplate, while useful in some cases, can often feel like “bloatware” - unnecessary and cumbersome. For developers who prefer to start with a clean slate, this can be a significant hurdle. But what if there was a way to start a new project with just the bare essentials, free of any unnecessary clutter? Enter CleanBlazor, a minimalist template for .NET Blazor projects.
Clean Blazor is designed with simplicity and efficiency in mind. It provides the bare minimum files needed to get started with a Blazor project, allowing developers to add only what they need. This article will introduce you to Clean Blazor, its features, and how it can streamline your Blazor project development process.
So, let’s explore the world of CleanBlazor!
Table of Contents:
Using CLI
Using Visual Studio Code
Out-of-the-box .NET Blazor Project Templates
Problem with Default Blazor Templates
The Default Blazor Template has faced some issues in the past. For example, there was an issue where the default Blazor template solution didn’t run. The problem was encountered in both Visual Studio 2019 Preview 3.0 and VS Code. Another issue was that the default Blazor template was not working on Azure. These issues often required additional steps or modifications to get the template working.
On the other hand, CleanBlazor is a project that provides minimal Blazor server and WebAssembly (wasm) templates. It’s designed to save you time by providing out-of-the-box Microsoft Blazor projects minus any boilerplate and unnecessary HTML/CSS/JS/Razor. This can be particularly useful when you want to start a new Blazor project from scratch with the bare minimum amount of code.
Introducing Clean Blazor
CleanBlazor is a specialized dotnet template pack designed to simplify and expedite the process of initiating Blazor projects. A dotnet template pack is a collection of templates that can be easily installed and used with the dotnet CLI, providing developers with a quick and consistent way to set up projects. CleanBlazor, in particular, is tailored to address the common challenge of excessive and unnecessary code present in default Blazor project templates.
CleanBlazor in Microsoft's dotnet GitHub Repository
CleanBlazor enjoys recognition and validation as it is included in Microsoft's official dotnet GitHub repository. This repository serves as a central hub for various .NET-related projects, tools, and templates.
The fact that CleanBlazor is listed in this repository underscores its legitimacy and endorsement within the broader .NET developer community. Developers can find CleanBlazor alongside other officially recognized tools and templates, reinforcing its reliability as a solution for efficient Blazor project initialization.
CleanBlazor on nuget.org:
CleanBlazor is not only featured in Microsoft's dotnet GitHub repository but is also available as a dotnet template pack on nuget.org. NuGet is a package manager for .NET development that provides a centralized repository for sharing, distributing, and managing packages.
The availability of CleanBlazor on nuget.org means that developers can conveniently install CleanBlazor templates using the dotnet CLI, leveraging the package manager's ease of use and accessibility.
Installing CleanBlazor
Below is the step-by-step guide to installing CleanBlazor using dotnet CLI:
STEP 1: Open the command prompt. Copy and paste the below command to install CleanBlazor as a donet template pack:
dotnet new — install FriscoVInc.DotNet.Templates.CleanBlazorSTEP 2: Verify that CleanBlazor has been successfully installed by checking the list of available templates:
dotnet new --listCreating a New Project
Creating a new Project using CLI:
STEP 1: Open a command prompt in the directory where you want your project to be located.
STEP 2: Run the following command to create a new project:
dotnet new cleanblazorserver Alternatively, for a Blazor WebAssembly project:
dotnet new cleanblazorwasmSTEP 3: If you want to specify the output folder and/or project name, you can use the --output and --name options like this:
dotnet new cleanblazorserver --output <path to folder> --name <project name>or
dotnet new cleanblazorwasm --output <path to folder> --name <project name>Replace <path to folder> with the path where you want your project to be created, and <project name> with the name you want for your project. The dotnet new command will create a new project with the specified template in the specified directory. You can then navigate to that directory and run dotnet run to start the application. It will be accessible in your default browser.
Create a Blazor project (Visual Studio 2022)
Here are steps to create a Blazor project using Visual Studio:
STEP 1: Open Visual Studio Code
STEP 2: Click on "Create a new project". You can do this by pressing CTRL+SHIFT+N.
STEP 3: Select the result from the list.
STEP 4: Here enter the Project name, location, and solution name.
Check the "Place solution and protect in the same directory" box.
Click "Next".
STEP 5: Enter the following details:
Enter the name of the project and its Description.
URL: The URL is optional, but it can be helpful for you and others to find your project online.
Framework: The Framework dropdown menu allows you to select the .NET version you want to use for your project.
Authentication type: The Authentication type dropdown menu allows you to select the type of authentication you want to use for your project.
Configure for HTTPS: The Configure for HTTPS checkbox allows you to configure your project to use HTTPS. HTTPS is a secure protocol that encrypts communication between your web browser and the server.
Interactivity type: The Interactivity type dropdown menu allows you to select the type of interactivity you want to use for your project. Server-side Blazor applications run the .NET code on the server, while client-side Blazor applications run the .NET code in the web browser.
Interactivity location: The Interactivity location dropdown menu allows you to select where the .NET code will run for your project. Per page/component means that the .NET code will run for each page or component in your application.
Include sample pages: The Include sample pages checkbox allows you to include sample pages in your project. The sample pages can help learn how to use Blazor.
Do not use top-level statements: The Do not use top-level statements checkbox allows you to prevent top-level statements from being used in your project. Top-level statements are statements that are not inside a class or method. They are not allowed in Blazor projects.
STEP 6: Click "Create".
Out-of-the-box .NET Blazor Project Templates
An “out-of-the-box” .NET Blazor project template refers to the default project templates provided by the .NET SDK for creating new Blazor applications. These templates are designed to help developers quickly start a new project with a basic structure and some pre-configured settings.
There are two main types of Blazor project templates that you can create using the .NET Command Line Interface (CLI):
Blazor Server: This template sets up a project for a Blazor Server application.
Blazor WebAssembly (WASM): This template sets up a project for a Blazor WebAssembly application.
Blazor Server
Open a command prompt where you want your project to be located.
Run the following command to create a new Blazor Server application:
dotnet new blazorserver -o YourBlazorServerAppNavigate to the new application’s directory with the following command:
cd YourBlazorServerAppRun the application with the following command:
dotnet runNote: If you have installed multiple SDK versions and need a specific framework version (e.g., net7.0) project, then add the -f or --framework flag to the dotnet new blazorserver command.
Blazor WebAssembly
Open a command prompt where you want your project to be located.
Run the following command to create a new Blazor WebAssembly application:
dotnet new blazorwasm -o YourBlazorWebAssemblyAppNavigate to the new application’s directory with the following command:
cd YourBlazorWebAssemblyAppRun the application with the following command:
dotnet runNote: If you have installed multiple SDK versions and need a specific framework version (e.g., net5.0, netcoreapp3.1) project, then add the -f flag to the dotnet new blazorwasm command
These templates come with some pre-packaged code, also known as “boilerplate” code, which includes basic functionalities and features that are common to most applications. However, some developers refer to unnecessary or rarely used parts of this boilerplate code as "bloatware".
For example, the default Blazor project template uses Bootstrap for styling and comes with some pre-defined CSS files. Some developers might find these files unnecessary or “polluted” if they prefer to use a different styling framework or write their custom styles.
Therefore, developers might need to modify the templates or remove the “bloatware” to fit their specific requirements. For instance, there are minimal Blazor server and WASM templates available that start out-of-the-box Microsoft Blazor projects minus any boilerplate and unnecessary html/css/js/razor.
Advantages of CleanBlazor
Here are some of its advantages:
Minimalism: CleanBlazor lets you start a new Blazor project from scratch with the bare minimum amount of code. This means no Counter.razor, SurveyPrompt.razor, Bootstrap, extra CSS files, etc. It’s perfect for developers who want to start with a clean slate and add only what they need.
Time Efficiency: Using CleanBlazor can save you time as you don’t have to strip out all of the sample code the default template provides. This allows you to focus on writing your code right away.
Easy Installation: CleanBlazor is easily installable1. The .NET CLI will automatically pull these templates from nuget.org. You just need to run the install command on your terminal.
Compatibility: CleanBlazor has been updated to target the official version of .NET 6. It’s available on both Visual Studio 2022 and the .NET CLI.
Flexibility: CleanBlazor provides the same Blazor templates you get out of the box with .NET minus all the extra boilerplate. This gives you more control over your project’s structure and dependencies.
CleanBlazor is a great tool for developers who prefer to start their Blazor projects with a clean slate, free of unnecessary boilerplate code.
Features of CleanBlazor
Absence of “Bloatware”: One of the key features of CleanBlazor is its minimalism. It does not include any unnecessary boilerplate code or files that are typically included in standard project templates. This makes it an excellent choice for developers who prefer to start with a clean slate and add only what they need.
Minimal Files and UI: CleanBlazor provides the bare minimum files needed to get started with a Blazor project. The user interface is also minimal, often starting with a single-page application. This allows developers to design and build their UI from the ground up, without having to modify or remove pre-existing elements.
Considerations When Using CleanBlazor
.NET Version: CleanBlazor templates are designed for .NET 6 onwards. It’s important to note that every time a new .NET version is released, the project templates are updated accordingly to match the newest version of .NET.
Keeping Visual Studio and .NET Updated: If you’re using an Integrated Development Environment (IDE) like Visual Studio 2022, it’s crucial to keep it updated to the latest version. Similarly, you should also ensure that you have the latest version of .NET installed on your machine.
Updating Project Templates: To keep your project templates updated, you can use the following command in the .NET CLI: dotnet new --update-apply. This will ensure that you always have the latest features and improvements available in your templates.
How to Uninstall CleanBlazor?
To uninstall CleanBlazor, use:
dotnet new --uninstall
FriscoVInc.DotNet.Templates.CleanBlazorOr if you want to uninstall a specific version:
dotnet new --uninstall <template version>Choose the appropriate command from the list for uninstalling any custom templates on your PC. Copy the command and run it.