Is it possible to combine Azure Function staging slots and preview environments in Azure Static Web app?

Question

We are using "Bring your own functions" for our Azure Static Web app linking to Azure Functions app.

We use a staging slot for the functions so that we can deploy and swap for zero downtime.

We also use the Preview environment feature of Static Web apps so that we can see pre-productions pull request code before it's merged - but this uses the same (default) slot as the production environment.

We would like to be able to use the staging slot for preview environments so that we can preview both the pre-production Static Web app and pre-production functions.

I was hoping to see a "slot" parameter in the GitHub action to build and deploy the Static Web app but there doesn't seem to be one.

Does anyone know if this is possible and how best to achieve it? Thank you!

Answer 1

If I understand correctly, you are trying to change the URL of Azure Function App which your static web app communicates to. i.e. If Production, then use the URL for production azure function deployment and if preview environment then use the URL for azure function deployed in slot.

Github action may not have a built-in way for doing this for static web app deployment. But I believe you can achieve this by replacing the url in your code files dynamically based on the trigger or branch.

Lets say that you have a .js file which has the URL to be used for azure function app. Then you could have an action in your pipeline which will check the run is triggered for which branch/PR, and then change that URL to azure function slot URL and if it is triggered for a release branch, set the URL to production URL of azure function app.

Below is a simple GitHub Actions workflow that demonstrates this idea:

1. Your code has a placeholder for the Azure Function URL in a .js file.
2. Based on the branch or PR that triggered the workflow, the pipeline dynamically replaces this placeholder with the appropriate Azure Function (or slot) URL.
3. Deploy the updated Static Web App.

Suppose your .js file has a placeholder like this:

const apiUrl = "%%AZURE_FUNCTION_URL%%";

Below GitHub Actions workflow that replaces this placeholder:

name: Deploy Static Web App

on:
  push:
    branches:
      - main
      - develop
      - feature/*

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set Azure Function URL for Production
        if: github.ref == 'refs/heads/main'
        run: |
          find . -name '*.js' -exec sed -i "s|%%AZURE_FUNCTION_URL%%|https://prod-function.azurewebsites.net|g" {} \;

      - name: Set Azure Function URL for Staging
        if: github.ref == 'refs/heads/develop'
        run: |
          find . -name '*.js' -exec sed -i "s|%%AZURE_FUNCTION_URL%%|https://staging-function.azurewebsites.net|g" {} \;

      - name: Set Azure Function URL for Feature Branches
        if: startsWith(github.ref, 'refs/heads/feature/')
        run: |
          find . -name '*.js' -exec sed -i "s|%%AZURE_FUNCTION_URL%%|https://preview-function.azurewebsites.net|g" {} \;

      # Add more steps as necessary, e.g., build your app, run tests, etc.

      - name: Deploy to Azure Static Web App
        uses: azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          #### Additional necessary parameters for deployment...

In the example above:

• We have three branches for simplicity: main (production), develop (staging), and feature/* (feature branches).
• Depending on the branch, the pipeline dynamically replaces the placeholder %%AZURE_FUNCTION_URL%% in all .js files with the corresponding Azure Function URL using sed.
• The app is then deployed to Azure Static Web App.

This is a basic example to demonstrate the concept.