WebAssembly, for those who are unfamiliar with it, is a open web standard supported out-of-the-box in modern browsers. Is a bytecode format optimized for performance.
There’s a lot more that can be said about all the above points but for now, and before starting to dig into code, I think its also necessary to be aware that Blazor apps are built with components, which is nothing more than a piece of UI that can be nested, reused and shared between different projects. Examples of components can be a form, a dialog or even a full page.
We’ll understand even more of all this as we go along. For now lets make sure we have everything we need to start coding.
In order to be able to create Blazor apps, your system must met the following requirements:
- .NET Core 2.1 SDK;
- Visual Studio 2017 (15.9 or later) with ASP.NET and Web Development workload enabled;
- ASP.NET Core Blazor Language Services extension;
- Blazor templates installed which can be done via the command-line using the below command, after installing .NET Core SDK:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
Create your first Blazor project
To create a new Blazor application you can use the dotnet command line or Visual Studio. I’m a huge fan of using the dotnet CLI to better organize my solutions (maybe more on that on a future post) but for now I’ll keep it simple and I’ll choose the later.
After installing the above requirements, creating a new Blazor project is the same as creating other ASP.NET Core Web Application:
- Select File > New Project > Web > ASP.NET Core Web Application;
- Be sure to choose .NET Core and ASP.NET Core 2.1;
- At this point you’ll have three different Blazor options to choose from. We’ll select the first one ‘Blazor’ for now and later I’ll expand more insight about the other options. Click OK.
When finished, you’ll have a project containing some Razor pages, some typical ASP.NET Core code that bootstraps the application and a wwwroot folder containing the index HTML page along with some CSS and other files. Select Debug > Start Without Debugging (or CTRL+F5) and the browser will open and show you the default Blazor application.
Calling it a day
This was just a quick intro on what Blazor and WebAssembly are and what you need to prepare a development environment for creating Blazor applications and how to use Visual Studio to do so.
Next post we’ll look more deeply into Blazor components and layouts.
See you on the next post.