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

In this article, you will learn about 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,

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
  1. Operating System: Windows/Linux/Mac
  2. .NET Core 3.0/3.1
  3. 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
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu 
 
Step 2
 
Type the following command to create a sample App
 
$ dotnet new blazorserver -o sample
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu 
 
Step 3
 
Now navigate to sample app and open this folder in Visual Studio Code
 
$ cd sample
$ code .
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu 
 
Step 4
 
In Visual Studio Code Sample App is now visible with all its default settings.
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu 
 
Step 5
 
Now Select Debug Tab of Visual Studio.
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu 
 
Step 6
 
Select Add Configuration and Choose.NET Core
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu 
 
Step 7
 
This will create launch.json file which is like this.
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu 
 
Step 8
 
Now run the sample app.
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu 
 
Step 9
 
When we press Play Button on Debugger tab . Debugger gets started and Opens Chrome Browser to launch sample app.
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu 
 
Getting Started With Blazor Hello World Using VS Code And Terminal On Ubuntu 
 
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