Blazor Bites - Creating a New Project

Blazor Bites Series


Post valid for: Blazor 0.4.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 preview or VS Code. Regardless of which you choose you must first install the .NET Core 2.1 preview.

Visual Studio

You will need to install the latest preview of Visual Studio 2017. You can run this side-by-side with other versions without issue. When installing the preview make sure you select the ASP.NET and Web Development workload. If you are planning on getting your hand dirty with the Blazor source code, then you will also need to install the Visual Studio extension development features workload.

Once you have installed Visual Studio you then need to install the ASP.NET Core Blazor Language Services extension from the Visual Studio Marketplace. Once these are install you should then be 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.

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 preview 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.

Blazor project templates

As you can see in the screenshot there are 2 project types available today. Blazor and Blazor (ASP.NET Core hosted).

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.

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.

New starter app

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.