Build and Deploy a Blazor App Without Touching a Windows Machine

Jeremy Morgan - Dec 15 '19 - - Dev Community

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.

Blazor in Linux

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then we'll import the Microsoft GPG Key:

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

Next, we'll enable the VSCode repository:

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

and then install it:

sudo apt update
sudo apt install code
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

Then we'll install the .NET Core SDK

sudo apt-get update
sudo apt-get install dotnet-sdk-3.1
Enter fullscreen mode Exit fullscreen mode

You can verify your install is correct by typing in:

dotnet --version
Enter fullscreen mode Exit fullscreen mode

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

Blazor in Linux

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
Enter fullscreen mode Exit fullscreen mode

Next we'll create a new Blazor WebAssembly App

dotnet new blazorwasm -o BlazorDemo
Enter fullscreen mode Exit fullscreen mode

Go into the directory and run it:

cd BlazorDemo
dotnet run
Enter fullscreen mode Exit fullscreen mode

Your terminal window should look like this:

Blazor in Linux

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

Blazor in Linux

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.

Blazor in Linux

Set up our Server

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

sudo yum update
Enter fullscreen mode Exit fullscreen mode

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

sudo yum install epel-release
sudo yum install nginx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

And it's ready to go.

Blazor in Linux

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
Enter fullscreen mode Exit fullscreen mode

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

cd bin/Release/netstandard2.1/linux-x64/publish/BlazorDemo/dist
Enter fullscreen mode Exit fullscreen mode

Here I can see a listing of files.

Blazor in Linux

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 * web@sillyblazordemo.jeremymorgan.com:/usr/share/nginx/html
Enter fullscreen mode Exit fullscreen mode

And now I load it up in my web browser:

Blazor in Linux

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
Enter fullscreen mode Exit fullscreen mode

This creates another Blazor application, and we type in

dotnet run
Enter fullscreen mode Exit fullscreen mode

and it spins up our local application:

Blazor in Linux

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

Blazor in Linux

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
Enter fullscreen mode Exit fullscreen mode

Then we'll go into our publish directory:

cd bin/Release/netcoreapp3.1/linux-x64/publish/
Enter fullscreen mode Exit fullscreen mode

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

scp -r * web@sillyblazordemo.jeremymorgan.com:/home/web/apps/BlazorServerDemo
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

setsebool -P httpd_can_network_connect 1
Enter fullscreen mode Exit fullscreen mode

Now we can just run the executable:

./BlazorServerDemo --urls http://0.0.0.0:5000
Enter fullscreen mode Exit fullscreen mode

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

Blazor in Linux

And we can load it up in our Web Browser!

Blazor in Linux

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 &
Enter fullscreen mode Exit fullscreen mode

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

Blazor in Linux

Now, create the following two folders:

sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled
Enter fullscreen mode Exit fullscreen mode

And then edit your default file

vi /etc/nginx/sites-available/default
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Now restart nginx:

sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

Now you see your new page up and running!

Blazor in Linux

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.

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

Image
10 Tips For Asbestos Settlement That Are Unexpected
Image
URL Parts and Parameters in Javascript
Image
A Provocative Remark About Asbestos Compensation Payouts
Image
Mesothelioma Asbestos Claim: The Secret Life Of Mesothelioma Asbestos Claim
Image
Unveiling Spread Out AI: Automating Social Media Audience Targeting for Your Ads

ai, socialmedia, ads, webdev
Image
How to Stand Out in Your AWS Community Builders Application (And Re-Application)

aws, cloud, community, tips
Image
Introduction to Microsoft Entra ID

entraid, activedirectory, microsoft
Image
15 Secretly Funny People Work In How To Get Spare Car Key
Image
Fixing File Renaming Issues in Git: Handling Case Sensitivity and core.ignorecase

git, github, beginners, webdev
Image
Stylowe Meble do Sypialni: Jak Stworzyć Idealną Przestrzeń do Relaksu
Image
sedikit kehebohan bermain judi slots online
Image
What is a chicken? An introduction to distroless containers

dotnet, distroless, docker
Image
What To Look For To Determine If You're Ready To Electric Fireplace That Hangs On Wall
Image
Why We Do We Love Gas Boiler Engineer Near Me (And You Should Also!)
Image
Which are unique gifts for men for all the occasions?
Image
The History Of Asbestos Claims Payout
Image
Azure Network Security Groups (NSGs): Securing Your Azure Virtual Network

azure, activedirectory
Image
Cat Flap Installation - How to Choose and Install a Cat Flap
Image
Think You're Cut Out For Doing Lawsuit Asbestos? Check This Quiz
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .