Blazor

Building a blogging app with Blazor: Getting Setup

In this series I’m going to be building a simple blogging platform using Blazor. The series is broken down into the following parts:

I'll be using the client-side configuration of Blazor for these posts. And as I’m working on a Mac I’m going to use VS Code as much as possible. While it would be great to stick to it the whole time. I have found that sometimes it is necessary to spin up Windows and Visual Studio when debugging.

All the code is also available on my GitHub and I'm going to try and keep a branch for each post so those that are interested can see how the code develops.

Getting Setup

If you're new to Blazor development then you will need to get a few things setup first.

Once you have the latest SDK installed you can install the Blazor project templates using the following command at your terminal of choice.

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

You can then run

dotnet new

And you should see then see the Blazor templates in the list.

For this project I'm going to use the Blazor (hosted in ASP.NET Core) Template. Next Ill show you how I structure my solutions.

Solution Structure

When I'm working on projects I pretty much always use the same structure and it looks like this.

I don't have anything ground breaking to tell you about this structure. It seems to be fairly common in the projects I follow on GitHub and I just like it.

For anyone new to Blazor, the client, server and shared projects are created by the Blazor template. They are pretty self explanatory but the server project is a ASP.NET WebAPI but configured with the UseBlazor<T>() middleware. This will serve the client project upon startup. The shared project is referenced by both of the other projects and is a place to put shared files such as DTOs.

Project Structure (Client)

For this project I'm going to be using the following structure for my Blazor project.

I'm a big fan of feature folders when structuring projects. I find it scales well and makes finding items pretty easy. As an example in the screenshot above, I have refactored the files that come in the template to this structure.

Theme

Just a quick word on theming. I'll obviously be focusing on the Blazor aspect during these posts. But I just thought I'd quickly mention that I will be using a theme called Clean Blog from startbootstrap.com for styling. I'm not going to talk through integrating it with the Blazor template as there is nothing special there. But you can view the code on the getting-setup branch on GitHub.  

Wrapping Up

That's it for the first instalment. In the next post I'm going to start getting the API in place and then get the home page showing a list of blog posts.

Enjoying things so far? If you have any questions or suggestions then please let me know in the comments below. As always all the source code to accompany this series is available on GitHub.