David.dev

Github Action to Deploy a Swift static website on Azure Static Web Apps

• ##jamstack #azure #github
• 19 Oct 2021

Few days ago I wanted to try something different. I have some static website generated using Saga a static site generator written in Swift. I found it to be simple but, by far, the best static site generator built on Swift.

If you look through the documents you will see that you can easily create a static website by running just one command, “swift run” (or by building in xcode) and your site will be created under /deploy.

But what if you want to have a build and deploy action ? Presently, Swift is not supported by Vercel, Github pages, AWS Amplify etc. Swift is supported by Netlify but I found a way to run it on Azure Static Web Apps too!

First Step Build and Deploy your Swift Static Website

This is achievable with two github actions. The first will just checkout your repository (where you need to have all the saga files including Package.swift)

Here is the first workflow, please note that it has to be placed under .github/workflows of your main branch:

name: Saga Build

on:
  push:
    branches:
    - main
    
jobs:
  gh-pages:
    runs-on: ubuntu-latest
    container:
      image: 'swift:5.5'
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        
      - name: Build Saga
        run: swift run
        
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: '${{ secrets.BATMAN}}'
          publish_dir: ./deploy
          publish_branch: Azure
          destination_dir: deploy

the workflow is triggered every time you push in the main branch. It is initialised with the swift image and after checking out and it deploys using the actionts-gh-pages workflow. It was initially designed for github pages but it works very well with this configuration. Note that you need to use a personal_token and not the github_token if you wish to trigger the second action to deploy on Azure. If you wish to simply build without the second workflow for Azure Static Web Apps you can replace personal_token with: github_token: ${{ secrets.GITHUB_TOKEN }}. If you plan to use github pages you can modify accordingly (e.g. change branch in the config file) and you will be ready to go.

Second Step Deploy on Azure Static Web Apps

This action publish on the branch Azure your compiled static website under the directory /deploy.

As a next step you can now head to Azure Portal and create a new Static Web App with “Azure” as the branch for your new app.
After giving the relevant permissions you will find the workflow made by Azure in your repository. Here is an example of an action generated by azure:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - Azure
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - Azure

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_POLITE_SEA_0F7321F03 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/deploy" # App source code path
          api_location: "" # Api source code path - optional
          skip_app_build: true
          output_location: "deploy" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN____ }}
          action: "close"

The important parts to change are repository build configurations:

  app_location: "/deploy" # App source code path
  api_location: "" # Api source code path - optional
  skip_app_build: true
  output_location: "deploy" # Built app content directory - optional

our app_location is /deploy, we have no api location so we leave it empty and is preferred to add skip_app_build because we already built out website in step 1.

This is it! these 2 actions will run in sequence: swift build and deploy (to the azure branch first) and then from azure branch to the cloud!!

Alternative: super easy mode

If this sounds too complex just build locally (run on Xcode or swift run on your computer) push the files to git and configure Azure Static Web Apps with your /deploy folder as the project root. And that’s it :) you can do the same in Vercel, AWS Amplify etc. but in case you want to leave the build process in github you can try these two workflows.

11
👏