Azure static web apps

Question

Azure static web apps(preview) currently only works with a github account, and as a company policy we have to use Azure for repos and everything else (pipelines, releases, etc..) We are going to use the static web app just for viewing a simple angular website however all the source code must remain in the azure devops repo.

Is is possible to create a private github account and upload to it only the compiled angular files to make use of the static web app? for example we already have a pipeline to compile and deploy the angular website to an Azure web app service, can this pipeline be modified to publish the same files to the github account? and if so how?

Does this answer your question? [What is the difference between Azure Static Web App and Azure blob storage static website?](https://stackoverflow.com/questions/63269878/what-is-the-difference-between-azure-static-web-app-and-azure-blob-storage-stati) — Sajeetharan, May 17 '21 at 08:27

score 2 · Answer 1 · answered Sep 30 '21 at 09:27

You can do it in Azure Devops. Try put this YML in Azure DevOps Pipeline

    trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

name: 'yourApplicationName'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '12.x'
  displayName: 'Install Node.js'
    
- script: |
    npm install -g @angular/cli
    npm install
  displayName: 'npm install'
  workingDirectory: '$(Build.SourcesDirectory)/yourApplicationName'  
  
- task: AzureStaticWebApp@0
  inputs:
      app_location: "/yourApplicationName" 
      api_location: "api"
      app_build_command: $(build_command)
      output_location: "dist/yourApplicationName"
  env:
      azure_static_web_apps_api_token: $(deployment_token)

You can put build_command and deployment_token in the variables

score 0 · Answer 2 · answered Feb 23 '21 at 04:35

0

Azure SWA is only available for code in Github at the moment.

However, you can get something pretty close with Azure App Service. Microsoft even has a couple blog posts about how to configure Azure App Service, Azure Repos and Azure Pipelines together.

answered Feb 23 '21 at 04:35

svict4

432
8
24

True, i'm trying to see if I can do a 'hack' and upload the compiled files directly to github – Exhaler Feb 23 '21 at 09:28

score 0 · Answer 3 · answered Sep 21 '22 at 15:09

You can deploy a React Static Web Apps from Azure using Pipelines as follows:

name: Azure Static Web Apps CI/CD
#
# Trigger off of changes in master or another branch(s)
#
trigger:
  branches:
    include:
      - TestBranch

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Test Web App
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'],'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: <Name of your Static Web App Resource Group>
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_TOKEN_#####)
      # Details at https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "build" # Built app content directory - optional
      app_build_command: 'chmod 755 scripts/*.sh;./scripts/WebAppBuild.sh prod'

You will first need to set up a connection in Azure->Settings->Pipelines->Service Connections. Use the Pipeline wizard to set up all the initial YML.

The key for me was to run my own build in WebAppBuild.sh which basically runs "npm run build". My repo has a scripts folder. The job/task performed the rest of the install

Azure static web apps

3 Answers3