Skip to main content

Running a Blazor WebAssembly App on Azure Static Web Apps

In my blog post yesterday I shared how I got into trouble when I tried to deploy a Blazor WebAssembly App to an Azure App Service for Linux. Turns out that this is not supported. However the documentation mentions that it should be possible using Azure Static Web Apps.

So far I didn’t use Azure Static Web Apps, this is a good opportunity to finally give it a try…

Create a Static Web App

  • Go to the Azure portal.
  • Select Create a Resource and search for Static Web Apps.
  • Select Static Web App.
  • Click on the Create Static Web App button or + Create if you already created a Static Web App before.

  • On the Basics tab, choose a Subscription, Static Web App name and hosting plan.

  • We also need to select a region for the Azure Functions API although we’ll not use it.

  • And now comes the important part, we have to choose a deployment option. In my case I have the code available on Azure DevOps, so let’s choose that option and specify all the other details that are required to connect to the correct Azure DevOps project, repository and branch.

  • Once we have done that, we choose Blazor from the Build presets dropdown, This will generate a YAML pipeline file optimized to deploy a Blazor application.

  • Click on Review+Create and afterwards on Create once the validation process completed succesfully.
  • Unfortunately this resulted in an error message:

  • This is because my Azure DevOps instance isn’t linked to an Azure Active Directory. I decided to follow the suggestion and switched to the Other option to finish the creation process.

    Deploy our Blazor app through Azure DevOps Pipelines

    As we couldn’t use the built-in configuration through the Portal, we have to create the Azure DevOps pipeline YAML file ourselves.

    • First go to the Static Web App we just created on the Azure Portal and click on Manage deployment token. Copy the token that is required to authenticate our pipeline.

    Now we need to open our Azure DevOps project and create our pipeline.

    • Open Azure DevOps and go to the correct project.
    • Go to Pipelines and choose Create pipeline. You can use the example YAML file below:
    • Create a new variable Static-Web-App-Token to store the deployment token:

    • If we now run the pipeline, Oryx will detect the application type and automatically compiles our source code into a runnable artifact.

    Let’s browse to our Static Web App to see if it is working:

     

    Labels:

    Popular posts from this blog

    Azure DevOps/ GitHub emoji

    I’m really bad at remembering emoji’s. So here is cheat sheet with all emoji’s that can be used in tools that support the github emoji markdown markup: All credits go to rcaviers who created this list.
    Read more

    Kubernetes–Limit your environmental impact

    Reducing the carbon footprint and CO2 emission of our (cloud) workloads, is a responsibility of all of us. If you are running a Kubernetes cluster, have a look at Kube-Green . kube-green is a simple Kubernetes operator that automatically shuts down (some of) your pods when you don't need them. A single pod produces about 11 Kg CO2eq per year( here the calculation). Reason enough to give it a try! Installing kube-green in your cluster The easiest way to install the operator in your cluster is through kubectl. We first need to install a cert-manager: kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.14.5/cert-manager.yaml Remark: Wait a minute before you continue as it can take some time before the cert-manager is up & running inside your cluster. Now we can install the kube-green operator: kubectl apply -f https://github.com/kube-green/kube-green/releases/latest/download/kube-green.yaml Now in the namespace where we want t...
    Read more

    DevToys–A swiss army knife for developers

    As a developer there are a lot of small tasks you need to do as part of your coding, debugging and testing activities.  DevToys is an offline windows app that tries to help you with these tasks. Instead of using different websites you get a fully offline experience offering help for a large list of tasks. Many tools are available. Here is the current list: Converters JSON <> YAML Timestamp Number Base Cron Parser Encoders / Decoders HTML URL Base64 Text & Image GZip JWT Decoder Formatters JSON SQL XML Generators Hash (MD5, SHA1, SHA256, SHA512) UUID 1 and 4 Lorem Ipsum Checksum Text Escape / Unescape Inspector & Case Converter Regex Tester Text Comparer XML Validator Markdown Preview Graphic Col...
    Read more