Search code examples
angularazuregithub-actionscicdazure-static-web-app

Azure static web app: staticwebapp.config.json not found using Github actions

Adding a staticwebapp.config.json always results in not found error of the config file. I added a staticwebapp.config.json into the assets folder of my angular project, but the build alsways failes with a error saying that the staticwebapp.config.json could not be found.

My Actionfile looks like this:

 steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secret }}
          repo_token: ${{ secret  }} # 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_build_command: "npm run build-prod"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist/myApp" # Built app content directory - optional
          config_file_location: "/asstets"
          ###### End of Repository/Build Configurations ######

And the assets folder is added in the angular.json:

            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Already tried other config_file_location like "./dist/myApp", "./dist/myApp/assets", "/asstets", "./assets", but still the same error.

Building the angular app locally results into these artifacts within the dist/myApp: local build artifacts

staticwebapp.config.json:

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  }
}

The error message:

App Directory Location: '/' was found.
config_file_location: config file '/assets/staticwebapp.config.json' could not be found.

Expected behavior: Successful build with config_file_location: "/assets"

Solution

  • I have created an Angular App and added the staticwebapp.config.json file.

    As mentioned in the MSDoc, the config file has to be in the Application root directory.

    The recommended location for the staticwebapp.config.json is in the folder set as the app_location in the workflow file.

    • As my app_location is / - root directory, created the config file in the root directory itself.

    • Added the same configuration in staticwebapp.config.json which you have provided.

    My YAML file:

       app_location: "/" 
   api_location: "" 
   output_location: "dist/angular_app"

    If the config file is in root folder, then

       config_file_location: .

    If the file is in src\assets folder, then

    config_file_location: "src\assets"

    Iam able to build and deploy successfully with both the configurations.

    enter image description here

    • If you want to place the configuration in assets folder itself, make sure you are providing the path for config_file_location correctly.

    • Your config file is in the assets folder, but you have set the location as /asstets.

    I have also tried by placing the config file in `src\assets' folder.

    Then the config_file_location has to be set to src/assets.

    Output:

    enter image description here