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

    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 Color B
    Read more

    Help! I accidently enabled HSTS–on localhost

    I ran into an issue after accidently enabling HSTS for a website on localhost. This was not an issue for the original website that was running in IIS and had a certificate configured. But when I tried to run an Angular app a little bit later on http://localhost:4200 the browser redirected me immediately to https://localhost . Whoops! That was not what I wanted in this case. To fix it, you need to go the network settings of your browser, there are available at: chrome://net-internals/#hsts edge://net-internals/#hsts brave://net-internals/#hsts Enter ‘localhost’ in the domain textbox under the Delete domain security policies section and hit Delete . That should do the trick…
    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