Azure function doesn't work when static web app is deployed (but works locally)

Question

Hi all,

Hoping to get some help here as I've run out of resources to look into. I have a standard Azure static web app (vanilla javascript), and have added Azure Function (http triggers) to my site.

When testing locally using the static web app CLI, my site works fine and am able to get a 200 response from the API endpoint.

However when deployed to Azure, my website is returning a 404 when trying to reach the API endpoint.

I've followed this tutorial to a t.
https://learn.microsoft.com/en-us/azure/static-web-apps/add-api?tabs=vanilla-javascript

When building the static web app in a Azure pipeline using AzureStaticWebApp@0 task..

• It looks like it is detecting the /api directory and installing nodejs as I have written in my config file.
• From what I have researched, I don't need to make any changes in Azure Portal as this isn't a 'bring your own Azure Function'
• From my understanding, I shouldn't need any CORS settings as that's the whole point of using Azure Functions as a proxy

Hoping someone has gone through this process and knows what I'm missing here..

Answer 1

Hi @Darren Uong

I am able to access the api endpoint from the Static Web App.

Output:

• Check whether your api folder is deployed to your repo correctly and src/api folders are under same root.

The issue seems to be with your api_location. Update the api_location to ./api and app_location to ./src.

My workflow file:

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@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_RED_RIVER_0088FB30F }}

          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)

          action: "upload"       

          app_location: "./src" 

          api_location: "./api" 

          output_location: "." 

  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_RED_RIVER_0088FB30F }}

          action: "close"

• Make sure you can see the APIs in your Static Web App.

I shouldn't need any CORS settings as that's the whole point of using Azure Functions as a proxy

Yes,CORS will be handled automatiacally when using Azure Functions with Static Web App.

using staticwebapp.config.json file for config info,routes.json will be ignored

I can see the above warning in your first screenshot.Refer this MSDoc for more details.

---

Hope this Helps.

Please remember to "Accept Answer" if the sol has helped, so that others in the community facing similar issues can easily find the solution.