Deploying Azure Static Web Apps When App and API Live Under src/

Azure Static Web Apps works well with the default folder layout, but the deploy action needs a little extra help when your repository does not use the usual app/ and api/ structure.

In my case:

• the frontend lives in src/web
• the API lives in src/api
• staticwebapp.config.json stays at the repository root

That means the GitHub Action and the Static Web Apps CLI both need explicit paths instead of relying on defaults.

Why the default deployment misses this layout

The Azure/static-web-apps-deploy@v1 action assumes conventional locations unless you override them. If your API is not in api/, the action will not pick it up automatically. The same applies to the frontend when it lives in src/web instead of the repository root.

The other easy detail to miss is the config file. If staticwebapp.config.json is at the root of the repository, point the action at that location explicitly.

GitHub Actions configuration

For this repo layout, the deploy step needs all of the important paths set:

- name: Build And Deploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
    action: 'upload'
    config_file_location: './'
    app_location: 'src/web'
    api_location: 'src/api'
    output_location: 'dist/'

The key settings are:

• config_file_location: './' so the root-level staticwebapp.config.json is included
• app_location: 'src/web' so the action builds the Angular app from the right folder
• api_location: 'src/api' so Azure Functions are discovered outside the default api/ directory
• output_location: 'dist/' so deployment uses the Angular build output

If you see references to "config file path" in other examples, note that the input name on Azure/static-web-apps-deploy@v1 is config_file_location.

Angular output path

On the Angular side, I found it simplest to keep the build output rooted at plain dist/.

In src/web/angular.json, the build output can be configured like this:

"outputPath": {
  "base": "dist",
  "browser": "",
  "server": ""
}

That keeps the built site under src/web/dist/, while still letting the deployment settings use output_location: 'dist/' because the path is resolved from app_location.

Matching swa-cli.config.json

The same folder layout should be reflected in swa-cli.config.json so local development and cloud deployment agree on where everything lives.

{
  "$schema": "https://raw.githubusercontent.com/Azure/static-web-apps-cli/main/schema/swa-cli.config.schema.json",
  "configurations": {
    "my-app": {
      "appLocation": "src/web",
      "apiLocation": "src/api",
      "outputLocation": "dist/",
      "appBuildCommand": "npm run build"
    }
  }
}

The important part is that:

• appLocation points at the Angular app source
• apiLocation points at the API project instead of the default api/
• outputLocation points at the built frontend output

With those three values aligned, the SWA CLI behaves the same way as the GitHub Action.

Final result

Once these paths are set consistently, Azure Static Web Apps can deploy a repo structure like this without any special restructuring:

.
|-- staticwebapp.config.json
`-- src
    |-- api
    `-- web
        `-- dist

The main fix is simply being explicit: point the action to the root config file, point the app to src/web, point the API to src/api, and keep the Angular output under dist/.