Build and Deploy a Blazor App Without Touching a Windows Machine
Tags: programming, webdev, dotnet, linux
Published: 2019-12-15 00:29:04

---
title: Build and Deploy a Blazor App Without Touching a Windows Machine
published: true
description: We’ll see just how cross-platform .NET Core is really is when it comes to Blazor, Microsoft’s hot new front end development project.
tags: programming, webdev, dotnet, linux
canonical_url: https://www.jeremymorgan.com/blog/linux/blazor-in-linux/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3ueefj5m5a89vjy88335.jpg
series: Getting Started with Blazor
---
Do you want to try out  [Blazor](http://bit.ly/BlazorBigPicture), 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. 

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/jvju5vdu1utnnqyk4rd6.jpg)


### 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: 

```bash
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:

```bash
sudo apt update
sudo apt install software-properties-common apt-transport-https wget
```
  
Then we'll import the Microsoft GPG Key:  

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

Next, we'll enable the VSCode repository:  
  
```bash
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
```

and then install it:

```bash
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. 

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/wsdg5jp5jnoa5aiozcvq.jpg)

### 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](https://docs.microsoft.com/en-us/dotnet/core/install/linux-package-manager-ubuntu-1904). Depending on the version of Linux you're using it may be different. See [the instructions](https://docs.microsoft.com/en-us/dotnet/core/install/) for your distro. 

First, you'll need to register the Microsoft key and feed:  
  
```bash
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

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

You can verify your install is correct by typing in:  
  
```bash
dotnet --version
```
It should look like this: (though the version may be newer later)

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/wvbyi1q47dy9qvjt5n54.jpg)

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:   

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

Next we'll create a new Blazor WebAssembly App  
  
```bash
dotnet new blazorwasm -o BlazorDemo
```

Go into the directory and run it:  

```bash
cd BlazorDemo
dotnet run
```
Your terminal window should look like this:  
  
![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/eviwbzziq5tmf9kkm02j.jpg)

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

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/jaek9xmv8xegm721n969.jpg)
  
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](http://bit.ly/DigitalOcean5Dollar) 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. 

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/dmemvgsgwkgu93yqnouv.jpg)

### Set up our Server

To set this up, I'm just going to update it:   
  
```bash
sudo yum update
```

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

```bash
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:  

```bash
sudo systemctl start nginx
```

And it's ready to go. 

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/qos54p5vgfb03uyutgny.jpg)


### 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:

```bash
dotnet publish -c Release -r linux-x64
```
And we'll go into our publish folder and look for the dist folder:  
  
```bash
cd bin/Release/netstandard2.1/linux-x64/publish/BlazorDemo/dist
```
  
Here I can see a listing of files. 

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/0xwielu826fnof52mfv5.jpg)
  
I will copy these over to my new Linux server. I'm using SCP, but you can use whatever method you feel works:  
  
```bash
scp -r * web@sillyblazordemo.jeremymorgan.com:/usr/share/nginx/html
```
  
And now I load it up in my web browser:   
  
![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/nqpnsnwucxfhuv2bxr93.jpg)

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!](https://blazor-demo.github.io/).

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](https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1).

## 4. Create a Blazor App (Blazor Server)

Now we will create a Blazor Server application.  

```bash  
dotnet new blazorserver -o BlazorServerDemo
```
This creates another Blazor application, and we type in  
  
```bash
dotnet run
```
and it spins up our local application:  

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/18jksuu5y2jxkiy8n1hj.jpg)

and it looks pretty familiar. Only now I don't have the rabbit head. 
 
![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/wpow7gv01m3cp9n0gp13.jpg)
 
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.   
  
```bash
dotnet publish -c Release --self-contained -r linux-x64
```
  
Then we'll go into our publish directory:  

```bash
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)

```bash
scp -r * web@sillyblazordemo.jeremymorgan.com:/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: 

```bash
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:  
  
```bash
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:  

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/sx8v184u6ajouu3skogn.jpg)
  
And we can load it up in our Web Browser!

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/sckx98aa2vjgkcpr53wv.jpg)

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. 

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/lg377apujbzbf99z3qno.jpg)

Now, create the following two folders:  
  
```bash
sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled
```
And then edit your default file

```bash
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:

```bash
sudo systemctl reload nginx
```

Now you see your new page up and running!   

![Blazor in Linux](https://thepracticaldev.s3.amazonaws.com/i/v0o6ld4jrc8e49rygkjp.jpg)
  
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](http://bit.ly/BlazorBigPicture)**
- **[Blazor - Getting Started](http://bit.ly/BlazorGettingStarted)**
- **[Blazor - Authentication and Authorization](http://bit.ly/BlazorAuth)**

So try it out! [Let me know](http://bit.ly/JeremyCMorgan) what you think of Blazor and share your experiences in the comments!