25 | An unhandled error has occurred.
26 |
Reload
27 |
🗙
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/Client/wwwroot/sample-data/weather.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "date": "2022-01-06",
4 | "temperatureC": 1,
5 | "summary": "Freezing"
6 | },
7 | {
8 | "date": "2022-01-07",
9 | "temperatureC": 14,
10 | "summary": "Bracing"
11 | },
12 | {
13 | "date": "2022-01-08",
14 | "temperatureC": -13,
15 | "summary": "Freezing"
16 | },
17 | {
18 | "date": "2022-01-09",
19 | "temperatureC": -16,
20 | "summary": "Balmy"
21 | },
22 | {
23 | "date": "2022-01-10",
24 | "temperatureC": -2,
25 | "summary": "Chilly"
26 | }
27 | ]
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Blazor Starter Application
2 |
3 | This template contains an example .NET 8 [Blazor WebAssembly](https://docs.microsoft.com/aspnet/core/blazor/?view=aspnetcore-6.0#blazor-webassembly) client application, a .NET 8 C# [Azure Functions](https://docs.microsoft.com/azure/azure-functions/functions-overview), and a C# class library with shared code.
4 |
5 | ## Getting Started
6 |
7 | 1. Create a repository from the [GitHub template](https://docs.github.com/en/enterprise/2.22/user/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template) and then clone it locally to your machine.
8 |
9 | 1. In the **Api** folder, copy `local.settings.example.json` to `local.settings.json`
10 |
11 | 1. Continue using either Visual Studio or Visual Studio Code.
12 |
13 | ### Visual Studio 2022
14 |
15 | Once you clone the project, open the solution in the latest release of [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) with the Azure workload installed, and follow these steps:
16 |
17 | 1. Right-click on the solution and select **Configure Startup Projects...**.
18 |
19 | 1. Select **Multiple startup projects** and set the following actions for each project:
20 | - *Api* - **Start**
21 | - *Client* - **Start**
22 | - *Shared* - None
23 |
24 | 1. Press **F5** to launch both the client application and the Functions API app.
25 |
26 | ### Visual Studio Code with Azure Static Web Apps CLI for a better development experience (Optional)
27 |
28 | 1. Install (or update) the [Azure Static Web Apps CLI](https://www.npmjs.com/package/@azure/static-web-apps-cli) and [Azure Functions Core Tools CLI](https://www.npmjs.com/package/azure-functions-core-tools).
29 |
30 | 1. Open the folder in Visual Studio Code.
31 |
32 | 1. Delete file `Client/wwwroot/appsettings.Development.json`
33 |
34 | 1. 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:
35 |
36 | In the Client folder, run:
37 | ```bash
38 | dotnet run
39 | ```
40 |
41 | In the API folder, run:
42 | ```bash
43 | func start
44 | ```
45 |
46 | In another terminal, run:
47 | ```bash
48 | swa start http://localhost:5000 --api-location http://localhost:7071
49 | ```
50 |
51 | The Static Web Apps CLI (`swa`) starts a proxy on port 4280 that will forward static site requests to the Blazor server on port 5000 and requests to the `/api` endpoint to the Functions server.
52 |
53 | 1. 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.
54 |
55 | 1. Enter Ctrl-C to stop the Static Web Apps CLI.
56 |
57 | ## Template Structure
58 |
59 | - **Client**: The Blazor WebAssembly sample application
60 | - **Api**: A C# Azure Functions API, which the Blazor application will call
61 | - **Shared**: A C# class library with a shared data model between the Blazor and Functions application
62 |
63 | ## Deploy to Azure Static Web Apps
64 |
65 | This application can be deployed to [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps), to learn how, check out [our quickstart guide](https://aka.ms/blazor-swa/quickstart).
66 |
--------------------------------------------------------------------------------
/Shared/Shared.csproj:
--------------------------------------------------------------------------------
1 |