Blazor Starter Application

This template contains an example .NET 6 Blazor WebAssembly client application, a .NET 6 C# Azure Functions, and a C# class library with shared code that includes authentication.

Notes: Authentication examples were taken from How to secure your C# API w/ Azure Static Web Apps [13 of 16] | Azure Tips and Tricks. The ApiIsolated project does not have authentication implemented.

Getting Started

1. Create a repository from the GitHub template and then clone it locally to your machine.

2. In the Api folder, copy local.settings.example.json to local.settings.json

3. Continue using either Visual Studio or Visual Studio Code.

Visual Studio 2022

Once you clone the project, open the solution in Visual Studio 2022 and follow these steps:

1. Install the Azure Static Web Apps CLI.

2. Install the Command Task Runner (64-bit) extension.

3. Right-click on the solution and select Set Startup Projects....

4. Select Multiple startup projects and set the following actions for each project:

   • Api - Start
   • ApiIsolated - None
   • Client - Start
   • Shared - None

5. Press F5 to launch both the client application and the Functions API app.

Notes: "launchUrl": "http://localhost:4280/", has been added to the launchSettings.json client profile. A StaticWebApp.cmd file in the solution root with swa start http://localhost:5000 --devserver-timeout=6000000 has been added. The commands.json file is setup to have the Command Task Runner launch the Azure Static Web App CLI when the project opens. This setup will allow you to add authentication and run it locally.

Optional: Setup Windows Terminal to close the process exits, fails or crashes instead of closing only when the process exits successfully. This will close the Azure Functions window when you stop debugging.

Visual Studio Code with Azure Static Web Apps CLI

1. Install the Azure Static Web Apps CLI and Azure Functions Core Tools CLI.

2. Open the folder in Visual Studio Code.

3. In the VS Code terminal, run the following command to start the Static Web Apps CLI, along with the Blazor WebAssembly client application and the Functions API app:

   swa start http://localhost:5000 --run "dotnet run --project Client/Client.csproj" --api-location Api

   The Static Web Apps CLI (swa) first starts the Blazor WebAssembly client application and connects to it at port 5000, and then starts the Functions API app.

4. Open a browser and navigate to the Static Web Apps CLI's address at http://localhost:4280. You'll be able to access both the client application and the Functions API app in this single address. When you navigate to the "Fetch Data" page, you'll see the data returned by the Functions API app.

5. Enter Ctrl-C to stop the Static Web Apps CLI.

Template Structure

• Client: The Blazor WebAssembly sample application
• Api: A C# Azure Functions API, which the Blazor application will call
• Shared: A C# class library with a shared data model between the Blazor and Functions application
• ApiIsolated: A C# Azure Functions API using the .NET isolated execution model, which the Blazor application will call. This version can be used instead of the in-process function app in Api.

Deploy to Azure Static Web Apps

This application can be deployed to Azure Static Web Apps, to learn how, check out our quickstart guide.