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)
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:
ng new NAME --directory app
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
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
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).
Microsoft’s Guide on Static Web Apps: https://docs.microsoft.com/en-us/azure/static-web-apps/overview