Introducing CleanBlazor 🧽🧼🧹

Problem

• You want to start a new Blazor project from scratch.
• You want the bare minimum amount of code to get started.
• That means no Counter.razor, SurverPrompt.razor, Boostrap, extra css files, etc.
• You use the Visual Studio or dotnet CLI out-of-the-box Blazor project templates to create a new project.
• Now you have to strip out all of the sample code the template provides.
• You waste time ⏱. You get older 👴.

Solution

CLEAN BLAZOR! 🧽🧼🧹

TLDR

Create Blazor projects with the bare-minimum amount of code in no time.

Install CleanBlazor

dotnet new — install FriscoVInc.DotNet.Templates.CleanBlazor

Create a Blazor project (dotnet CLI)

dotnet new — install FriscoVInc.DotNet.Templates.CleanBlazor
dotnet new cleanblazorserver --output <my file path>
cd <my file path>
dotnet run

Done! 🎉. And for the Blazor wasm template, you can also use:

dotnet new cleanblazorwasm

Create a Blazor project (Visual Studio 2022)

1. Open Visual Studio
2. CTRL+SHIFT+N
3. Start your project with any CleanBlazor project template.

About the out of the box .NET Blazor Project Templates

When you start any .NET project you’ll usually use the .NET SDK’s out of the box project templates.

dotnet CLI

dotnet new blazorserver
dotnet new blazorwasm

Visual Studio

Visual Studio 2022 New Project Dialog

Now notice some of the “bloatware”

“Bloatware” highlighted in blue

site.css and other css files get “polluted”

Out of the box UI when using the .NET SDK’s Blazor Project templates

Using CleanBlazor!

CleanBlazor is listed in Microsoft’s official dotnet Github repository under the Available templates for dotnet new section.

Additionally, CleanBlazor is a dotnet template pack available on nuget.org. 👉 LINK

As such it is easily installable. The dotnet cli will automatically pull these templates from nuget.org. You just need to run the install command on your terminal:

dotnet new --install FriscoVInc.DotNet.Templates.CleanBlazor

Checkout the Getting Started section in the repo for any pre-requisites you might be missing.

dotnet cli

Very similar to how you create the out of the box Blazor projects, create your new project from any terminal or the vs code terminal:

dotnet new cleanblazorserver

or

dotnet new cleanblazorwasm

Same as with the out of the box templates, you can optionally include the output folder and/or project name:

--output <path to folder> --name <project name>

Visual Studio 2022

1. Open Visual Studio.
2. Open the New Project Dialog. CTRL + SHIFT + N.
3. Search for Clean Blazor.
4. Select either the Clean Blazor Server of Clean Blazor Wasm project.
5. Create your project.
6. Done!

*At time of writing, Visual Studio 2022 is in preview. If the above steps didn’t work for you, try updating to the latest version of Visual Studio, repair it, or simply use the dotnet cli option in the section above.

Now notice, no “bloatware”!

Bare minimum files to get started with Blazor (in this screenshot, we used Blazor Server)

Minimal UI to start out with. One page app. The rest is up to you!

Gotcha’s

These project templates target .NET 6 onwards (.NET 6 preview 7 at time of writing).

Every time a new .NET version comes out, the project templates will be updated accordingly to match the newest version of .NET.

Checkout the nuget page for different versions of these templates if by any chance you want/need to target a specific .NET version.

Tips

• Use Visual Studio 2022 and keep it updated.
• If not using an IDE, make sure you have the latest version of .NET
• Keep your project templates updated. Simply run:

dotnet new --update-apply

Uninstall

dotnet new --uninstall FriscoVInc.DotNet.Templates.CleanBlazor

Or if you want to uninstall a specific version:

dotnet new --uninstall

You now get a list of commands to uninstall any custom templates on your PC. Copy the command you want and run it.

Conclusion

Happy coding, and feel free to contribute!

GitHub - fvilches17/CleanBlazor: Minimal Blazor server and wasm templates (CLI and Visual Studio)…

Learning Resources

• [Github] DotNet templating wiki
• [Github] Available templates for dotnet new
• [Microsoft] Custom templates for dotnet new
• [Microsoft] Tutorial: Create an item template
• [Microsoft] .NET CLI Templates in Visual Studio