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:

• Works well with SPA technologies (Angular, React, Vue)
• Serve an API using Azure Functions
• Automatic integration with GitHub and GitHub Actions to deploy immediately
• Currently costs nothing (while this is in preview)

Pre-requisites

To get started, you’ll need:

• Angular CLI
• Azure Functions Core Tools
• An Azure account

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:

• Sign in to your GitHub account and select the correct repository and branch.
• For build details, use the following information (replacing azure-static-web-app-poc with):
  • App location: app
  • Api location: api
  • App artifact location: dist/APPNAME

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:

• UI – check the URL provided.
• API – check the URL, plus /api/TestFunction

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: https://docs.microsoft.com/en-us/azure/static-web-apps/overview