Blazor Bites - Creating a New Project

Blazor Bites Series


Post valid for: Blazor 0.2.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

Current known issues/quirks

  • There is currently an issue with creating projects with special characters in the name.
  • When running a Blazor only app (no backend) you will have to shutdown the server process manually when you finish running your app.

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

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.