Get started with Blazor Apps


Introduction

We have developed many Single Page Application using Angular,  Aurelia, React, etc. Finally the microsoft has introduced Blazor Apps and It is a programming framework to build client side rich web application with dotnet using c#. What ? Is it possible to create a Single Page Application using C# without using JavaScript ? Yes we can create a rich interactive User Interface ( UIs ) using C# instead of JavaScript and also the client and server code logic has written in the app using .Net. The Innovations are the major concerns of every era, So as a dotnet developer we can develop a Single Page Application ( SPA ) using Microsoft C#.

Blazor app have five different editions and two are now available in the Visual Studio and three editions are in a planing stage.

  • Blazor WebAssembly
  • Blazor Server
  • Blazor Progressive Web Apps (PWAs)
  • Blazor Hybrid
  • Blazor Native

The following are the currently available Blazor apps.

Blazor WebAssembly

Blazor WebAssembly is a single-page app framework for building interactive client-side web apps with .NET ( dotnet ). Blazor is running client-side in the browser on WebAssembly and the client side code has been written in C# instead of using javascript. So the .Net code is running inside the browser with the help of Webassembly(abbreviated wasm). Yes , It will work all the modern web browsers and including mobile browsers. There’s no .NET server-side dependency but the app is fully functional  after downloading the .Net runtime to the client. This will create a client-side dependency and Serverless deployment scenarios are possible because ASP.NET Core web server doesn’t required to host the app.

As per the Microsoft information “Blazor WebAssembly” is still in preview and expect to live by may 2020. So it is clear that Blazor WebAssembly is not ready for the production use and currently in a development stage.  If you’re looking for a production solution, then you can choose “Blazor Server” and it is recommended by Microsoft.

Blazor Server

Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app that means Blazor can run your client logic on the server.  The UI updates, event handling, and JavaScript calls are handled over with the help of “SignalR” ( a real-time messaging framework. ) connection. The download size is smaller than Blazor Server Comparing to Blazor WebAssembly app because those are handling in server side and the app loads much faster. Serverless deployment is not possible because an ASP.NET Core server is required to serve the app.

As daniel mentioned in the document “We have expect to have official previews of support for Blazor PWAs and Blazor Hybrid apps using Electron in the .NET 5 time frame (Nov 2020). There isn’t a road map for Blazor Native support yet. The following are the Blazor App planning editions”.

Blazor PWAs ( Progressive Web Apps )

Blazor PWAs ( Progressive Web Apps  ) are web apps that support the latest web standards to provide a more native-like experience. It will work offline and online scenarios and support push notifications, OS integrations, etc.

Blazor Hybrid

Native .Net readers to Electron and Blazor Hybrid apps don’t run on WebAssembly but instead uses a native .NET runtime like .NET Core or Xamarin. It will work offline or online scenarios.

Blazor Native

Same programming model but rendering non-HTML UI.

Note :  The application is tested in .NET Core 3.1 SDK & Visual Studio 2019 16.4 version and all the steps depend on the respective versions.

Prerequisites

  1. Install Visual Studio 2019 16.4 or later with the ASP.NET and web development workload.
  2. Install the .NET Core 3.1 SDK.

1.  Create a new project in Visual Studio 2019 ( version 16.4 ) and It lists the available project templates. So we have to  choose “Blazor App” template for development.

Create a new project

Create a new project

2. Configure new project name, solution name and location in our system.

Configure new project

3.  Based on the selected Blazor template ( Step 1 ) It will display the two available Blazor app in Visual Studio. So we have selected “Blazor Server App” from the list.

Output

We can run the application and see the first output of our Blazor Server App.

Reference

Summary

From this article we have learned the basics of microsoft Blazor Apps With Visual Studio 2019. I hope this article is useful for all the Blazor ASP.NET Core beginners.

%d bloggers like this: