If you want to try the new hype about WebAssembly in .NET and C# salsa, you can install the new experimental Microsoft project called Blazor.
What is Blazor
To know more about Blazor please read the ASP.NET Blog post: A new experiment: Browser-based web apps with .NET and Blazor
First thing first, install the latest preview of .NET Core 2.1 SDK
Working from the Command Line
You can use Blazor directly from the command line and easily create a Blazor app with these commands:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
dotnet new blazor -o BlazorApp1
The first command installs the Blazor Templates:
- blazor Blazor (standalone)
- blazorhosted Blazor (hosted in ASP.NET server)
The second command create a new Blazor (standalone) app contained in a folder with the same name of the output app: “BlazorApp1”:
Third and last commands move to the app folder and build and run the app:
Now you can open your favorite web browser and navigate to the URL the app is listening for.
Install on Visual Studio
To experiment with Blazor, we need to install the latest Visual Studio 2017 Preview (version 15.7.0 Preview 1 or newer)
Because it’s still an experiment and not a supported product, we need to add Blazor tools to Visual studio. This can be easily done in two steps:
First, we need to add a new Extension Gallery in “Tools | Options | Environment | Extensions and Updates | Additional Extension Galleries”:
With the URL of the Blazor tools source: ” https://dotnet.myget.org/f/blazor-dev/vsix”.
Then we can install the Visual Studio Blazor tools from “Tools | Extensions and Updates | Online | Blazor” (if Blazor is the name you gave to the added VSIX feed on previous step):
To complete the process, we need to close Visual studio, go on with the ASP.NET Core Blazor Language Services installation and open Visual Studio again.
Create a Blazor app
The installed Blazor Visual Studio extension add two templates to the Visual studio “New Project | Web | ASP.NET Core Web Application”, so the process of creating a new Blazor app is the same of an ASP.NET Core Web app:
And then choosing the “Blazor” or “Blazor (ASP.NET Core
When done, update the NuGet Packages to latest release:
Now hit F5 to see your first Blazor web app running in flying colors:
You can read more on this on the ASP.NET Blog post: Get started building .NET web apps that run in the browser with Blazor.
Working with latest prerelease of Blazor NuGet packages
If you look at the solution files, you’ll find a “NuGet.config” file:
Where we find the URL of the Blazor NuGet Packages source. While this is correctly used when building from the CLI (Command Line tool od .NET Core), actually this file is ignored by the Visual Studio IDE (see https://developercommunity.visualstudio.com/content/problem/217493/visual-studio-nuget-package-manager-ignores-nugetc-1.html). Actually this is not a major problem, because the recently released 0.1.0 version of these NuGet packages have been also published on the default NuGet source (https://api.nuget.org/v3/index.json).
One workaround could be to move the file from the project folder to the solution folder, where the file is searched and used by Visual Studio:
but I personally dislike this workaround because if the project was initially created from the CLI there will not be a “Solution folder” at all.
The other way to solve it, more desirable on my opinion because is something related to Visual Studio and don’t require a project change, is to add the source to it directly with “Options | NuGet package Manager | Package Sources”:
Where the source URL is the same declared in NuGet.config file, “https://dotnet.myget.org/F/blazor-dev/api/v3/index.json”.
This way we can see new Blazor NuGet packages, whenever available right from the same source used by the Microsoft Blazor team.
Let’s see how this work: the latest release of NuGet packages in the nuget.org source is version 0.1.0, but the Blazor team is now working on release 0.2.0.
If you have added the Blazor source on Visual studio, opening the Package Manager IDE we can see that selecting the nuget.org source the latest version available is 0.1.0 even if the “include prerelease” checkbox is selected:
But if we select the added Blazor package source, we can see and install the newer packages:
Please remember that all this stuff is experimental and have fun with Blazor!
More info about Blazor
If you want to know more, here are some references:
Steve Sanderson’s Blog: Blazor: a technical introduction
ASP.NET Blog post by Daniel Roth: Get started building .NET web apps that run in the browser with Blazor
GitHub project: aspnet/Blazor
Learn Blazor: learn-blazor.com
Discussion forum: Gitter – AspNet/Blazor