Create new component in Blazor – useful tool

In one of my previous blog posts I discussed my preferred way of organizing my Blazor projects. This included filenames, folder structures, code being separated from view etc. Implementing this sometimes takes time and is prone to mistake, so I created a small tool to help me do this.

Creating a new component in Blazor – steps

I prefer having code and logic separated. This is maybe due to the fact that I started in ASP.NET 2.0 where .aspx and .aspx.cs files were separated (yes, I am that old!). Or it may be due to the fact I prefer Angular on the client side, which has really similar logic. Either way, instead of having the @code {} block inside a .razor file, I prefer the .razor file to have just the markup and to create an extra file with the extension .razor.cs containing the code.

Also, in .NET 5 Blazor now has CSS isolation. This means that each component can have its own CSS. This allows reusing components in different project much easier, as you can ensure that your components take their CSS (and JS) with them. In short – just create the file with the same name and .razor.css extension.

This means that for each component you need to:

• create the component (.razor file)
• create the code behind class (.razor.cs file)
• ensure that the code behind has a different class name from the original component
• ensure that the code behind class inherits from ComponentBase
• ensure that the component has the @inherits directive which points to the code behind class
• ensure that there exists the .razor.css file

This is quite a lot of steps for a single (and simple!) operation of adding a component. This is why I wanted to automate this. Check out the code for a small and useful tool that adds a new Blazor component on my GitHub.

NOTE: This would probably be more useful as a scaffolder inside Visual Studio. I have not had a chance to check into that yet, but it is added to future enhancements.

How to use

It’s easy:

1. Download the code from GitHub
2. Use Visual Studio to publish the Console Application to a single .exe file
3. Add the folder to your path

After that, it is as easy to use your console to go into the desired folder and use the command as:

AddNewComponentInBlazor MyComponent

This will create three files as follows:

MyComponent.razor

@inherits MyComponentBase
<h3>MyComponent</h3>

MyComponent.razor.cs

using Microsoft.AspNetCore.Components;

namespace Namespace.Generated.Based.On.Folder.Structure
{
	public class MyComponentBase : ComponentBase
	{
		
	}
}

MyComponent.razor.css

/* empty file for CSS */

In case of you not providing a filename as a parameter, the application will throw an error. In case any of the three files exists, the application will throw an error.

How it works

The code is very basic – it is creating three files with text content. So, it is literally using the `File.

The only thing that is not 100% intuitive is how to define the namespace for the code behind class. The algorithm is simple enough. It goes recursively one folder up until it reaches a .csproj file. Taking that folder as root, it then creates a namespace from folder names separated by ˙.˙.

This means that if your MyProject.csproj file is in e.g. / folder and you are creating a new component in /some/path/here/ folder, the namespace will be MyProject.Some.Path.Here.

Future plans

When I get some more time I will be improving this. Some of the ideas I already have:

1. As soon as I have some time, I’ll see how to make this into a Visual Studio extension (as a scaffolder or something).
2. A user manual would be useful for sure 🙂 Something all developers love to work on.
3. It would be good to allow the ComponentBase class to be a parameter. That way, if you have a class that inherits from ComponentBase and you want your component to inherit from that class, you can do it instantly.
4. Possibly a way of providing whether something is a page or a component from the command line parameter.

What is certain that I am trying out this tool in my own work, and I’d appreciate if any of you tried it and gave me your feedback. Issues and PRs on GitHub are also most welcome.

Conclusion

Blazor is still fairly new. This is why we do not (yet) have best practices for it in place – the community is making them as we go along. I have my preferred way of doing things and I just wanted to make myself a tool to automate some repetitive tasks. Isn’t that what programming is all about?