Blazor give use the ability to create fast, easy and yet beautiful web application while taking advantage of the benefits of C# and .Net. but there’s still something we haven’t discuss, how we publish Blazor applications? What do we need to know to host our app? Those question have a simple answer. Blazor application are .Net Core applications which in terms means that you can deploy your Blazor applications like any other .Net Core app.
Don’t worry today I will not bore you with all the details of how .Net Core works when publishing and deploying the application, but if you want the details I let you a link to the official documentation.
Now now, there’s somethings you got to keep in mind when working with Blazor. That is, although Blazor application are basically the same no matter what project you choose, we can’t ignore the different type of project, the main difference is how Blazor will be load, for example
I simple way to compare both types of project is, Client-Side – The end-user browser will download and execute the runtime and application files and render the view, the user browser will do most of the work. While the Server-Side will execute the application on the server and send a rendered view to the end-user browser, the hosting server will do most of the work, but we get the security of not sending our app DLL’s and prevent the end-user to have the actual app logic. Each of them has their pros and cons, I will show you a couple of ways you can deploy each project.
We can publish and deploy Server-Side in different ways, better yet you can deploy to an executable file(.exe). Core give you the option to deploy framework-dependent, where your app will use the Runtime installed in the end-user machine, it also gives you the option to Self-contained where it will package the runtime with the app, so the app runs no matter if the user has the runtime install. Today I will show you how easy it is to deploy a self-Contained Blazor Server-Side application.
First, we start with a new Blazor Server-Side project, once you have done working with the project and are ready to deploy right click on the project, click ‘Publish’
A new screen will appear, if you have previously publish your project then a deploy profile will be selected, click ‘new’, if this is the first time you are publishing the project a button will appear with the text ‘Start’, once you click the button a dialog box will pop up, select ‘Folder’ on the left side options, it will ask you for a output folder to export the application, select where you wish the app to be exported, then click advanced and a new dialog will appear,
Here we will select the configuration will be ‘Release’, we will select the latest Net Core framework (3.0 and up), and in Deployment Mode we will select Self-Contained, and target Runtime ‘win-86’
our setting has been selected we will click save to saved as a Deploy Profile,
that way the next time you want to publish a new version you just select the
deploy profile and click publish.
The dialog will disappear, now will click publish.
after a couple of seconds we will get a compiled self-contained release of the app on the folder we specified. We end up with an executable(.exe), double clicking it will run our application. If look closely the folder that hold our publish application is almost 80MB in size, not the ideal considering my app is the Blazor template and nothing added, but keep in mind that the runtime is included, so it not that bad.
You can actually lower the size even more, open the Solution again in Visual Studio, go under ‘properties’ >> Publish Profile >> select the ‘Folder Profile’ (the profile we created earlier). The file will open on the text editor, under the line
Add the following line
This is a flag that was introduce in .Net Core Preview 6, this will exclude any DLL’s that our application doesn’t use, making the publish application less in size, in this case we experience that our release app takes 35% less space when publish, how much your application will trim will depend on your project.
Now what about the Client-Side application, how can I host
One option that gets over looked its hosting you Blazor application on Blob Storage, for small apps, feature testing or even for personal apps you can take advantage of Azure Blob Storage and host your application at a very low cost, and it easier than you think.
- First you need to create a Azure account, then you need to install the Azure CLI.
- After that go to portal.azure.com, logged in, search for ‘Storage Account
- Once in ‘Storage Account’, add a new account
- Type a ‘Name’, select ‘General Purpose V2 Storage’
- Click Review & Create, then hit ‘Create’
We created the account, in order to host our blazor application we’ll need to enabled static websites on the storage account
- Go to ‘Storage Account’ again, click the account we just created
- Go to ‘Static Websites’, enabled it
- In the ‘Index document name’ type ‘index.html’
- In the ‘Error document path’ type ‘index.html’
- See the ‘Primary Endpoint’? copy that somewhere you can get it later, we will need it
Now we have setup Azure with a Blob Storage, we have enabled support for Static ‘Websites’
We can now deploy our Blazor application to that blob storage, we’ll use the
az storage blob upload-batch
If you installed Azure CLI right now you probably already logged in with your account, but if you haven’t, run
This will launch the browser with Azure login, use the account you created the blob storage in.
Remember earlier when we publish our app, you specified a folder for Visual Studio to output our application. Open cmd(command prompt) and change to that directory, once you are there run the following command
az storage blob upload-batch --account-name blazorsampleapp -s . -d \$web
in my case the name of the storage is ‘blazorsampleapp’, hit enter and the app will deploy to the Blob storage.
Remember the ‘Primary Endpoint’ I talked about earlier? Paste it on a web browser and watch how your app ‘flex’ on the world wide web.
Im looking forward to see what projects you guys create on Blazor, use the comment to link your project, and if you use Azure Storage comment a link below, so other can see, if you encounter any problems along the way let me know, Im happy to help.