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

    XUnit - Assert.Collection

    A colleague asked me to take a look at the following code inside a test project: My first guess would be that this code checks that the specified condition(the contains) is true for every element in the list.  This turns out not to be the case. The Assert.Collection expects a list of element inspectors, one for every item in the list. The first inspector is used to check the first item, the second inspector the second item and so on. The number of inspectors should match the number of elements in the list. An example: The behavior I expected could be achieved using the Assert.All method:
    Read more

    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

    Angular --deploy-url and --base-href

    As long you are running your Angular application at a root URL (e.g. www.myangularapp.com ) you don’t need to worry that much about either the ‘--deploy-url’ and ‘--base-href’ parameters. But once you want to serve your Angular application from a server sub folder(e.g. www.mywebsite.com/angularapp ) these parameters become important. --base-href If you deploy your Angular app to a subfolder, the ‘--base-href’ is important to generate the correct routes. This parameter will update the <base href> tag inside the index.html. For example, if the index.html is on the server at /angularapp/index.html , the base href should be set to <base href="/angularapp/"> . More information: https://angular.io/guide/deployment --deploy-url A second parameter that is important is ‘--deploy-url’. This parameter will update the generated url’s for our assets(scripts, css) inside the index.html. To make your assets available at /angularapp/, the deploy url should
    Read more