I’m trying to publish a full stack react app with an Azure Static App and running a backend api with Azure Functions.

However, no matter how I configure the build profile files, my app cannot recognize any of my Azure functions when the web app is deployed, i.e., <azure_swa_url>/api/products always returns 404 even though I can simulate running the swa with the function locally just fine:

swa start http://localhost:5173 --run "npm run dev" --api-location ../api

Here is my yaml deployment file:

name: Azure Static Web Apps CI/CD

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

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@v3
        with:
          submodules: true
          lfs: false
      - 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_ASHY_PEBBLE_00588EE0F }}
          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: "./client" # App source code path
          api_location: "./api" # Api source code path - optional
          output_location: "dist" # 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_ASHY_PEBBLE_00588EE0F }}
          action: "close"

Here is the folder structure:

.github/
└── workflows/
    └── azure_static_web_app_deployment_file.yml

api/
└── src/
    └── functions/
        └── server.ts

client/

azure-pipelines.yml

Here’s an example endpoint in my server.ts

app.http('getProducts', {
    methods: ['GET'],
    authLevel: 'anonymous',
    route: 'products',
    handler: async (request: HttpRequest, context: InvocationContext): Promise<any> => {
        try {
            const products = await fetchProducts();
            return {
                status: 200,
                body: JSON.stringify(products),
            };
        } catch (error) {
            context.log('Error fetching products:', error);
            return {
                status: 500,
                body: { error: 'Error fetching products' },
            };
        }
    },
});

Here is my repo:

https://github.com/Holmberg18/spice-delight-app

Thanks!

I configured my Azure build pipeline to configure the artifact to have the api_location set to api and the app_location set to client with the build directory set to dist since I’m using React vite. I created an Azure Function via CLI with the Azure static web app and Azure Function extensions installed for VS Code. Deployed to Azure static web app using GitHub actions. I was expecting to run my Azure function with <azure_swa_url>/api/products and retrieve my data from my Azure web api but I get a 404.