CODEWITHSUNDEEP
githubpipelineazure-static-web-app
Exhaler
Exhaler

Reputation: 115

Azure static web apps

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?

Upvotes: 1

Views: 959

Answers (3)

sfanjoy
sfanjoy

Reputation: 680

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

Upvotes: 0

Dhanushka Rukshan
Dhanushka Rukshan

Reputation: 657

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

enter image description here

Upvotes: 2

svict4
svict4

Reputation: 530

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.

Upvotes: 0

Related Questions