Azure Functions for Static Web Apps

Azure functions for Static Web Apps

Use Azure Static Web Apps to add Azure Functions that provide a website API. Create these APIs using Azure Static Web Apps, Visual Code and GitHub. 

Azure Functions are available in a variety of languages and have a support community. Today we will show you how to add an API using an Azure Function, written in Typescript, to a vanilla HTML page. The Azure Function saves the data to Azure Table Storage.

 

Setup

 We assume that there is an Azure Static Web App configured as described in the previous post and we will expand on that. If we have all the previous prerequisites, we will need two additional items, the Azure Static Web Apps Extension for Visual Studio Code and an Azure Storage Account.

 

Web Page

This solution does not use a schema for the data and uses a standard web form. This means we can use whatever fields we like. We are going to POST the data to the function. The essential bits are:

We specified a basic event listener for the submission:

Resetting the form shows success.

 

Azure Storage Account

Creating an Azure Storage Account is very simple just log onto the Azure portal and Create Storage Account. For good housekeeping, use the same Resource group and Region as the base Web App. 

Creating an Azure Storage Account

Now that we have a storage account we can create a table, called ‘Request’, for our App to use:

create a table, called ‘Request’, for our App to use

While you are in Azure, on the Storage account tab, go to Security + Networking > Access and ‘Show keys’. Take a copy of a Connection string. You can put this into local.settings.json:

Take a copy of a Connection string. You can put this into local.settings.json

 

Azure Function

The Azure Web App Extension to Visual Studio Code will create a default  Azure Function and all the files and folders.

Press F1 to open the Command Palette.

Select Azure Static Web Apps: Create HTTP Function….

Select Azure Static Web Apps: Create HTTP Function

We select Typescript as our language:

select Typescript as language

 

This is what the default function looks like:

 

We are going to replace it with this:

This function is quite minimal, but it achieves its purpose, which is to insert the contents of the request into the table using the table service. This is familiar territory to any node and npm user, the packages need to be installed, then it is ready for testing. The POST cannot give us data in the required object format so we use the parseMultipartFormData function to create an array which we reduce to an object with properties that correspond to the form fields and pass that along with a key to the table service. This enables us to have a generic function that will pass all the fields of the form to the table with no requirement for a schema.

 

Debugging

Getting an Azure function to do what you require may require some debugging, fortunately this is easy to achieve.

Select the Azure Function in Visual Code and hit F5, this will create a debug session:

Functions:

processForm: [GET,POST] http://localhost:7071/api/processForm

Then select another terminal session and type:

Now you can debug the function which is an essential for this type of work.

Azure Storage Explorer is a free tool that enables us to manage our Azure cloud storage resources from the desktop, in a very convenient package.

View your inserted data using the Azure Storage Explorer:

View your inserted data using the Azure Storage Explorer

 

Deployment

We have used the Azure Static Web Apps project we created we created in the previous post. Deploy the Web Page and Function by committing the changes to Git and pushing to GitHub. We need to update the workflow to deploy the function. Edit the GitHub workflow yaml. Search for the property api_location and set the value to “api”.

Then we just need to add the  AZURE_STORAGE_CONNECTION_STRING to Settings > Configuration , save it, and it should be good to go.

If your configurations are not correct, you may find a 405 or 500 error returned. Use the Azure web interface to check your deployment, see something like this:

Use the Azure web interface to check your deployment

 

Conclusion

We have shown how to extend this Static Web App with serverless APIs powered by Azure Functions to encapsulate compute requirements via reusable API endpoints with dynamic scale based on demand. Azure Static Web Apps are a useful addition to the web workers toolkit. Azure Functions extend this capability and provide some exciting possibilities. The key takeaway is that Azure Functions are a quick and relatively simple way of adding API functionality to an Azure Static Web Apps website.

Alfrick Opidi / About Author

Alfrick is an experienced full-stack web developer with a deep interest in taking technical information and converting it into easy to understand content. See him as a technology enthusiast who explores the latest developments in the industry and presents them in a relatable, concise, and decipherable manner.

LinkedIn