Do you want to try out Blazor, but you’re not a Windows person? Strictly a Linux developer? We’ll 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. Setup 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.
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:
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:
Then we’ll import the Microsoft GPG Key:
Next, we’ll enable the VSCode repository:
and then install it:
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:
Then we’ll install the .NET Core SDK
You can verify your install is correct by typing in:
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.
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:
Next we’ll create a new Blazor WebAssembly App
Go into the directory and run it:
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:
Then I’ll install Nginx on it to serve up our static files.
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:
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:
And we’ll go into our publish folder and look for the dist folder:
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:
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 to create a Blazor Server application.
This creates another Blazor application, and we type in
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.
Then we’ll go into our publish directory:
And we’ll copy those over to an app directory created on the host (yours may vary)
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:
Next, there’s an SELinux setting you need to change that might hang you up:
Now we can just run the executable:
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:
Now if you type in “jobs” you should see it running.
Now, create the following two folders:
And then edit your default file
And add in the following into your server directive:
1 2 3 4 5 6 7 8 9 10
Now restart nginx:
Now you see your new page up and running!
Now you have a full fledged Blazor server on a Linux VM instance.
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 to.
.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!