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:

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

     

     

    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

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