Cannot deploy React Azure Static Web App with Azure Function API

Question

Cannot deploy React Azure Static Web App with Azure Function API

Jon Holmberg 5

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.,

VenkateshDodda-MSFT 25,251 Reputation points Microsoft Employee Moderator

2024-09-24T07:15:06.2266667+00:00
@Jon Holmberg Thank you for posting your question in Microsoft Q&A, apologize for any inconvenience caused on this.

Could you please share more details on this issue.

Are using Azure Devops or Github actions as source control?

What is the error message you are seeing your deployment logs?

I hope you are following the documentation steps mentioned here and also could you please help in sharing your "azure-static-web-apps-<DEFAULT_HOSTNAME>.yml" also GitHub sample to check and assist your further.
VenkateshDodda-MSFT 25,251 Reputation points Microsoft Employee Moderator

2024-09-25T04:32:12.6066667+00:00

@Jon Holmberg Following up to see if you have any chance to check my previous response and help us with the requested information to understand and assist you better on this.

Jon Holmberg 5

@VenkateshDodda-MSFT Thank you for your response.

I am using Github actions for source control.
I am not seeing any errors in the deployment logs.
Here is a copy of my yml 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"

My repo can be found here:

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

Let me know if there is anything I should include that would be helpful.

VenkateshDodda-MSFT 25,251 Reputation points Microsoft Employee Moderator

2024-09-26T04:52:38.5266667+00:00
@Jon Holmberg Thanks for sharing more details.

Can you make the below property changes to above shared .yml and retry the deployment.

app_location: "client" # App source code path api_location: "app" # Api source code path - optional output_location: "dist" # Built app content directory - optional

Let me know if you are still facing the issues.
Jon Holmberg 5 Reputation points

2024-09-26T07:30:00.0266667+00:00

@VenkateshDodda-MSFT Shouldn't api_location: "app" # Api source code path - optional

be api_location: "api" # Api source code path - optional

instead?
VenkateshDodda-MSFT 25,251 Reputation points Microsoft Employee Moderator

2024-09-26T07:53:51.46+00:00

@Jon Holmberg When I used these values app_location: "client" ,api_location: "app" ,output_location: "dist"

I am able to deploy the code and request the static webapp without any issues.
VenkateshDodda-MSFT 25,251 Reputation points Microsoft Employee Moderator

2024-09-27T06:31:36.9633333+00:00

@Jon Holmberg Following up to see if you have any chance to check my previous response and help us with the requested information to understand and assist you better on this.
Jon Holmberg 5 Reputation points

2024-09-27T07:43:23.8366667+00:00
@VenkateshDodda-MSFT

After the changes, I'm not getting a 400 error anymore but getting a 500 error "Backend call failure"

I'm still not seeing a managed Azure function being deployed as I'm still not able to enable Application insights for my SWA:

Here's a copy of my staticwebapp.config.json

{ "globalHeaders": { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST" }, "routes": [ { "route": "api/*", "allowedRoles": [ "anonymous" ] } ], "platform": { "apiRuntime": "node:18" }, "navigationFallback": { "rewrite": "/index.html" } }
Jon Holmberg 5 Reputation points

2024-09-27T07:46:48.5066667+00:00
@VenkateshDodda-MSFT

After the changes, I'm not getting a 401 error anymore but getting a 500 error: Backend call failure.

I can't enable Application insights in my SWA since it doesn't detect a managed Azure function.

Here's a copy of my staticwebapp.config.json

{ "globalHeaders": { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST" }, "routes": [ { "route": "api/*", "allowedRoles": [ "anonymous" ] } ], "platform": { "apiRuntime": "node:18" }, "navigationFallback": { "rewrite": "/index.html" } }
VenkateshDodda-MSFT 25,251 Reputation points Microsoft Employee Moderator

2024-10-01T05:07:32.1833333+00:00

@Jon Holmberg Thanks for your response and apologize for the delay in my response.

This needs one-on-one support and might need to engage the engineering for deeper troubleshooting, I would suggest you to raise a support ticket.

In case If you are facing any issues raising the support ticket. I have reached out to over private message please do help me with requested information to assist you further.
Justin Smith 20 Reputation points

2025-04-01T12:14:57.07+00:00

I have the same issue, was there any resolution?

Should it be api_location: "api", that's what the documentation says