My book, Blazor in Action - an example-driven guide to building client-side web apps using C# and .NET - is now available to buy via the Manning Early Access Program (MEAP).
In this series I’m going to be building a simple blogging platform using Blazor. The series is broken down into the following parts:
- Part 1: Getting Started (this post)
- Part 2: Listing posts
- Part 3: View post
- Part 4: Add post
- Part 5: Editing & Deleting posts
- Part 6: Adding Authentication
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.
If you're new to Blazor development then you will need to get a few things setup first.
- Install the latest .NET Core SDK
- Install the Blazor project templates
- Install the Razor+ code extension (optional)
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
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.
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.
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.
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.