Skip to content

Azure Static Web App with Blazor

Last week at Ignite Microsoft announced that the preview of Azure Static Web App now also supports Blazor WebAssembly. In this post, I will show how to create a Blazor client-side (WebAssembly) application and an Azure Function to retrieve some data. Then Azure Static Web App will automatically deploy the Blazor app and the Function.

You can find the code of the demo on Github.

Create a Blazor WebAssembly Application

To create a Blazor WebAssembly application, you need Visual Studio 2019 and the .NET Core SDK 3.1.300 or later.

In Visual Studio create a new project and select Blazor App as your template.

Select Blazor App as the template
Select Blazor App as the template

Enter a name and then select Blazor WebAssembly App to create a client-side Blazor application.

Create a Blazor WebAssembly application
Create a Blazor WebAssembly application

Click Create and Visual Studio creates a sample Blazor WebAssembly application.

Create an Azure Function in Visual Studio

To create an Azure Function, you need the Azure Functions Core Tools.

In your previously created solution, right-click on the solution file, click add a new project, and select Azure Functions as the template.

Select Azure Function as the template
Select Azure Function as the template

Enter a name and then select Http trigger to trigger the function via HTTP calls.

Select HTTP Trigger for the Azure Function
Select HTTP Trigger for the Azure Function

Get Data from the Azure Function

To call the Azure Function and get some data about products, I edit the already existing FetchData page. I change the code block to call the Azure Function and then cast the result into a product array. Then, I will loop over the array in the HTML code and display all elements in a table.

@code {
    private Product[] products;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            products = await Http.GetFromJsonAsync<Product[]>("/Api/Product");
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.ToString());
        }
    }
}

In the Function, I create a new list with three products and return it. Note that the FunctionName, “Product”, is the same as in the call in the code block.

 [FunctionName("Product")]
 public static IActionResult Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req, ILogger log)
 {
     var products = new List<Product>
     {
         new Product
         {
             Name = "Book",
             Description = "A great book",
             Price = 9.99m
         },
         new Product
         {
             Name = "Phone",
             Description = "A good phone",
             Price = 149.99m
         },
         new Product
         {
             Name = "Car",
             Description = "A bad car ",
             Price = 999.99m
         }
     };

     return new OkObjectResult(products);
 }

The Product class is in a class library so both projects can reference it.

To test that everything is working as expected, start the Blazor app and the Azure Function. Click on the Fetch data and you will see three products displayed. In the console application of the Azure Function, you can see its URL and some log information. To test only the Azure Function, you could also call the displayed URL. This will return the products as JSON.

Test the implementation locally
Test the implementation locally

Create an Azure Static Web App

Go to the Azure Portal, click on New, search for Static Webb App, and click on Create.

Create the Static Web App
Create the Static Web App

Enter a name, location, and your Github repository. Then select Blazor as Build Presets and enter the location of your Blazor project and of your Azure Function project. Click Review + create and your application will be deployed.

Configure the Static Web App
Configure the Static Web App

The deployment takes only a moment. After it is finished, click on the URL that is displayed in your Static Web App.

The Static Web App got deployed
The Static Web App got deployed

This opens your application in a new window and when you click on Fetch data, you will see your products.

Testing the deployed Blazor application
Testing the deployed Blazor application

Below the URL, you see a link to the Github Actions which are responsible for the deployment. Alternatively, you could also open your Github repository and click on Actions there. When you open the Github Actions, you will see the deployment from the Azure Static Web App.

Github Actions deployed the Blazor application
Github Actions deployed the Blazor application

Conclusion

I already wrote an article about Azure Static Web Apps when they got announced in May. Back then I had some problems and the functionality was very limited. With these improvements, especially with the support of Blazor, Microsoft is going definitively in the right direction. To have a realistic application, the Azure Function could get some data from a database. Another great benefit is that it is still free and you only pay for the Azure Functions (the first 400,000 seconds are free).

You can find the code of the demo on Github.

Published inCloudDevOps

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    RSS
    Follow by Email
    LinkedIn
    Share