Published on 06/18/2022 14:12 by zawasp

In my previous post I explained what this app is all about.

Let’s get busy. Start by creating a new Angular app for the frontend and an Azure Functions app for the backend. I’m going to use PrimeNG for the UI controls, so I also added the needed packages.

Create a new Resource Group in Azure to logically group all needed resources. I created the Static Web App, Storage Account and an Application Insights resources. Storage will be used for storing data in Azure Tables and running Azure Functions. Application Insights is a really useful health monitoring tool, I figure I’m going to need it for app metrics and logs.

While creating the static web app, the wizard prompts you to connect your GitHub repository to the app. I configured the app as Angular, but there are other GitHub actions available (e.g. for React, Vue etc. - or static website generators, like Hugo). Once this is done, Azure automatically commits the needed workflow file.

Since my static app has managed Functions as well, once you push to the repo, the pipeline builds both the Angular frontend and the .NET Functions project. The pipeline uses another Microsoft open source project, called Oryx. I need to check it out in more depth later.

Ok, so code wise, the backend functions will have just a HTTP Trigger (ie., a REST endpoint) for querying stored data and a Timer Trigger to scrape and update the data, once a day (it’s essentially a cron job):

{{< gist zawasp 3b2cd9d692ef5e9dc20995f76ceec0c2 >}}

The TimerTrigger uses a CRON-like syntax, which makes it convenient to configure. Additionally, I’m passing in a ICollector<EnergySourceEntity> parameter as a Table Output Binding. This will allow writing the energy sources directly into the Azure Table.

So, commit, wait for the pipeline to finish, access the frontend:

Now call the backend API:

… Bummer. So what’s going on? After searching a bit, it seems Azure Storage is not supported in static web app managed functions (although I haven’t found any official documentation on this). Immediately after removing the offending packages, the API started working:

It looks like Azure pulled a Drakepost on me.

No worries, I’ll just need to use Functions as a separate functions app. But that in Part 2.

UPDATE:

It seems the newest (v5+) Azure Storage SDK causes this, for some reason. Switching back to the older (v4.0.5) version. Timer triggers are not yet supported on hosted functions in static web apps. For now I’m using a regular http trigger. I’ll probably automate calling it once a day by other means.

A working API version is here.

P.S. I’m going to properly align the images once I figure out how to do it in Hugo :)

Written by zawasp