Azure Static Web App: A Simple Static Content App


The Azure Static Web App template with a bit of filtering, provides a quick-and-dirty way to get some fixed content up online on Azure using GitHub Actions. In this example, some signs at a sports ground were turned into Blazor pages by photographing them and including them on razor pages directly as images.

Situation

At a local athletics track, there are two fixed signs the first of which set out the rules for track usage and the second covers bookings, including fixed weekly bookings by the resident clubs. There is also a sign that shows as tables, all of the bookings for the current and next months, including the bookings by entities other than the resident clubs … typically schools. The general public has access to track except during those bookings. The local municipal council is the controlling authority and is responsible for generating and displaying the monthly booking tables. Unfortunately, the council, despite requests, has not been forthcoming with the monthly booking tables, neither supplying them to us or puting them online. It would be useful to be able to go online and see if the track is free, rather than attending and finding it’s closed because a school has a booking.

So it was decided to just photograph the monthly booking tables and and post then as an Azure Static Web App, along with images of the two informational signs (which can be converted at a later stage to HTML). Azure Static Web Apps can be hosted on Azure for free with a few minor restrictions which for the occasional usage that this site will get, are not an issue. These limits allow for 10 apps per subscription, 250MB of content 100GB per month of bandwidth, 1 Custom Domain etc. For more information see here.

Implementation

Aaron Powell (Principal Cloud Advocate, Cloud Advocacy) has a post on Microsoft DevBlogs Azure Static Web Apps with .NET and Blazor*. This uses a GitHub repository template which implements the standard NET Core app with a Counter page and a static weather data page. which implements the standard. You create your app by forking this repository to your own space in GitHub.
Q. Is there a template for this in Visual Studio? I couldn’t find one.
I disabled the counter and fetchdata pages (I left them in place as I might use them later on) and added four new pages, also adding them as links in the NavMenu page, (removing the counter and fetchdat links). The page routes are:

  • overview
  • details
  • april201
  • may2021

Each page has a heading and an image reference such as:

<img src="/Images/Bookings.jpg" alt="Bookings" width="1024" height="680">

All four images were placed in the wwwroot/Images folder in the Client project folder.

An Azure Static Web App was created as per Aaron’s post. Remember though after selecting the master Branch, to select Blazor in the next box. Three more info boxes appear for which you use the defaults. If after creating the app, when upu go to the app in a browser, you get “couldn’t find the language” message, or similar, you haven’t done that last bit (as I did once).

*The more detailed tutorial is discussed in previous posts on this site.

Custom Domain

The app is up and running on Azure at https://orange-rock-0d133001e.azurestaticapps.net/. The URL is auto generated. As I have a custom domain, sportronics.com.au, the app was given a custom domain by selecting that tab in the Azure Portal for the app and entering mvacbookings.sportronics.com.au
The portal then indicated what was required for the CNAME entry that needed to be created with my provider. That was created and a little while later I was able to validate the custom domain in the portal.

The URL for the app is now https://mvacbookings.sportronics.com.au
Note that its uses SSL/TLS without further ado! 😄

Outcome

The app is up and running on Azure at MVAC Bookings. The content is quite static (no database or other state interactions required). Its quite simple to add further messages as images on a another page. The repository is on GitHub at djaus2/MVAC

Footnote

Yes there is an unused Azure Function, but that might be used later on.

Update

The textual content of the Overview and Bookings images were passed through OCR using the phone app Microsoft Lens (which was used to capture the images) and converted into text. Those two pages are now coded with HTML. 😄

 TopicSubtopic
   
 This Category Links 
Category:Web Sites Index:Web Sites
  Next: > Azure Static Web Apps
<  Prev:   An Azure Static Web App with EF