Azure Static Web App with GitHub Actions

— Azure

clip_image002

Why Static Web App?

I have a few older pieces of HTML and JavaScript that I use in some of my other dynamic websites but I wanted to see if I could migrate them to a free service to avoid having to pay for their hosting. I stumbled across Microsoft Azure Static Web App which is free for personal / hobby sites like mine and is the perfect fit! As with all the free services there are some limitations to consider you can view them here.

If you are looking to learn a more about it, you can always head to Microsoft Learn Static Web Apps Module

Prerequisites

Here is what you’ll need

  • GitHub Account
  • Azure Account
  • Static Content for publishing

Create your Repo

From GitHub Portal

Go to Repositories and Select “New”

clip_image004

Fill the required repository details and select “Create repository”

clip_image006

Repo Name is the only required field along with selecting Public vs Private. This depends on your requirements, but for my project I’ve selected Private

clip_image008

Now that my repo has been created I synchronise my repo to my local computer. My personal preference is to use the GitHub Desktop application

clip_image010

This will pop up in GitHub Desktop to clone the repo locally based on the local path you define

clip_image012

Once the repo is synchronised you can now go ahead and edit the content for your repository locally

Create your Static Web App in Azure

Now we will create the Static Web App before we publish content to it.

From the Azure Portal

  1. Navigate to the Azure portal.
  2. Select Create a Resource.
  3. Search for Static Web Apps.
  4. Select Static Web Apps.
  5. Select Create.

clip_image013

  1. In the Basics section, begin by configuring your new app and linking it to a GitHub repository.
    • Select your Azure subscription.
    • Select or Create your Resource Group.
    • Give the Web App a Name.
    • For Hosting plan Select Free
    • Under Azure Functions and staging details, select a region closest to you.
    • Under Deployment details, select GitHub.
    • Select the Sign-in with GitHub button and authenticate with GitHub.

clip_image015

clip_image017

  1. After you sign in with GitHub, enter the repository information.
    • Select your preferred Organization name.
    • Select my-first-web-static-app from the Repository drop-down.
    • Select main from the Branch drop-down.
  2. In the Build Details section, add configuration details specific to your preferred front-end framework.
    • Select Custom from the Build Presets dropdown.
    • Type ./ in the App location box.
    • Leave the Api location box empty.
    • Leave the Output location box empty.
    • The configuration file is generated by GitHub and stored in the .github/workflows folder, named using the following format: <WebApp_Name>-<RANDOM_NAME>.yml.

clip_image019

  1. Select “Review + Create” to validate your selections
  2. Select “Create” to begin the deployment
  3. Once ready you can click on “Go to Resource”

Prepare your content

Go ahead and create and edit your content locally based on your GitHub Repo clone, the minimum requirement is that the webapp must include a index.html in the root folder

If you are looking for a basic example of static HTML page you could use something like Responsive webpage by Sen Yang on Codepen.io

Commit

Once you’re ready to test your content, go ahead and commit / push content to the Repo

clip_image021

clip_image023

When the commit has been accepted it will trigger the workflow action which will then upload the contents of the repo to the Azure Static Web App. You can monitor the progress from the GitHub “Actions” tab of your repository

clip_image025

It will display the verbose output of the action within the job and once its finished it will show a big green tick

clip_image027

Check your Content

Browse to the URL of the web app to check the published connect

Added Bonus

You can add a custom domain to your Static Web App it’s super simple to do there is two steps you need to do

  1. If you are using CAA Records in your domain you need to add Digicert.com as an approved Certificate Authority
  2. Add a CNAME DNS record with your website hosting provider and point it to the random URL on the Static Web App Overview page

From Azure Portal

  1. Browse to the Static Web App
  2. Select “Custom Domains” from the left side blade
  3. Select “Add” and a right side blade will appear
  4. Enter the domain name you wish to have (for example subdomain.domain.com)

clip_image029

  1. Azure Portal will give you the details for the CNAME record you need to add once this is done you select “Add”

clip_image031

You should now see the new domain has been added to the domain list and is now ready for you to browse too

clip_image033

Default Avatar