Azure Static Webapps

by | Oct 25, 2021 | Development, Github

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:


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/"
  "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 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.



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


            – development
        types: [opened, synchronize, reopened, closed]
            – development


        if: github.event_name == ‘push’ || (github.event_name == ‘pull_request’ && github.event.action != ‘closed’)
        runs-on: ubuntu-latest
        name: Build and Deploy Job
            uses: actions/checkout@v2
                    submodules: true
            name: Build And Deploy
                id: builddeploy
                uses: Azure/static-web-apps-deploy@v0.0.1-preview
                    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:
                    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 ######

    if: github.event_name == ‘pull_request’ && github.event.action == ‘closed’
    runs-on: ubuntu-latest
    name: Close Pull Request Job
        name: Close Pull Request
            id: closepullrequest
            uses: Azure/static-web-apps-deploy@v0.0.1-preview
                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.



    Let's drink coffee!

    Do you need help modernizing your IT or move to the cloud? Are you looking to digitalise your workflows, connect existing systems or want to build an app? Or are you in need to visualise your data in Microsoft Power BI?

    Let’s connect and discuss how we can help you!

    Eighty Data logo office wall

    eighty data blog

    Terug naar kantoor

    Terug naar kantoor

    Nu het thuiswerk advies langzaam komt te vervallen trekken steeds meer mensen weer naar kantoor. Gaan we weer terug naar het oude "9 tot 5" of omarmen we het hybride werken? Met een modern ingerichte IT omgeving op basis van Microsoft 365 heb je de flexibiliteit om op...

    Windows Server herstart loop

    Windows Server herstart loop

    Na het installeren van de recent uitgebrachte januari 2022 beveiliging updates voor Windows Server 2012R2 raakte de server in een herstart loop. Het probleem houdt verband met een Active Directory component en komt daardoor voor op domain controllers. Hoewel het in ons geval om een Windows Server 2012R2 versie gaat, blijkt uit diverse andere blogs dat het probleem ook op andere Windows Server versies voor kan komen. Wees dus voorzichtig met het installeren van deze updates. Heb je de updates al geïnstalleerd en is je server in een reboot-loop terecht gekomen? Lees dan onze stappen om de server weer operationeel te maken.

    New office and branding!

    New office and branding!

    New office! This month we moved in to a brand new office located on Zomerdijk 2a in Maassluis. Having our own office is a major milestone which comes with many benefits. It allows us to work together even more closely on our projects, receive customers and hosts a...

    Build ASP.NET Core webapp with Docker

    Build ASP.NET Core webapp with Docker

    It’s a time ago I wrote something on my blog, so it is time again. In this post I want to explain how I build Microsoft NET core applications in an docker container and run them also as an docker. Since some time also Microsoft SQL server is available in an Linux...

    Azure Cli Alternative with Powershell on macOS

    Azure Cli Alternative with Powershell on macOS

    Last year I didn’t post much on my blog. So here again a post that is the first for this year. Let’s see if I can find the time to do more this year. Recently I am kept busy with Microsoft Azure and often switch between Mac OS and Windows. PowerShell is working great...