Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu

Introduction

Blazor is a free and open-source web framework that enables developers to create web apps using C# and HTML. It is developed by Microsoft as an SPA (Single Page Application) Web Framework.

Blazor is a framework for building interactive client-side web UI with .NET,

Create rich interactive UIs using C# instead of JavaScript.
Share server-side and client-side app logic written in .NET.
Render the UI as HTML and CSS for wide browser support, including mobile browsers.

Using .NET for client-side web development offers the following advantages,

Write code in C# instead of JavaScript.
Leverage the existing .NET ecosystem of .NET libraries.
Share app logic across server and client.
Benefit from .NET's performance, reliability, and security.
Stay productive with Visual Studio on Windows, Linux, and macOS.
Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

Blazor apps are based on components. A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Components are .NET classes built into .NET assemblies that,

Define flexible UI rendering logic.
Handle user events.
It can be nested and reused.
It can be shared and distributed as Razor class libraries or NuGet packages.

Application Types

There are two types of Blazor Applications,

Blazor Web Assembly
Blazor Server

Razor Components are running on the Server and SignalR (over Web Sockets, etc) is remoting them and updating the DOM on the client.

Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu

Hello World Application in .NET Core 3.0 Blazor Framework.

Requirements

Operating System: Windows/Linux/Mac
.NET Core 3.0/3.1
Visual Studio Code

I am using Ubuntu 19.10 on my machine for the demo.

Steps for installing .NET Core 3.0 on ubuntu 19.10 are,

$sudo wget -q https://packages.microsoft.com/config/ubuntu/19.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb

$sudo dpkg -i packages-microsoft-prod.deb

$sudo apt-get update

$sudo apt-get install apt-transport-https

$sudo apt-get update

$sudo apt-get install dotnet-sdk-3.0

$dotnet --version

Now let’s start,

Step 1

Open Terminal and browse to your workspace directory in my case it is Desktop/blazor

$ cd Desktop/blazor

Step 2

Type the following command to create a sample App

$ dotnet new blazorserver -o sample

Step 3

Now navigate to sample app and open this folder in Visual Studio Code

$ cd sample

$ code .

Step 4

In Visual Studio Code Sample App is now visible with all its default settings.

Step 5

Now Select Debug Tab of Visual Studio.

Step 6

Select Add Configuration and Choose.NET Core

Step 7

This will create launch.json file which is like this.

Step 8

Now run the sample app.

Step 9

When we press Play Button on Debugger tab . Debugger gets started and Opens Chrome Browser to launch sample app.

References

https://docs.microsoft.com/en-gb/aspnet/core/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio
https://learn-blazor.com/getting-started/
https://en.wikipedia.org/wiki/Blazor
https://www.hanselman.com/blog/WhatIsBlazorAndWhatIsRazorComponents.aspx