Azure Static Webapps

Azure Static Webapps

We are using Azure Static Webapps to host several apps & tooling developed for our customers. However how do you setup the hosting / deployment. In the upcoming series of blogs we will share some tips and tricks to setup that multi environment deployment.

Multi environments

First blog post of this series, we’re taking a look at the configuration required to deploy our apps to multiple environments with their own configurations:

Angular

Within our angular app, we first start editing our angular.json file to add a new configuration to the configurations block:

"development": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.dev.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "namedChunks": false,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "6kb",
      "maximumError": "10kb"
    }
  ]
}

This will effectively let us run with a development config from environment.dev.ts settings file if we launch our application with the –configuration=development flag.

Additionally set the outputPath (projects:{name}:architect:build:options node to dist:

  "outputPath": "dist",

Next step is editing our package.json. Within this file we can find our “build” command:

"build": "ng build",

Below this command, we will add another 2 configurations:

"build_production": "ng build --configuration production",
"build_development": "ng build --configuration=development",

Now instead of adding the flag –configuration=development, we can simply build our development environment by calling the build_development statement.

Github

Now the last step is how you configure your build pipeline to use the new defined environments. This can be done by adding the app_build_command setting within your deployment yaml file.

The full configuration file as how we have configured our deployments:

name: Dev - Development

 

on:
    push:
        branches:
            – development
    pull_request:
        types: [opened, synchronize, reopened, closed]
        branches:
            – development

   

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@v0.0.1-preview
                with:
                    azure_static_web_apps_api_token: ${{ secrets.secret }}
                    repo_token: ${{ secrets.token }} # Used for Github integrations (i.e. PR comments)
                    action: “upload”
                    ###### Repository/Build Configurations – These values can be configured to match you app requirements. ######
                    # For more information regarding Static Web App workflow configurations, please visit:     https://aka.ms/swaworkflowconfig
                    app_location: “/” # App source code path
                    app_artifact_location: “dist” # Built app content directory – optional
                    app_build_command: “npm run build_development”
                    ###### 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@v0.0.1-preview
            with:
                azure_static_web_apps_api_token: ${{ secrets.secret }}
                action: “close”

Please note that in this setup we are not deploying an Azure Function from the same project.

In our public Github, you can find an example project that reflects a multi environment setup. Additionally a yml can be found that as well deploys an API to an Azure function with custom options.

https://github.com/EightyData/scripts/tree/main/blogs/static-webapp-multienvironment