An Azure Static Web App with EF: 1. Multiple Entities and LocalStorage


An Azure Static Web App was developed by extending the tutorial on that topic to contain 3 editable entities mimicking a database with a view to extending to use EF with an Azure SQL database.

The app is for helpers to volunteer for assistance tasks at a track meet. Entity Framework Core is used with the main entities being Round, Helper and Activity. A Helper volunteers and performs an Activity at a Meet (called a Round).

Microsoft Docs: Azure Stic Web Apps

About this Activity

An Azure Static Web App can be setup so as to be automatically deployed to Azure whenever a new Commit is sent to GitHub. You setup the repository on GitHub then create the web app in the Azure Portal and configure it to use GitHub Actions in the repository. Deployment is then automatic upon commit after that which triggers a build and deployment. With Blazor, you create an app such that there is an API that runs on the server side and the rendering is done in a WASM client app using the data generated by the API. Static web apps are commonly built using libraries and frameworks like Angular, React, Svelte, Vue, or Blazor structured as Azure Functions. This exercise uses Blazor (.NET Core) and so the functions are implemented using C#.

Nb: You do not deploy a Blazor app with Controllers etc as an Azure Static Web App. The server fucntionality is replaced by an API project._

Nb2: You can though deploy a Blazor WASM app with Controllers and Services directly from Visual Studio as an Azure Static Web Service.

Nb3: This is all not to be confused with an Azure Storage Static Web Site that you create from Azure Blob Storage

A quick getting-started activity is documented here: Tutorial: Building a static web app with Blazor in Azure Static Web Apps. This is just the standard .NET Core app with a counter page and some static weather content on another page. A more detailed tutorial is located here:Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps. This is the starting point for this blog post and its repository on GitHub:

The outcome of that latter tutorial was progressively extended so as to implement a number of editable entities rather than the one fixed entity. The ultimate aim is to have the app backed by Entity Framework Core with access to an Azure SQL database. The functionality is meant to be similar to that as in two Blazor apps which are available as repositories here. Each step in this “morphing” process has been bookmarked as a separate branch. The main branch is always the latest and is what is deployed as an Azure Static Websites for viewing.

Current Version

  • This version (this bracnch) implements:
    • 3 Entities: Activity, Helper and Round.
      • A Helper volunteers for an activity which is for a specific round of athletics competition.
    • Entities are stored in a C# LocalStorage service.
    • CRUD: Can add, delete and modify the entities.
    • Can reset the “pseudo” database to the initial entities.
    • Nb: The app uses Scoped services so all users see the same data so please reset the data if you give the deployed version a go , when done.

Links

Posts in this series: An Azure Static Web App with EF

  1. Multiple Entities and LocalStorage This post.
  2. Index of the Repository
  3. Entity Framework Core Implementation
  4. Cascade and SetNull Deletions
 TopicSubtopic
<  Prev:   Blazor Helpers App
   
 This Category Links 
Category:Web Sites Index:Web Sites
  Next: > An Azure Static Web App with EF
<  Prev:   Azure Devops Jekyll Site