Creating an Angular and Azure Function API App with Azure Static Web App

Recently, Azure released Azure Static Web Apps, which looks like a way to host static web sites easily. Some of the perks I see immediately are:


To get started, you’ll need:

Create a GitHub Repo with Angular and Azure Function Apps

First, create a repo in your GitHub account, and clone that repo to your local PC.

Now create an Angular app with the CLI:

Next, create an Azure Functions API (currently, there is a limitation that only allows for use of Javascript as the runtime):

Commit the changes made above, and then let’s move onto creating the Azure Static Web App.

Creating Azure Static Web App

Next, create an Azure Static Web App in your Azure account. When doing this, do the following:

Automatic Deployment

After creating the Static Web App, a GitHub Workflows file will be created and committed to your repo. In turn, your skeleton application should be built and deployed automatically.

With the deployment completed, you can view the deployed UI and API by checking the URL of the Static Web App in the Azure portal:

Setting a Custom Domain

To set up a custom domain, access the ‘Custom Domains’ option on the sidebar. You’ll create a CNAME record as requested for the domain being used.

In terms of SSL Certificates, you don’t have to worry. Azure Static Web Apps will handle this completely for you. However, I was only able to create a www domain (as opposed to a root domain).

Further Reading

Microsoft’s Guide on Static Web Apps: