CODEWITHSUNDEEP
azuregithubgithub-actionsazure-static-web-app
Sandeep Thomas
Sandeep Thomas

Reputation: 4759

Deploy a static HTML website from Github into Azure Static Web App

I have created a repository in GitHub for my static website. There a Folder called website and it contains all the static html files for the website. Then I setup a Static Web App in azure with GitHub as source

enter image description here

Immediately upon creating the static web app, one action also got created in my github repository like this

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

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@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_CLIFF_62B10 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/Website" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "wwwroot" # Built app content directory - optional
          ###### 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@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_CLIFF_62B10 }}
          action: "close"

Here in my repository the static website (HTML) files are under Website folder in Root. Since I am first to the deploy from GitHub into Static Web App in Azure, I was not sure about the output location. So I just entered wwwroot guessing this folder get created in my azure hosting location. But the execution fired an error

The app build failed to produce artifact folder: 'wwwroot'. Please ensure this property is configured correctly in your workflow file.

I didnt understand what I did wrong. Please help. In my assumption there was just some static files and it was suppposed to copy the html files into my azure hosting region of my static web app. Also I am not able to locate where that information i can fetch from azure portal.

enter image description here

Upvotes: 1

Views: 3033

Answers (2)

Felipe Augusto
Felipe Augusto

Reputation: 1563

I have all my files in src folder (my project only have HTML ans js files)

and here is my github actions file:

name: Deploy web app to Azure Static Web Apps

env:
  APP_LOCATION: "src" # location of your client code
  #API_LOCATION: "api" # location of your api source code - optional
  APP_ARTIFACT_LOCATION: "wwwroot" #"build" # location of client code build output

on:
  push:
    branches:
      - main
    paths:
      - 'src/**'
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

permissions:
  issues: write
  contents: read

jobs:
  build_and_deploy:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_DESERT_08C538C10 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: ${{ env.APP_LOCATION }}
          #api_location: ${{ env.API_LOCATION }}
          app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}

  close:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close
    steps:
      - name: Close
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_DESERT_08C538C10 }}
          action: "close"

You still need to add your Tocken in Github Secrets.

Here you will get the Tocken in your Static Web App resource in Azure Cloud

enter image description here

After get, you need to insert this is your secrets, like this:

enter image description here

Please, attenttion on Secret Name. Needs to be the some on your Github Actions file.

Upvotes: 0

Ecstasy
Ecstasy

Reputation: 1864

To resolve this The app build failed to produce artifact folder: 'wwwroot'. Please ensure this property is configured correctly in your workflow file. error, try following way:

As suggested by anthonychu and Jesuisme:

app_location: "/" 
api_location: "" 
app_artifact_location: "wwwroot"
output_location: "./"

could you please help me how can I locate the root folder in azure static web app

You can use Kudu console to locate the root folder. Alternatively, if you are using VS Code, then you can open the root of your .github repository.

References: Getting Started with Azure Static Web Apps, Azure App service not able to find root folder path and Use Kudu to Publish Static Website to Azure App Service

Upvotes: 2

Related Questions