Build and Deploy a Blazor App Without Touching a Windows Machine

Do you want to try out Blazor, but you're not a Windows person? Strictly a Linux developer? You're in luck. One of the goals of .NET Core is to be cross-platform, so today we'll see just how "cross-platform" it really is with Blazor, Microsoft's hot new front end development project.

Follow along with me while we develop a Blazor app and deploy it without ever using a Windows machine. Here's what we're going to do:

• Set up our (Linux) developer machine
• Build a small Blazor app
• Deploy it to a Linux VM

So let's get started.

1. Set Up Your Desktop

First, we have to set up a developer environment. To do this, I will start with a fresh Ubuntu desktop install, it's never had anything done to it so we can include all the steps you need to get started.

Install Git

The first thing we want to do is install Git. You probably already have it, but it's one of the steps needed. Open up a terminal and type:

sudo apt install git

Once we have Git installed, we need to get some sort of IDE. I recommend Visual Studio Code, and that's what I'll be using in this tutorial.

Install Visual Studio Code

First, we need to install some dependencies:

sudo apt update
sudo apt install software-properties-common apt-transport-https wget

Then we'll import the Microsoft GPG Key:

wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -

Next, we'll enable the VSCode repository:

sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"

and then install it:

sudo apt update
sudo apt install code

And now you have Visual Studio Code installed.

Before you send me hate mail, yes I know you can go into the software manager and install VS Code. I am showing how to do it manually for a reason, always know what's going on with your Linux system and install things intentionally so you have full control. If you want to click the button in the software manager, that's cool too.

Install .NET Core

To make Blazor work you must install .NET Core on your local machine. There are a few ways to do this. We're going to install the .NET Core SDK and Runtime, straight from the directions at Microsoft. Depending on the version of Linux you're using it may be different. See the instructions for your distro.

First, you'll need to register the Microsoft key and feed:

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

Then we'll install the .NET Core SDK

sudo apt-get update
sudo apt-get install dotnet-sdk-3.1

You can verify your install is correct by typing in:

dotnet --version

It should look like this: (though the version may be newer later)

You've got the SDK Installed! Now we're ready to create a Blazor project on our local machine.

2. Create A Blazor App (WebAssembly)

So you've probably seen a few tutorials about creating Blazor apps, and most of them are Visual Studio in a Windows environment. It's super easy and the push of a button. However, in Linux or Mac you don't have a suitable version of Visual Studio, but you have the dotnet CLI, and it's nearly just as easy to create a Blazor app here.

Important Note

There are two ways we can run a Blazor application. From Microsoft:

Blazor is a web framework designed to run client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly) or server-side in ASP.NET Core (Blazor Server)

We will run it client-side first, which means:

The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser.The app is executed directly on the browser UI thread.

We will deploy it as a standalone deployment.

Standalone deployment - A standalone deployment serves the Blazor WebAssembly app as a set of static files that are requested directly by clients. Any static file server is able to serve the Blazor app.

There are some downsides to this method and we'll discuss those, but for now, we want to build this so it can be hosted on any static server.

Blazor server is included in .NET Core 3.0, but WebAssembly is still in preview. So we need to install a template for it.

You can grab the template with the following command:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2

Next we'll create a new Blazor WebAssembly App

dotnet new blazorwasm -o BlazorDemo

Go into the directory and run it:

cd BlazorDemo
dotnet run

Your terminal window should look like this:

Now you can open it up in a web browser and view the page:

Open it up in VS Code and make your own modifications and play around with it.

So now we'll take this basic Blazor app and deploy it in different places.

3. Deploy it to a Linux Server (WebAssembly)

Let's see what it will take to push this to a regular Linux hosting server. For this, I will use a Digital Ocean $5 special server. I'm creating it from scratch, again to show all the steps needed to get it up and running. We'll run CentOS 7 on it.

Set up our Server

To set this up, I'm just going to update it:

sudo yum update

Then I'll install Nginx on it to serve up our static files.

sudo yum install epel-release
sudo yum install nginx

If you already have a web server set up that serves static files, you don't have to follow these steps.

I'll then start up our Nginx server:

sudo systemctl start nginx

And it's ready to go.

Build a Deployment (WebAssembly)

Now we want to deploy our application.

Now open a command prompt to the home folder of your application and run the following:

dotnet publish -c Release -r linux-x64

And we'll go into our publish folder and look for the dist folder:

cd bin/Release/netstandard2.1/linux-x64/publish/BlazorDemo/dist

Here I can see a listing of files.

I will copy these over to my new Linux server. I'm using SCP, but you can use whatever method you feel works:

scp -r * [email protected]:/usr/share/nginx/html

And now I load it up in my web browser:

Well, that's pretty cool! So this .NET Core application has been turned into static files I can host anywhere. I can put this on IIS, or S3, or wherever and it will work great. You can even Host it on Github Pages!.

This is great because C# and Razor files are compiled into .NET assemblies, and Blazor WebAssembly bootstraps the .NET runtime and loads the assemblies all right there in the browser.

But it requires modern browsers and has a huge payload to download to the browser to do that.

To truly leverage the power of Blazor we should set up a Blazor Server package. If you really want to know the differences, you can learn more here.

4. Create a Blazor App (Blazor Server)

Now we will create a Blazor Server application.

dotnet new blazorserver -o BlazorServerDemo

his creates another Blazor application, and we type in

dotnet run

and it spins up our local application:

and it looks pretty familiar. Only now I don't have the rabbit head.

So let's publish it. We will publish this as a self-contained application, so we can run it on our Nginx server without installing the .NET Framework.

dotnet publish -c Release --self-contained -r linux-x64

Then we'll go into our publish directory:

cd bin/Release/netcoreapp3.1/linux-x64/publish/

And we'll copy those over to an app directory created on the host (yours may vary)

scp -r * [email protected]:/home/web/apps/BlazorServerDemo

5. Set up the Server for .NET Core

To run .NET Core applications (even self-contained) there are some dependencies. We will install the following for CentOS, if you're using a different OS, you can check what dependencies you need here.

Here's the command to install the needed dependencies with Yum:

sudo yum install lttng-ust libcurl openssl-libs krb5-libs libicu zlib

Next, there's an SELinux setting you need to change that might hang you up:

setsebool -P httpd_can_network_connect 1

Now we can just run the executable:

./BlazorServerDemo --urls http://0.0.0.0:5000

And we have a server up and ready at port 5000:

And we can load it up in our Web Browser!

We're now up and running, but we don't want to just run it listening on a port like this, so let's use Nginx as a reverse proxy. Shut down the process.

Then let's run this in the background, by adding the ampersand at the end:

./BlazorServerDemo --urls http://0.0.0.0:5000 &

Now if you type in "jobs" you should see it running.

Now, create the following two folders:

sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled

And then edit your default file

vi /etc/nginx/sites-available/default

And add in the following into your server directive:

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;
}

Now restart nginx:

sudo systemctl reload nginx

Now you see your new page up and running!

Now you have a full fledged Blazor server on a Linux VM instance.

Conclusion

So in this tutorial, we built a Blazor application (both WebAssembly and Blazor Server) on an Ubuntu machine and pushed it up to a CentOS machine. We didn't need any Windows machines to do it.

My intent was to show how easy it is to develop Blazor and .NET Core applications if you're a Linux developer. I started out as a Linux developer, fell in love with C#/.NET, and now I can do both things together and I love it. You will too.

.NET Core is amazing, and I think Blazor will be too. I'm excited to develop more Blazor applications and pushing the limits of it.

If you want to learn more about Blazor, Pluralsight has just released some really cool courses on it.

Blazor - The Big Picture

Blazor - Getting Started

Blazor - Authentication and Authorization

So try it out! Let me know what you think of Blazor and share your experiences in the comments!