Azure Tips and Tricks

TIP

🔥 The FREE Azure Developer Guide eBook is available here (opens new window).

💡 Learn more : Static website hosting in Azure Storage (opens new window).

📺 Watch the video : Blazor and Azure Functions for Serverless Websites (opens new window).

# Blazor and Azure Functions for Serverless Websites

# Running a completely serverless solution

With Blazor WebAssembly (opens new window) and Azure Functions (opens new window), you can create rich applications that run completely serverless. A Blazor WebAssembly app consists of HTML, CSS and JavaScript files, with .NET assemblies that run in a browser with WebAssembly (opens new window). You don't need a server to render a Blazor WebAssembly app, the browser does all the work. The Blazor app can use Azure Functions for data operations, which can run on a consumption plan (opens new window), which means that you don't have to worry about running and scaling the application, because Azure does that for you.

In this post, we'll create a Blazor WebAssembly application that calls an Azure Function and runs in Azure on Azure Storage Static Websites (opens new window).

# Prerequisites

If you want to follow along, you'll need the following:

# Creating and deploying a Blazor WebAssembly app that calls an Azure Function in Azure

Let's get started. We'll create a Blazor WebAssembly application and call an Azure Function from it that returns a string of the current date and time.

  1. Open a command prompt
  2. Navigate to a folder that you want to create a Blazor app in
  3. Type the following command, where you replace the projectname with a name for the Blazor app
dotnet new blazorwasm -o projectname
1
  1. Open the folder of the newly created Blazor app in VS Code. This contains an index.html file, and other files, like Index.razor
  2. Try the Blazor app out by opening a terminal in VS Code and typing dotnet run. The terminal will show a URL that the Blazor app is listening on. When you open that URL in a browser, you'll see the app

(Blazor WebAssembly application in VS Code)

Let's create and deploy the Azure Function that will return the current date and time. We'll do that from VS Code.

  1. Open Visual Studio Code
  2. Click on the Azure icon in the menu on the left
  3. In the Functions section, click Create New project

(Azure Functions in VS Code)

  1. Enter a path that the new Function will be created in
  2. Select C# for the Function language
  3. Choose HttpTrigger for the trigger type
  4. Fill in a name for the Function
  5. type a namespace for the Function
  6. Choose Anonymous for the security setting
  7. And finally, select Open in current window. That's it. The Function will now be created and opened in VS Code

When the Function is created, it will have some default boilerplate code. Remove the code within the Function body and replace it with the code below that simply returns the current date and time when the Function is called.

    log.LogInformation("C# HTTP trigger function processed a request.");

    string responseMessage = DateTime.Now.ToString();

    return new OkObjectResult(responseMessage);
1
2
3
4
5

To test the Function, run it by selecting Run > Run without debugging. This will run the Function and will show you the URL where the Function is running. Open that URL in a browser and see the current date and time that the Function returns.

So we now have an Azure Function and a Blazor WebAssembly app. Let's deploy these to Azure and tie them together. We'll start by deploying the Function to Azure.

  1. In VS Code, in the Azure Functions extension section, click Deploy to Function App

  2. Next, select Create new Function App in Azure

  3. Enter a Name for the new Function App

  4. Select a location

  5. That's it. The Azure Function App will be created and the Function will be deployed to it

  6. When the Function App is created and the Function is deployed, it will show up in the list of Function Apps in VS Code. Navigate to the Function, right-click on it and select Copy Function Url. We'll need to call this Url from the Blazor app

  7. Switch back to the Blazor WebAssembly app in VS Code and navigate to Index.razor

  8. Change the code of Index.razor into the code below, and replace the functionurl with the url of the Function in Azure

@page "/"
@inject HttpClient Http

<h1>Hello, world!</h1>

The date and time is: <h2>@currentDateTime</h2>

<SurveyPrompt Title="How is Blazor working for you?" />

@code {
    private string currentDateTime;
    protected override async Task OnInitializedAsync()
    {
        currentDateTime = await Http.GetStringAsync("functionurl");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  1. Next, we need to create a place in Azure to host the Blazor app. Click on the Azure icon in the menu on the left and find the Azure Storage section
  2. Click the Create storage account button
  3. Fill in a name for the new account and hit enter. The Storage Account will be created and the Static Website feature will be enabled for it, which means that it will have a Blob container called $web. We'll use this to host our Blazor app

(Static Website feature in Azure Storage)

  1. Now open a terminal in VS Code and run the following commands to build the Blazor app and create a folder with all the files that we need to run it:
dotnet build
dotnet publish
1
2
  1. The Blazor WebAssembly app is now published to a folder under Bin\Debug\netstandard2.1\publish. Navigate to this folder and right-click on the wwwroot folder and select Deploy to Static Website

(Published Blazor WebAssembly app)

  1. Select the Storage Account that we've just created

When the Blazor WebAssembly app is published to Azure Storage, VS Code will show the URL that you can use to access it. Open that URL in a browser and see the app in action, which shows the current date and time that it gets from the Azure Function.

(Blazor WebAssembly app running in Azure Storage)

# Conclusion

A completely serverless solution is highly scalable, because it scales automatically when it is used. Azure Functions (opens new window) scale when they are executed and a Blazor WebAssembly (opens new window) app gets downloaded from Azure Storage (opens new window), and then runs in a Browser on WebAssembly, which is incredibly fast. Go and check it out!

←
Tip 287 - How to use a GraphQL on Azure →