Hosting ASP.NET Core Blazor in Azure Blob Storage Static Websites

Today, I'd like to show you a quick CI/CD project I put together using Blazor.  This app is made from the sample template for a client-side Blazor project.  I built and deployed it using Azure Pipelines.  It's hosted in Azure using Blob Storage and the Static Websites feature.

What's Blazor?

Blazor is a .NET framework that leverages WebAssembly to run .NET code in the browser.  You can build client-side applications with the logic built in C#.  Blazor allows you to set up even more complicated architectures using a client-server model and SignalR (https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.0#server-side).  For this project I just made a simple single-page application (SPA) using the default Blazor template.  You can find more about how to build the template for yourself here: https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio.  Please note I created this project with the .NET Core 3.0 preview version 3.0.100-preview3-010431.  The project template structure changes in later versions of the SDK so this may not work if you use a different version.

What's Azure Blob Storage and Static Websites?

I chose Azure Blob Storage because I wanted to try the Static Websites feature.  A Blazor SPA would be a perfect fit to cheaply host in Azure Blob Storage and still have the power of C# and .NET.  

I set up the storage account in Azure and enabled Static Websites.  This created a $web folder that I could target using my Azure Pipeline build.

Creating the Azure Pipeline build

Azure Pipelines allow developers to build and deploy their code all from the same platform.  They offer hosting for code repositories and even test plans for QA, but I'll just be using the Build and Deploy services for this project.  

I was able to pull my GitHub code for the Blazor project and start building the project the same way I would on the command line with the .NET CLI.  The Pipeline Build will even trigger once the master branch is updated.

The key to building the Blazor project was using the .NET Core SDK Installer task.  I was able to tell it exactly what version of the .NET Core SDK I needed for my Blazor template to build correctly.  From there, it was as simple as invoking dotnet build, dotnet publish and storing the build artifacts.  You can even put a step to run your tests during your build process, but I have that disabled until I get some tests running.  

The Pipeline Release is super simple as well.   We just want to Extract the Files from the Artifact, then copy the files to our Storage Account using the AzureBlob File Copy Task.  This Release Definition is configured to run after a successful build.

Once that's set up, you can push to master and watch the magic happen.  After the Release deployed successfully, you should see some files in your $web folder in Azure Blob Storage.  

You can go to the address where your Static Website is mapped and should see your Blazor app run if everything went smoothly.

I have some links below to the site and source code.  Check them out!  The webpage even has a Microsoft Cognitive Services Computer Vision integration (https://azure.microsoft.com/en-ca/services/cognitive-services/computer-vision/).  So if you input your API key and an image URL on the Computer Vision page, you'll get back some results.  

Source: https://github.com/mitchgollub/PhillyCodeCamp2019.1-Blazor

Site: https://blazorstaticapp.z20.web.core.windows.net

Thanks for reading!