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

So 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.

RoEnergy Resource Group in Azure

RoEnergy Resource Group in Azure

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):

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:

RoEnergy frontend hello world

Now call the backend API:

Function host is not running

… 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:

RoEnergy backend API 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 :)