Building an Azure Static Web App
Azure Static Web Apps might be leaving preview soon. There are going to be two different SKUs Free and Standard.
Azure Static Web Apps is a service which is currently in preview on Azure. Because its currently in preview, the service is free until it leaves preview. This basically gives you a website, SSL cert (curtesy of Microsoft) and free web hosting!
Azure Static Web Apps automatically builds and deploys a full stack web app from just a GitHub repository. These apps only consist of a static web frontend, and a backend which uses Azure Functions.
When you create a Static Web Apps resource, Azure will set up a GitHub Action workflow in the repository and then publish the updated content straight to your web app.
What do I need to get building?
- Web Domain
- GitHub account (Create a free account here)
- Azure account (Create a free account here)
- Git Client installed on your device (I recommend using git-scm)
And thats pretty much all you need to create a Static Web App
Great, I have everything now what do I do?
Creating the GitHub repository
The first thing that you are going to do is visit the Static Web App teams GitHub repository and choose a template that you want to use.
For this tutorial, we are just going to be using Vanilla-Basic. So we click the Vanilla-Basic repository and then the green “use this template” button.
This will then ask you to give a name for your cloned repository, this can be called anything that you want to but you need to remember what you called it for later when we start configuration of the Web App in Azure later on.
Once you have filled this out, feel free to click the “Create repository from this template”. This will then bring over the resources from the repository to your fresh repository.
Creating your first Azure Static Web App
Now we have our repository set up we can move over to the Azure portal to set up the static web app.
When you login to the Azure portal, you will be presented with the Azure Homepage just like the one below:
We are going to click Create a Resource, and then in the search box type Static Web App. When the dropdown appears, click the Static Web App (preview), followed by create.
Now we are presented with the configuration screen for the web app.
Here you are asked to configure a couple of things…
- Resource Group - think of it as a container for all your resources for a project. These can be named anything, but it’s easier to follow a naming convention e.g. rg-staticwebapp-test
- Name - the name used by Azure to create the object
- Region - where do you want your static web app to be running from. As of this moment, there are only a couple of regions available to choose from:
- Central US
- East US 2
- West US 2
- East Asia
- West Europe
- SKU - how much its going to cost you…
We can also see a button, which asks us to sign into our GitHub account. If you now click the button, and when prompted authorise Azure Static Web Apps to have access to your account.
You then get returned to your resource configuration in Azure, and you will now have some more info to provide for your web app.
From the screenshot we can see that, we have to provide the repository that the Static Web App content is stored, the branch that you want to publish to your static web app.
There are some extra things we can configure here such as build presets, but for the purposes of this guide we will just choose Custom and leave it at the defaults.
When you have finished filling out the details, you can then click the Review + Create button at the bottom of the configuration screen.
Now we are on the Review screen we can double check that the details are correct. Once happy click the create button at the bottom of the page.
This will then create a deployment in Azure with the configuration provided above. This may take a few seconds
Once finished you are offered the option to go to your resource, if you click the option and then you are taken to the Static Web App resource we have just created
Configuring your DNS provider
Now that we have our deployed web app, we can see that the URL looks a little funny (e.g. https://witty-ground-123456.azurestaticapps.net), whilst this url may work it isn’t very friendly to any potential visitor to your website.
So what we are going to do is create a CNAME on your DNS provider to map your domain to the Azure Static Web App.
So first things first, we need to create a custom domain in the resource. We can do this by clicking the Custom domains button on the left hand side of your resource
and then clicking the Add button.
Now we are asked to provide a custom domain, type in your domain (e.g. test.example.com)
Once you have entered the domain, click the next button at the bottom of the shard, now we are given the CNAME host record we need to set on our provider.
For my domain, I’m using Google Domains (https://domains.google) but this will work on any provider.
Once that is done, this may take a little while to propagate the DNS changes. But after 5 minutes, go back to the Azure page and then click Validate. If successful the validation will come back as an success and you can click Add. If it doesn’t come back, give it another 5 minutes and then try again.
After you click Add, this will create another deployment to your resource to provision the custom domain with SSL. Once deployed, you should be able to visit your site from the now more friendly CNAME.
Adding some content to my web app
Now we have the hard configuration job, out of the way we can now add some content to our site.
For this, we can either edit the content directly on GitHub or we can clone the repository to our Computer so we can work on it in an IDE.
For this demo, we will be using Visual Studio Code.
I have made some changes to my HTML from the template, to personalise it more for me.
But now we have made some changes we can save them and then create a git commit which will prep them to be changed on the repository.
This can be done in the command line by running the following commands:
| git add . | git commit -m "Made some changes" | git push
or we can do it all from Visual Studio Code.
After we have pushed the changes to GitHub, a GitHub action will run which will take the content of your repository and then bring it into the Azure Static Web App.
After the workflow has run, your changes will be live.