Blazor

Blazor Bites - Creating a New Project

Blazor Bites Series


Post valid for: Blazor 0.6.0
Please remember that Blazor is an experimental project and is going to be changing regularly. IT IS NOT PRODUCTION READY.

Prerequisites

Depending on which development experience you prefer, you can get up and running with Blazor using either Visual Studio 2017 or VS Code. Regardless of which you choose you must first install the .NET Core 2.1.

Visual Studio

Start by downloading the latest Visual Studio 2017. Making sure you have the ASP.NET and Web Development workload selected. If you're planning on getting your hands dirty with the Blazor source code then you will also need to install the Visual Studio extension development features workload.

Once you've installed Visual Studio you then need to install the ASP.NET Core Blazor Language Services extension from the Visual Studio Marketplace. You're now good to go.

VS Code

If you'd prefer, you can use VS Code for development. However, be aware that there is currently no tooling support available; you will not see any IntelliSense in the editor. There is an extension available called Razor+ which will at least provide basic Razor syntax colorisation. But this still won't help much with Blazor code.

You can install the Blazor project templates with the following commands.

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

Then you can create and run a new application the same as you would any other.

dotnet new blazor -o HelloWorld
cd HelloWorld
dotnet run

Creating a new project

Once you've installed all the prerequisites, open up Visual Studio 2017 and create a new project. To get to the Blazor template select the .NET Core category from the tree menu on the left and then choose ASP.NET Core Web Application from the list.

Select project type

You should then see the Blazor templates on the new screen.

There are 3 project types available today. Blazor, Blazor (ASP.NET Core hosted) and Blazor (Server-side in ASP.NET Core).

Blazor Project Type

This is the project to select when you are interested in creating a client-side only application. There is no backing API included.

Blazor (ASP.NET Core Hosted)

This project is for full stack C# development. You get the same client-side project as with the Blazor only template, but with this template you also get an ASP.NET Core WebAPI project as well.

Blazor (Server-side in ASP.NET Core)

This template is the latest edition and creates a similar solution structure to the hosted template above. The key difference is that Blazor is setup in server-side mode. You can read more about server-side Blazor in a post I published here.

Once you have selected the project template you want to have a play with, click OK and you should be looking at a new Blazor project ready to go. You can run the project straight away and you should see the basic start app after a few seconds.

Blazor Library

This project type allows developers to create reusable component libraries that can be shared between projects or packaged up as nuget packages. Currently this can't be added from the menus in Visual Studio, it can only be added using the CLI. In order to create a new Blazor Library project you need to have the latest templates installed.

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

Once you have them installed you can then use the following command to create a new Blazor Library

dotnet new blazorlib -n MyBlazorLibrary

Wrapping up

In this post I've covered how to get up a running with Blazor development. Things are moving fast with the project so I will make sure I keep this post up to date with the current changes.