Do you want to try out , 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 , so today we'll see just how "cross-platform" it really is with Blazor, Microsoft's hot new front end development project. Blazor cross-platform 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, . Depending on the version of Linux you're using it may be different. See for your distro. straight from the directions at Microsoft the instructions 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 ( ) or server-side in ASP.NET Core ( Blazor WebAssembly 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. - 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. Standalone deployment 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: BlazorDemo
dotnet run cd 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 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. Digital Ocean $5 special 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: bin/Release/netstandard2.1/linux-x64/publish/BlazorDemo/dist cd 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 * web@sillyblazordemo.jeremymorgan.com:/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: bin/Release/netcoreapp3.1/linux-x64/publish/ cd 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 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: proxy_http_version ;
    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;
} //localhost:5000; 1.1 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! what you think of Blazor and share your experiences in the comments! Let me know

Microsoft

Build and Deploy a Blazor App Without Touching a Windows Machine

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

7 Cool Jamstack Hosting Solutions

ASP.Net Core Blazor Hosting Models

JavaScript Interop and ASP.NET Core Blazor

How Blazor Is Going to Change Web Development

How to Create a Blazor Component Without Lifecycle Methods

7 Cool Jamstack Hosting Solutions

ASP.Net Core Blazor Hosting Models

JavaScript Interop and ASP.NET Core Blazor

How Blazor Is Going to Change Web Development

How to Create a Blazor Component Without Lifecycle Methods

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps