Google Chrome

Install Google Chrome for Linux (https://www.google.com/chrome/). It is used by the Visual Studio Code debugger.

.NET 8 SDK

Install the .NET 8 SDK on the Ubuntu 22.04 machine by issuing these commands (replacing 22.04 with the correct Ubuntu version in use) from a directory with write permissions (skip to VSCode installation steps):

wget https://packages.microsoft.com/config/ubuntu/22.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb

Then issue this command:

sudo apt-get update; \
sudo apt-get install -y apt-transport-https && \
sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-8.0

Visual Studio Code

Skip to the Blazor project creation steps.

Download Visual Studio Code (https://code.visualstudio.com/download) and install it.

Configure Visual Studio Code Extensions

Install C# by OmniSharp Microsoft.

Install .NET Install Tool for Extension Authors.

Install Blazor WASM Debugging Extension.

Install the NuGet Gallery.

Create a Blazor Web App Project

From the terminal, go to or create a directory in the home directory where the project's directory is to be created. Issue this command to create a project for the new .NET 8 Blazor Web App. DO NOT USE sudo TO ISSUE THIS COMMAND.

dotnet new blazor -o BlazorWebApp1

Optionally, create a Blazor WebAssembly Project with this command (add the -p switch to make it a Progressive Web App).

dotnet new blazorwasm -o BlazorWasmApp1 -p

Note: at the time of writing this, the .NET 8 Blazor Web App template looks to be incomplete. This will probably be corrected through updates. Issue this command to view available Blazor templates.

dotnet new list blazor

Until .NET 8 (v8.0.100) is updated, it may be better to use .NET 6

Open Visual Studio Code

1. Open the Visual Studio Code application and open the directory/folder that was created by the above dotnet command.
2. When VSCode requests to add assets to build and debug the project, choose YES.
3. Visual Studio Code should ask for the project to launch. Choose the server project.

Build the project by using the terminal window in VSCode. The server project relies on the other two projects to run, so change to the "Server" directory and issue this command to build all three projects:

dotnet build

Hit Ctrl+F5 to run the application. In the VS Code terminal window the following text should be present (after compiling) showing the URL information to access the application with.

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.

In this case, use https://localhost:5001. The ports, 5000 and 5001 in this case, will vary with each project.

The browser should warn that the site is not secure because the certificate is not from a trusted source. Accept the risks and proceed to the Blazor application.

Here is the warning on Chrome.

After accepting the security risk, this should be the result.

Publish the Project

Open a terminal window in Visual Studio Code and issue this command to publish the project:

dotnet publish -o output-directory-name

Contained in the output directory will be all the compiled server and Blazor WASM client files of the application.

Procedure Recap

1. Install UBUNTU Linux desktop
2. Install .NET 8 SDK
3. Install Visual Studio Code
4. Configure Visual Studio Code extensions
5. Create the WASM and server Projects
6. Open the folder for the three projects with Visual Studio Code
7. Accept to add assets to the project when asked by VSCode
8. Choose the project to launch with in VSCode
9. Run the application by pressing Ctrl+F5
10. Publish the application

.NET 6 SDK

Install the .NET 6 SDK on the Ubuntu 20.04 machine by issuing these commands (replacing 20.04 with the correct Ubuntu version in use) from a directory with write permissions (skip to VSCode installation steps):

wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb

Then issue this command:

sudo apt-get update; \
sudo apt-get install -y apt-transport-https && \
sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-6.0

Visual Studio Code

Skip to the Blazor project creation steps.

Download Visual Studio Code (https://code.visualstudio.com/download) and install it.

Configure Visual Studio Code Extensions

Install C# by OmniSharp Microsoft.

Install .NET Install Tool for Extension Authors.

Install Blazor WASM Debugging Extension.

Install the NuGet Gallery.

Create the Blazor WebAssembly Client and Server Projects

From the terminal, go to or create a directory in the home directory where the project's directory is to be created. Issue this command to create projects for the WASM client, WEBAPI REST server and a project shared between the two. DO NOT USE sudo TO ISSUE THIS COMMAND.

dotnet new blazorwasm -o BlazorWasmApplication1 -ho

Optionally, add the -p switch to make it a Progressive Web App.

dotnet new blazorwasm -o BlazorWasmApplication1 -ho -p

Open Visual Studio Code

1. Open the Visual Studio Code application and open the directory/folder that was created by the above dotnet command.
2. When VSCode requests to add assets to build and debug the project, choose YES.
3. Visual Studio Code should ask for the project to launch. Choose the server project.

Build the project by using the terminal window in VSCode. The server project relies on the other two projects to run, so change to the "Server" directory and issue this command to build all three projects:

dotnet build

Hit Ctrl+F5 to run the application. In the VS Code terminal window the following text should be present (after compiling) showing the URL information to access the application with.

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.

In this case, use https://localhost:5001. The ports, 5000 and 5001 in this case, will vary with each project.

The browser should warn that the site is not secure because the certificate is not from a trusted source. Accept the risks and proceed to the Blazor WASM app.

Here is the warning on Chrome. Firefox will be something similar.

After accepting the security risk, this should be the result.

Publish the Project

Open a terminal window in Visual Studio Code and issue this command to publish the project:

dotnet publish -o output-directory-name

Contained in the output directory will be all the compiled server and Blazor WASM client files of the application.

Procedure Recap

1. Install UBUNTU Linux desktop
2. Install Google Chrome
3. Install .NET 6 SDK
4. Install Visual Studio Code
5. Configure Visual Studio Code extensions
6. Create the WASM and server Projects
7. Open the folder for the three projects with Visual Studio Code
8. Accept to add assets to the project when asked by VSCode
9. Choose the project to launch with in VSCode
10. Run the application by pressing Ctrl+F5
11. Publish the application

Google Chrome

Install Google Chrome for Linux (https://www.google.com/chrome/). It is used by the Visual Studio Code debugger.

.NET Core 3.1 SDK

Install .NET Core 3.1 on the Ubuntu 20.04 machine by issuing these commands (replacing 20.04 with the correct Ubuntu version in use) from a directory with write permissions (skip to VSCode installation steps):

wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb

Then issue this command:

sudo apt-get update; \
sudo apt-get install -y apt-transport-https && \
sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-3.1

Visual Studio Code

Skip to the Blazor project creation steps.

Download Visual Studio Code (https://code.visualstudio.com/download) and install it.

Configure Visual Studio Code Extensions

Install C# by OmniSharp Microsoft.

Install .NET Install Tool for Extension Authors.

Install Blazor WASM Debugging Extension.

Install the NuGet Gallery.

Create the Blazor WebAssembly Client and Server Projects

From the terminal, go to or create a directory in the home directory where the project's directory is to be created. Issue this command to create projects for the WASM client, WEBAPI REST server and a project shared between the two. DO NOT USE sudo TO ISSUE THIS COMMAND.

dotnet new blazorwasm -o BlazorWasmApplication1 -ho

Optionally, add the -p switch to make it a Progressive Web App.

dotnet new blazorwasm -o BlazorWasmApplication1 -ho -p

Open Visual Studio Code

1. Open the Visual Studio Code application and open the directory/folder that was created by the above dotnet command.
2. When VSCode requests to add assets to build and debug the project, choose YES.
3. Visual Studio Code should ask for the project to launch. Choose the server project.

Build the project by using the terminal window in VSCode. The server project relies on the other two projects to run, so change to the "Server" directory and issue this command to build all three projects:

dotnet build

Hit Ctrl+F5 to run the application. Chrome should warn that the site is not secure because the certificate is not from a trusted source. Click on the "Advanced" button to proceed to the Blazor app.

After accepting the security risk, this should be the result.

Publish the Project

Open a terminal window in Visual Studio Code and issue this command to publish the project:

dotnet publish -o output-directory-name

Contained in the output directory will be all the compiled server and Blazor WASM client files of the application.

Procedure Recap

1. Install UBUNTU Linux desktop
2. Install Google Chrome
3. Install .NET Core 3.1 SDK
4. Install Visual Studio Code
5. Configure Visual Studio Code extensions
6. Create the WASM and server Projects
7. Open the folder for the three projects with Visual Studio Code
8. Accept to add assets to the project when asked by VSCode
9. Choose the project to launch with in VSCode
10. Build the projects
11. Run the application
12. Publish the application