This article is part of a series of articles. This article describes how to deploy an existing Blazor Server-side app to an existing installation of Linux Distro Ubuntu. The article presumes a basic understanding of Linux and Blazor Server-side. By the end of the article, you will know how to deploy to an existing base Linux Distro Ubuntu installation an existing Blazor Server-side App.
Introduction
This article is a step by step guide on how to get a Blazor Server-side Web App working on Ubuntu Linux.
The other article in the series that you can use depending on your needs is:
Installation Instructions (Detailed for Beginners)
For those who do not want detailed instructions, there is a summary at the end of the articles which just lists all the commands used in the article without any output.
The way the article is written is for leaving no doubt as to what commands to use in a detailed step by step fashion. The listing of output is for those who get errors and want to see what good working output, like mine, is supposed to look like.
First, have the latest version of Ubuntu installed. From your favourite Terminal Command Line, type the following commands in the listed order.
This first step is to go to check which version of Ubuntu you are on:
akshays@CodeProjectUbuntu:~$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description: Ubuntu 20.04 LTS
Release: 20.04
Codename: focal
I am on 20.04 version. So go to packages.microsoft.com/config/ubuntu. Check for a directory with your version. Then check for the file inside the directory called packages-microsoft-prod.deb. So for my version as of writing this article, run the following command:
akshays@CodeProjectUbuntu:~$ wget
-q https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb
-O packages-microsoft-prod.deb
Check if the file was downloaded with:
akshays@CodeProjectUbuntu:~$ ls
Desktop Documents Downloads Music packages-microsoft-prod.deb
Pictures Public snap Templates Videos
Now install the package with:
akshays@CodeProjectUbuntu:~$ sudo dpkg -i packages-microsoft-prod.deb
Selecting previously unselected package packages-microsoft-prod.
(Reading database ... 184434 files and directories currently installed.)
Preparing to unpack packages-microsoft-prod.deb ...
Unpacking packages-microsoft-prod (1.0-ubuntu20.04.1) ...
Setting up packages-microsoft-prod (1.0-ubuntu20.04.1) ...
Next step is to update the packages:
akshays@CodeProjectUbuntu:~$ sudo apt-get update
Get:1 http://security.ubuntu.com/ubuntu focal-security InRelease [107 kB]
Hit:2 http://in.archive.ubuntu.com/ubuntu focal InRelease
Hit:3 http://in.archive.ubuntu.com/ubuntu focal-updates InRelease
Hit:4 http://in.archive.ubuntu.com/ubuntu focal-backports InRelease
Get:5 https://packages.microsoft.com/ubuntu/20.04/prod focal InRelease [10.5 kB]
Get:6 https://packages.microsoft.com/ubuntu/20.04/prod focal/main amd64 Packages [6,506 B]
Fetched 124 kB in 2s (72.0 kB/s)
Reading package lists... Done
If you are using SSL (Secure Sockets Layer) HTTPS, then do the following:
akshays@CodeProjectUbuntu:~$ sudo apt-get install apt-transport-https
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following NEW packages will be installed:
apt-transport-https
0 upgraded, 1 newly installed, 0 to remove and 40 not upgraded.
Need to get 1,708 B of archives.
After this operation, 160 kB of additional disk space will be used.
Get:1 http://in.archive.ubuntu.com/ubuntu focal-updates/universe amd64
apt-transport-https all 2.0.2ubuntu0.1 [1,708 B]
Fetched 1,708 B in 0s (45.9 kB/s)
Selecting previously unselected package apt-transport-https.
(Reading database ... 184442 files and directories currently installed.)
Preparing to unpack .../apt-transport-https_2.0.2ubuntu0.1_all.deb ...
Unpacking apt-transport-https (2.0.2ubuntu0.1) ...
Setting up apt-transport-https (2.0.2ubuntu0.1) ...
Next, install the .NET Core SDK:
akshays@CodeProjectUbuntu:~$ sudo apt-get install dotnet-sdk-3.1
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
aspnetcore-runtime-3.1 aspnetcore-targeting-pack-3.1 dotnet-apphost-pack-3.1
dotnet-host dotnet-hostfxr-3.1 dotnet-runtime-3.1 dotnet-runtime-deps-3.1
dotnet-targeting-pack-3.1 netstandard-targeting-pack-2.1
The following NEW packages will be installed:
aspnetcore-runtime-3.1 aspnetcore-targeting-pack-3.1 dotnet-apphost-pack-3.1
dotnet-host dotnet-hostfxr-3.1 dotnet-runtime-3.1 dotnet-runtime-deps-3.1
dotnet-sdk-3.1 dotnet-targeting-pack-3.1 netstandard-targeting-pack-2.1
0 upgraded, 10 newly installed, 0 to remove and 40 not upgraded.
Need to get 78.7 MB of archives.
After this operation, 337 MB of additional disk space will be used.
Do you want to continue? [Y/n] y
Get:1 https://packages.microsoft.com/ubuntu/20.04/prod focal/main
amd64 dotnet-host amd64 3.1.4-1 [32.9 kB]
Get:2 https://packages.microsoft.com/ubuntu/20.04/prod focal/main
amd64 dotnet-hostfxr-3.1 amd64 3.1.4-1 [121 kB]
Get:3 https://packages.microsoft.com/ubuntu/20.04/prod focal/main
amd64 dotnet-runtime-deps-3.1 amd64 3.1.4-1 [2,668 B]
Get:4 https://packages.microsoft.com/ubuntu/20.04/prod focal/main
amd64 dotnet-runtime-3.1 amd64 3.1.4-1 [21.8 MB]
Get:5 https://packages.microsoft.com/ubuntu/20.04/prod focal/main
amd64 aspnetcore-runtime-3.1 amd64 3.1.4-1 [5,762 kB]
Get:6 https://packages.microsoft.com/ubuntu/20.04/prod focal/main
amd64 dotnet-targeting-pack-3.1 amd64 3.1.0-1 [1,988 kB]
Get:7 https://packages.microsoft.com/ubuntu/20.04/prod focal/main
amd64 aspnetcore-targeting-pack-3.1 amd64 3.1.3-1 [949 kB]
Get:8 https://packages.microsoft.com/ubuntu/20.04/prod focal/main
amd64 dotnet-apphost-pack-3.1 amd64 3.1.4-1 [42.5 kB]
Get:9 https://packages.microsoft.com/ubuntu/20.04/prod focal/main
amd64 netstandard-targeting-pack-2.1 amd64 2.1.0-1 [1,474 kB]
Get:10 https://packages.microsoft.com/ubuntu/20.04/prod focal/main
amd64 dotnet-sdk-3.1 amd64 3.1.300-1 [46.5 MB]
Fetched 78.7 MB in 16s (5,012 kB/s)
Selecting previously unselected package dotnet-host.
(Reading database ... 184446 files and directories currently installed.)
Preparing to unpack .../0-dotnet-host_3.1.4-1_amd64.deb ...
Unpacking dotnet-host (3.1.4-1) ...
Selecting previously unselected package dotnet-hostfxr-3.1.
Preparing to unpack .../1-dotnet-hostfxr-3.1_3.1.4-1_amd64.deb ...
Unpacking dotnet-hostfxr-3.1 (3.1.4-1) ...
Selecting previously unselected package dotnet-runtime-deps-3.1.
Preparing to unpack .../2-dotnet-runtime-deps-3.1_3.1.4-1_amd64.deb ...
Unpacking dotnet-runtime-deps-3.1 (3.1.4-1) ...
Selecting previously unselected package dotnet-runtime-3.1.
Preparing to unpack .../3-dotnet-runtime-3.1_3.1.4-1_amd64.deb ...
Unpacking dotnet-runtime-3.1 (3.1.4-1) ...
Selecting previously unselected package aspnetcore-runtime-3.1.
Preparing to unpack .../4-aspnetcore-runtime-3.1_3.1.4-1_amd64.deb ...
Unpacking aspnetcore-runtime-3.1 (3.1.4-1) ...
Selecting previously unselected package dotnet-targeting-pack-3.1.
Preparing to unpack .../5-dotnet-targeting-pack-3.1_3.1.0-1_amd64.deb ...
Unpacking dotnet-targeting-pack-3.1 (3.1.0-1) ...
Selecting previously unselected package aspnetcore-targeting-pack-3.1.
Preparing to unpack .../6-aspnetcore-targeting-pack-3.1_3.1.3-1_amd64.deb ...
Unpacking aspnetcore-targeting-pack-3.1 (3.1.3-1) ...
Selecting previously unselected package dotnet-apphost-pack-3.1.
Preparing to unpack .../7-dotnet-apphost-pack-3.1_3.1.4-1_amd64.deb ...
Unpacking dotnet-apphost-pack-3.1 (3.1.4-1) ...
Selecting previously unselected package netstandard-targeting-pack-2.1.
Preparing to unpack .../8-netstandard-targeting-pack-2.1_2.1.0-1_amd64.deb ...
Unpacking netstandard-targeting-pack-2.1 (2.1.0-1) ...
Selecting previously unselected package dotnet-sdk-3.1.
Preparing to unpack .../9-dotnet-sdk-3.1_3.1.300-1_amd64.deb ...
Unpacking dotnet-sdk-3.1 (3.1.300-1) ...
Setting up dotnet-host (3.1.4-1) ...
Setting up dotnet-apphost-pack-3.1 (3.1.4-1) ...
Setting up netstandard-targeting-pack-2.1 (2.1.0-1) ...
Setting up dotnet-targeting-pack-3.1 (3.1.0-1) ...
Setting up aspnetcore-targeting-pack-3.1 (3.1.3-1) ...
Setting up dotnet-runtime-deps-3.1 (3.1.4-1) ...
Setting up dotnet-hostfxr-3.1 (3.1.4-1) ...
Setting up dotnet-runtime-3.1 (3.1.4-1) ...
Setting up aspnetcore-runtime-3.1 (3.1.4-1) ...
Setting up dotnet-sdk-3.1 (3.1.300-1) ...
This software may collect information about you and your use of the software,
and send that to Microsoft.
Please visit http://aka.ms/dotnet-cli-eula for more information.
Welcome to .NET Core!
---------------------
Learn more about .NET Core: https://aka.ms/dotnet-docs
Use 'dotnet --help' to see available commands or visit: https://aka.ms/dotnet-cli-docs
Telemetry
---------
The .NET Core tools collect usage data in order to help us improve your experience.
The data is anonymous and doesn't include command-line arguments.
The data is collected by Microsoft and shared with the community.
You can opt-out of telemetry by setting the DOTNET_CLI_TELEMETRY_OPTOUT
environment variable to '1' or 'true' using your favorite shell.
Read more about .NET Core CLI Tools telemetry: https://aka.ms/dotnet-cli-telemetry
Configuring...
--------------
A command is running to populate your local package cache to improve
restore speed and enable offline access. This command takes up to one minute
to complete and only runs once.
Processing triggers for man-db (2.9.1-1) ...
Then update the packages just in case:
akshays@CodeProjectUbuntu:~$ sudo apt-get update
Hit:1 http://in.archive.ubuntu.com/ubuntu focal InRelease
Hit:2 http://in.archive.ubuntu.com/ubuntu focal-updates InRelease
Hit:3 http://in.archive.ubuntu.com/ubuntu focal-backports InRelease
Get:4 http://security.ubuntu.com/ubuntu focal-security InRelease [107 kB]
Hit:5 https://packages.microsoft.com/ubuntu/20.04/prod focal InRelease
Fetched 107 kB in 2s (63.1 kB/s)
Reading package lists... Done
If you do not want the .NET Core SDK but only want the runtime, then check for the latest version of the .NET Core runtime, in my case, it is 3.1, and run the following command:
akshays@CodeProjectUbuntu:~$ sudo apt-get install aspnetcore-runtime-3.1
Check your version of .NET Core with:
akshays@CodeProjectUbuntu:~$ dotnet --version
3.1.300
Go to the following URL and check to see if you got the latest .NET Core version including security updates:
Now install Nginx, web server, to serve up your Blazor Server-side Web App:
akshays@CodeProjectUbuntu:~$ sudo apt-get install nginx
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
libnginx-mod-http-image-filter libnginx-mod-http-xslt-filter
libnginx-mod-mail libnginx-mod-stream nginx-common nginx-core
Suggested packages:
fcgiwrap nginx-doc
The following NEW packages will be installed:
libnginx-mod-http-image-filter libnginx-mod-http-xslt-filter
libnginx-mod-mail libnginx-mod-stream nginx nginx-common nginx-core
0 upgraded, 7 newly installed, 0 to remove and 40 not upgraded.
Need to get 602 kB of archives.
After this operation, 2,134 kB of additional disk space will be used.
Do you want to continue? [Y/n] y
Get:1 http://in.archive.ubuntu.com/ubuntu focal/main amd64
nginx-common all 1.17.10-0ubuntu1 [37.3 kB]
Get:2 http://in.archive.ubuntu.com/ubuntu focal/main amd64
libnginx-mod-http-image-filter amd64 1.17.10-0ubuntu1 [14.3 kB]
Get:3 http://in.archive.ubuntu.com/ubuntu focal/main amd64
libnginx-mod-http-xslt-filter amd64 1.17.10-0ubuntu1 [12.5 kB]
Get:4 http://in.archive.ubuntu.com/ubuntu focal/main amd64
libnginx-mod-mail amd64 1.17.10-0ubuntu1 [42.3 kB]
Get:5 http://in.archive.ubuntu.com/ubuntu focal/main amd64
libnginx-mod-stream amd64 1.17.10-0ubuntu1 [66.9 kB]
Get:6 http://in.archive.ubuntu.com/ubuntu focal/main amd64
nginx-core amd64 1.17.10-0ubuntu1 [425 kB]
Get:7 http://in.archive.ubuntu.com/ubuntu focal/main amd64
nginx all 1.17.10-0ubuntu1 [3,616 B]
Fetched 602 kB in 0s (1,662 kB/s)
Preconfiguring packages ...
Selecting previously unselected package nginx-common.
(Reading database ... 187228 files and directories currently installed.)
Preparing to unpack .../0-nginx-common_1.17.10-0ubuntu1_all.deb ...
Unpacking nginx-common (1.17.10-0ubuntu1) ...
Selecting previously unselected package libnginx-mod-http-image-filter.
Preparing to unpack .../1-libnginx-mod-http-image-filter_1.17.10-0ubuntu1_amd64.deb ...
Unpacking libnginx-mod-http-image-filter (1.17.10-0ubuntu1) ...
Selecting previously unselected package libnginx-mod-http-xslt-filter.
Preparing to unpack .../2-libnginx-mod-http-xslt-filter_1.17.10-0ubuntu1_amd64.deb ...
Unpacking libnginx-mod-http-xslt-filter (1.17.10-0ubuntu1) ...
Selecting previously unselected package libnginx-mod-mail.
Preparing to unpack .../3-libnginx-mod-mail_1.17.10-0ubuntu1_amd64.deb ...
Unpacking libnginx-mod-mail (1.17.10-0ubuntu1) ...
Selecting previously unselected package libnginx-mod-stream.
Preparing to unpack .../4-libnginx-mod-stream_1.17.10-0ubuntu1_amd64.deb ...
Unpacking libnginx-mod-stream (1.17.10-0ubuntu1) ...
Selecting previously unselected package nginx-core.
Preparing to unpack .../5-nginx-core_1.17.10-0ubuntu1_amd64.deb ...
Unpacking nginx-core (1.17.10-0ubuntu1) ...
Selecting previously unselected package nginx.
Preparing to unpack .../6-nginx_1.17.10-0ubuntu1_all.deb ...
Unpacking nginx (1.17.10-0ubuntu1) ...
Setting up nginx-common (1.17.10-0ubuntu1) ...
Created symlink /etc/systemd/system/multi-user.target.wants/nginx.service →
/lib/systemd/system/nginx.service.
Setting up libnginx-mod-http-xslt-filter (1.17.10-0ubuntu1) ...
Setting up libnginx-mod-mail (1.17.10-0ubuntu1) ...
Setting up libnginx-mod-http-image-filter (1.17.10-0ubuntu1) ...
Setting up libnginx-mod-stream (1.17.10-0ubuntu1) ...
Setting up nginx-core (1.17.10-0ubuntu1) ...
Setting up nginx (1.17.10-0ubuntu1) ...
Processing triggers for systemd (245.4-4ubuntu3.1) ...
Processing triggers for man-db (2.9.1-1) ...
Processing triggers for ufw (0.36-6) ...
Now to start the Nginx webserver service:
akshays@CodeProjectUbuntu:~$ sudo service nginx start
Now we will test if the Nginx web server is working by displaying its default installation web page by going to the following URL in the web browser of your choice:
http://codeprojectubuntu/index.nginx-debian.html
Or:
localhost/index.nginx-debian.html
You should see the Nginx welcome web page displayed in your web browser. Now we have Nginx installed properly and confirmed to be working, let us configure Nginx Proxy. The first step is to go to the configuration file directory which is in etc. Then list the files in the direction and you will find a default configuration file:
akshays@CodeProjectUbuntu:~$ cd /etc/nginx/sites-available/
akshays@CodeProjectUbuntu:/etc/nginx/sites-available$ ls
default
Now edit the default configuration file to set it up with the Proxy for your .NET Core Blazor Server-side Web App in the location element as follows:
location / {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
I use the joe terminal text editor from 1990ish on UNIX. It is libcurses based from those days so it is much easier to use than vi, etc. I have made some small video games with it for fun back then. It is not installed by default on Ubuntu so you need to run the following command to install it:
akshays@CodeProjectUbuntu:/etc/nginx/sites-available$ sudo apt install joe
Now move back to your home directory or wherever you want to install your Blazor Server-side Web App at and copy all its files there.
For example purposes, I am going to use my Github public repository and Blazor Server-side app which is part of this series on HowTo do Blazor Server-side in as much detail as I learn along the way. Remember Blazor is a new technology under constant change. So I will now execute the following commands:
akshays@CodeProjectUbuntu:/etc/nginx/sites-available$ cd ~
akshays@CodeProjectUbuntu:~$ mkdir BlazorCanvasApp
akshays@CodeProjectUbuntu:~$ cd BlazorCanvasApp/
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$
wget https://github.com/akshays2112/BlazorCanvasApp/zipball/master/ -O BlazorCanvasApp.zip
--2020-06-03 16:55:39-- https://github.com/akshays2112/BlazorCanvasApp/zipball/master/
Resolving github.com (github.com)... 13.234.176.102
Connecting to github.com (github.com)|13.234.176.102|:443... connected.
HTTP request sent, awaiting response... 302 Found
Location: https://codeload.github.com/akshays2112/BlazorCanvasApp/legacy.zip/master [following]
--2020-06-03 16:55:39--
https://codeload.github.com/akshays2112/BlazorCanvasApp/legacy.zip/master
Resolving codeload.github.com (codeload.github.com)... 13.127.152.42
Connecting to codeload.github.com (codeload.github.com)|13.127.152.42|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: unspecified [application/zip]
Saving to: ‘BlazorCanvasApp.zip’
BlazorCanvasApp.zip
[ <=>
] 229.32K --.-KB/s in 0.05s
2020-06-03 16:55:40 (4.61 MB/s) - ‘BlazorCanvasApp.zip’ saved [234826]
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ unzip BlazorCanvasApp.zip
Archive: BlazorCanvasApp.zip
fafb1f5a683a19d34ffbe01ec8b075fe7c7fe5d1
creating: akshays2112-BlazorCanvasApp-fafb1f5/
inflating: akshays2112-BlazorCanvasApp-fafb1f5/.gitattributes
inflating: akshays2112-BlazorCanvasApp-fafb1f5/.gitignore
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp.sln
creating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/App.razor
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/BlazorCanvasApp.csproj
creating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Data/
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Data/WeatherForecast.cs
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Data/WeatherForecastService.cs
creating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Pages/
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Pages/CanvasDrawing.razor
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Pages/Counter.razor
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Pages/Error.razor
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Pages/FetchData.razor
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Pages/Index.razor
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Pages/_Host.cshtml
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Program.cs
creating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Properties/
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Properties/launchSettings.json
creating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Shared/
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Shared/MainLayout.razor
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Shared/NavMenu.razor
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Shared/SurveyPrompt.razor
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/Startup.cs
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/_Imports.razor
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/appsettings.Development.json
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/appsettings.json
creating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/wwwroot/
creating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/wwwroot/css/
creating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/wwwroot/css/bootstrap/
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/bootstrap/bootstrap.min.css
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/bootstrap/bootstrap.min.css.map
creating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/FONT-LICENSE
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/ICON-LICENSE
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/README.md
creating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/font/
creating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/font/css/
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css
creating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/font/fonts/
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/font/fonts/open-iconic.eot
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/font/fonts/open-iconic.otf
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/font/fonts/open-iconic.svg
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf
inflating: akshays2112-BlazorCanvasApp-
fafb1f5/BlazorCanvasApp/wwwroot/css/open-iconic/font/fonts/open-iconic.woff
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/wwwroot/css/site.css
inflating: akshays2112-BlazorCanvasApp-fafb1f5/BlazorCanvasApp/wwwroot/favicon.ico
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ mv akshays2112-BlazorCanvasApp-fafb1f5/* ./
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ rm -rf akshays2112-BlazorCanvasApp-fafb1f5/
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ rm BlazorCanvasApp.zip
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ ls
BlazorCanvasApp BlazorCanvasApp.sln
Next step is to compile the BlazorCanvasApp.sln with the following command:
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ dotnet build BlazorCanvasApp.sln -o ./release
Microsoft (R) Build Engine version 16.6.0+5ff7b0c9e for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.
Determining projects to restore...
All projects are up-to-date for restore.
CSC : warning CS8034: Unable to load Analyzer assembly
/home/akshays/.nuget/packages/microsoft.aspnetcore.components.analyzers/
3.0.0/analyzers/dotnet/cs/Microsoft.AspNetCore.Components.Analyzers.dll :
Assembly with same name is already loaded
[/home/akshays/BlazorCanvasApp/BlazorCanvasApp/BlazorCanvasApp.csproj]
CSC : warning CS8034: Unable to load Analyzer assembly
/home/akshays/.nuget/packages/microsoft.aspnetcore.components.analyzers/
3.0.0/analyzers/dotnet/cs/Microsoft.AspNetCore.Components.Analyzers.dll :
Assembly with same name is already loaded [/home/akshays/BlazorCanvasApp/
BlazorCanvasApp/BlazorCanvasApp.csproj]
BlazorCanvasApp -> /home/akshays/BlazorCanvasApp/release/BlazorCanvasApp.dll
BlazorCanvasApp -> /home/akshays/BlazorCanvasApp/release/BlazorCanvasApp.Views.dll
Build succeeded.
CSC : warning CS8034: Unable to load Analyzer assembly
/home/akshays/.nuget/packages/microsoft.aspnetcore.components.analyzers/
3.0.0/analyzers/dotnet/cs/Microsoft.AspNetCore.Components.Analyzers.dll :
Assembly with same name is already loaded [/home/akshays/BlazorCanvasApp/
BlazorCanvasApp/BlazorCanvasApp.csproj]
CSC : warning CS8034: Unable to load Analyzer assembly
/home/akshays/.nuget/packages/microsoft.aspnetcore.components.analyzers/
3.0.0/analyzers/dotnet/cs/Microsoft.AspNetCore.Components.Analyzers.dll :
Assembly with same name is already loaded [/home/akshays/BlazorCanvasApp/
BlazorCanvasApp/BlazorCanvasApp.csproj]
2 Warning(s)
0 Error(s)
Time Elapsed 00:00:06.32
I got some warnings but they are harmless. All it says in my case is that the DLL is already loaded so I could ignore it.
Now go into the release directory and you should see all your Blazor Server-side app files that are the compiler's output. Now we will test if the Blazor Server-side app works by running the dotnet command:
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ cd release/
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$ ls
appsettings.Development.json BlazorCanvasApp.deps.json
BlazorCanvasApp.runtimeconfig.dev.json BlazorCanvasApp.Views.dll
Blazor.Extensions.Canvas.JS.dll
appsettings.json BlazorCanvasApp.dll
BlazorCanvasApp.runtimeconfig.json BlazorCanvasApp.Views.pdb
Newtonsoft.Json.dll
BlazorCanvasApp BlazorCanvasApp.pdb
BlazorCanvasApp.StaticWebAssets.xml Blazor.Extensions.Canvas.dll Properties
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$ dotnet BlazorCanvasApp.dll
warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
No XML encryptor configured. Key {3b7a72a3-b5a0-4154-a804-573c1f365e97}
may be persisted to storage in unencrypted form.
info: Microsoft.Hosting.Lifetime[0]
Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Production
info: Microsoft.Hosting.Lifetime[0]
Content root path: /home/akshays/BlazorCanvasApp/release
So now that the Blazor Server-side Web App is running, open your favourite web browser and go to the following URL:
http://localhost:5000
You will see the formatting is gone because the www folder is missing. However, the Blazor Server-side app is rendering and working. You can copy the www folder over from your development machine and it will have all the JavaScript and CSS files and then it will look properly formatted as per usual.
You will see though that http://localhost:5000/CanvasDrawing will throw errors. This is because the JavaScript files are missing for the NuGet packages that support Canvas element drawing in C#. But for the purposes of this article which is just to demonstrate the steps to get Blazor Server-side working on Ubuntu, this is not required to get my example working fully.
Now for the final step of making Nginx, web server, manage the Kestrel Blazor Server-side Web App. The first thing to do is change directory to etc path as described below and create a new service configuration file for systemd. Before that, just to be sure to find out the path to dotnet executable:
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$ pwd
/home/akshays/BlazorCanvasApp/release
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$ which dotnet
/usr/bin/dotnet
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$ cd /etc/systemd/system/
akshays@CodeProjectUbuntu:/etc/systemd/system$ sudo joe kestrel-BlazorCanvasApp.service
Paste the following into the kestrel-BlazorCanvasApp.service file:
[Unit]
Description=Blazor Server-side Canvas Drawing Demo
[Service]
WorkingDirectory=/home/akshays/BlazorCanvasApp/release
ExecStart=/usr/bin/dotnet /home/akshays/BlazorCanvasApp/release/BlazorCanvasApp.dll
Restart=always
RestartSec=10
KillSignal=SIGINT
SyslogIdentifier=BlazorCanvasApp
User=www-data
Environment=ASPNETCORE_ENVIRONMENT=Production
Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false
[Install]
WantedBy=multi-user.target
Now register the new service with systemd by typing the following command:
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$
sudo systemctl enable kestrel-BlazorCanvasApp.service
[sudo] password for akshays:
Created symlink /etc/systemd/system/multi-user.target.wants/
kestrel-BlazorCanvasApp.service → /etc/systemd/system/kestrel-BlazorCanvasApp.service.
Now start up the kestrel-BlazorCanvasApp service and check its status to be sure it is running:
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$
sudo systemctl start kestrel-BlazorCanvasApp.service
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$
sudo systemctl status kestrel-BlazorCanvasApp.service
● kestrel-BlazorCanvasApp.service - Blazor Server-side Canvas Drawing Demo
Loaded: loaded (/etc/systemd/system/kestrel-BlazorCanvasApp.service;
enabled; vendor preset: enabled)
Active: active (running) since Wed 2020-06-03 18:19:45 IST; 43s ago
Main PID: 12990 (dotnet)
Tasks: 19 (limit: 9488)
Memory: 26.5M
CGroup: /system.slice/kestrel-BlazorCanvasApp.service
└─12990 /usr/bin/dotnet /home/akshays/BlazorCanvasApp/release/BlazorCanvasApp.dll
Jun 03 18:19:45 CodeProjectUbuntu BlazorCanvasApp[12990]:
warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
Jun 03 18:19:45 CodeProjectUbuntu BlazorCanvasApp[12990]:
No XML encryptor configured.
Key {4875ffce-1bb9-40a6-a090-41dd899afa42} may be persisted to storage>
Jun 03 18:19:45 CodeProjectUbuntu BlazorCanvasApp[12990]: info: Microsoft.Hosting.Lifetime[0]
Jun 03 18:19:45 CodeProjectUbuntu BlazorCanvasApp[12990]:
Now listening on: http://localhost:5000
Jun 03 18:19:45 CodeProjectUbuntu BlazorCanvasApp[12990]: info: Microsoft.Hosting.Lifetime[0]
Jun 03 18:19:45 CodeProjectUbuntu BlazorCanvasApp[12990]:
Application started. Press Ctrl+C to shut down.
Jun 03 18:19:45 CodeProjectUbuntu BlazorCanvasApp[12990]: info: Microsoft.Hosting.Lifetime[0]
Jun 03 18:19:45 CodeProjectUbuntu BlazorCanvasApp[12990]:
Hosting environment: Production
Jun 03 18:19:45 CodeProjectUbuntu BlazorCanvasApp[12990]: info: Microsoft.Hosting.Lifetime[0]
Jun 03 18:19:45 CodeProjectUbuntu BlazorCanvasApp[12990]:
Content root path: /home/akshays/BlazorCanvasApp/release
Now open multiple web browsers and go to the following URL. You can check on the /counter page that it is multi-user truly and when you click on the Click Me button, the counters are incremented differently in the different web pages on the different copies of your browser:
http://localhost:5000/counter
That is the entire step by step process. You can deploy now as many Blazor Server-side apps as you want to Ubuntu now.
Summary of All the Commands
The following is all the commands in order that need to be run without any output. This is meant for those who already know all the Ubuntu/Linux commands and just want to use them quickly.
akshays@CodeProjectUbuntu:~$ wget
-q https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb
-O packages-microsoft-prod.deb
akshays@CodeProjectUbuntu:~$ sudo dpkg -i packages-microsoft-prod.deb
akshays@CodeProjectUbuntu:~$ sudo apt-get update
akshays@CodeProjectUbuntu:~$ sudo apt-get install apt-transport-https
------------------ Choice Here -----------------------------------
akshays@CodeProjectUbuntu:~$ sudo apt-get install dotnet-sdk-3.1
--OR--------------------------------------------------------------
akshays@CodeProjectUbuntu:~$ sudo apt-get install aspnetcore-runtime-3.1\
------------------- End Choice -----------------------------------
akshays@CodeProjectUbuntu:~$ sudo apt-get update
akshays@CodeProjectUbuntu:~$ sudo apt-get install nginx
akshays@CodeProjectUbuntu:~$ sudo service nginx start
-------------------- Edit /etc/nginx/sites-available/default with this text -------
location / {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
------------------------------- End Text -------------------------------------------
akshays@CodeProjectUbuntu:/etc/nginx/sites-available$ cd ~
akshays@CodeProjectUbuntu:~$ mkdir BlazorCanvasApp
akshays@CodeProjectUbuntu:~$ cd BlazorCanvasApp/
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$
wget https://github.com/akshays2112/BlazorCanvasApp/zipball/master/ -O BlazorCanvasApp.zip
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ unzip BlazorCanvasApp.zip
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ mv akshays2112-BlazorCanvasApp-fafb1f5/* ./
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ rm -rf akshays2112-BlazorCanvasApp-fafb1f5/
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ rm BlazorCanvasApp.zip
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ dotnet build BlazorCanvasApp.sln -o ./release
akshays@CodeProjectUbuntu:~/BlazorCanvasApp$ cd release/
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$ dotnet BlazorCanvasApp.dll
--------------------- New file /etc/systemd/system/kestrel-BlazorCanvasApp.service
with following text -----
[Unit]
Description=Blazor Server-side Canvas Drawing Demo
[Service]
WorkingDirectory=/home/akshays/BlazorCanvasApp/release
ExecStart=/usr/bin/dotnet /home/akshays/BlazorCanvasApp/release/BlazorCanvasApp.dll
Restart=always
RestartSec=10
KillSignal=SIGINT
SyslogIdentifier=BlazorCanvasApp
User=www-data
Environment=ASPNETCORE_ENVIRONMENT=Production
Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false
[Install]
WantedBy=multi-user.target
---------------------- End Text ---------------------------------------------------------------
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$
sudo systemctl enable kestrel-BlazorCanvasApp.service
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$
sudo systemctl start kestrel-BlazorCanvasApp.service
akshays@CodeProjectUbuntu:~/BlazorCanvasApp/release$
sudo systemctl status kestrel-BlazorCanvasApp.service
History
- 3rd June, 2020: Initial version
