Static Web App with managed function - Not working with Javascript V4 model

Jay 10

I have created a static web app with managed function following the official docs. The function I created is of Javascript V4 programming model.

With this only Static web apps gets deployed but not APIs.

While doing trial and error, I recreated the whole function project (under folder 'api') using V3 model, then it starts working.

So my concern is, Static Web Apps with Managed Functions using Javascript V4 model is clearly not working.

Any suggestions/help?

ajkuma 26,721 Reputation points Microsoft Employee

2023-07-26T19:33:35.9666667+00:00

Apologies for the delayed response. While I'm checking on this, kindly let us know if you're seeing any specific error message.

I believe you are referring to this doc for the steps: API support in Azure Static Web Apps with Azure Functions. The following table contrasts the differences between using managed and existing functions.
ajkuma 26,721 Reputation points Microsoft Employee

2023-07-28T10:56:19.9233333+00:00

@Jay ,

Just checking in to see if you had got a chance to see the previous response. Please share the requested/more info to help you better.
Jay 10 Reputation points

2023-08-01T14:24:00.0266667+00:00

Yes I followed this document and I am using Node.js 18. and this static webapp hosted under Free plan.

I don't see any errors anywhere.. in GitHub Actions.

Actually I can't view any azure logs it says "it requires at least one function to enable App Insights".. But function is not created.
Jay 10 Reputation points

2023-08-01T14:28:12.7566667+00:00

I am using Node.js 18. and this static webapp hosted under Free plan.

I don't see any errors anywhere.. in GitHub Actions.

Actually I can't view any azure logs it says "it requires at least one function to enable App Insights".. But function is not created.
Jay 10 Reputation points

2023-08-01T14:31:02.4633333+00:00

And this how to guide https://learn.microsoft.com/en-us/azure/static-web-apps/add-api?tabs=vanilla-javascript describes V3 model only. I don't see any steps for V4 model.

But I created V4 model using "VS Code Azure Functions Extension" and V4 model works fine in local using "swa" command line tool
ajkuma 26,721 Reputation points Microsoft Employee

2023-08-01T19:42:46.2933333+00:00

@Jay ,

Thanks for the follow-up and sharing additional info. I have been expecting your response.

We wish to engage with you offline for a much closer look, please send an email with subject line “Attn:Ajay” to AzCommunity[at]Microsoft[dot]com with the following details, I will follow-up with you.

1.     Referencing this thread,

2.     Azure subscription ID,

3.     Azure resource name and the time of issue occurrence.

Also, for the document enhancements, I have relayed the feedback internally to our content team. Much appreciate your feedback.
ajkuma 26,721 Reputation points Microsoft Employee

2023-08-03T13:57:42.3866667+00:00

@Jay , Just checking in to see if you had got a chance to see the previous response.
ajkuma 26,721 Reputation points Microsoft Employee

2023-08-04T16:10:11.0866667+00:00

@Jay ,

Following-up on the above comment, we noticed your recent experience on the Q&A community platform was rated low (Answer provided was not helpful).

Thank you for taking time to share your feedback.

Kindly let us know what we could have done better to make your experience a positive one.

We are here to help you and strive to make your experience better and greatly value your feedback.

Your feedback is very important to us.

Looking forward to your reply. Thanks again for your time and feedback.
Benedict 5 Reputation points

2023-10-30T10:34:12.7766667+00:00

I am also experiencing this exact issue with a Node JS (18) Functions v4 API deployed with a SWA . It works locally with the CLI, but the API endpoint returns a 404 on Azure. I cannot view Application Insights because it says:

"App Insights is only applicable to Static Web Apps with at least one function. Add a function to your app to enable App Insights."

I have made sure that my workflow file has an api_location set correctly as in the latest answer.

@Jay @ajkuma did you resolve it?

Roger Sæle 1

I am also using js v4 functions and having the same issue. I deploy using Azure DevOps, here is my pipeline script:

pr:
  branches:
    include:
      - main
trigger:
  - None

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: var-group-cloud
  steps:
  - script: echo '$(Build.BuildNumber)'
  - checkout: self
    submodules: true
  - task: npmAuthenticate@0
    inputs:
      workingFile: 'app/.npmrc'
  - task: npmAuthenticate@0
    inputs:
      workingFile: 'api/.npmrc'
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(deployment-token-swa)
      app_location: 'app/dist'
      api_location: 'api/dist'
      config_file_location: 'app'
      skip_app_build: true
      skip_api_build: true
      verbose: true

The pipeline runs fine:

Verbose logging enabled
Try to validate location at: '/working_dir/app/dist'.
Build timeout not specified, defaulting to 15 minutes
App Directory Location: 'app/dist' was found.
Try to validate location at: '/working_dir/swa-db-connections'.
Try to validate location at: '/working_dir/app/staticwebapp.config.json'.
config_file_location: config file 'app/staticwebapp.config.json' was found.
Looking for event info
Event info parsed from action options.
Skipping step to build /working_dir/app/dist with Oryx
Didn't find Oryx manifest file under location: /3f1db353-56eb-46df-b463-bba386af76b4-swa-oryx/app-manifest/oryx-manifest.toml
Determined default file to be: index.html
Using 'staticwebapp.config.json' file for configuration information, 'routes.json' will be ignored.
Copying 'staticwebapp.config.json' to build output
Calculating the size of app artifacts: 1826946 B
Try to validate location at: '/working_dir/api/dist'.
Api Directory Location: 'api/dist' was found.
Skipping step to build /working_dir/api/dist with Oryx
Function Runtime Information. OS: linux, Functions Runtime: ~4, node version: 18
Zipping Api Artifacts
Api Zip will be created from directory: /working_dir/api/dist
Api Content Hash: ccdd531b41a643a01561b4a3df8f7594
Done Zipping Api Artifacts
Zipping App Artifacts
App Zip will be created from directory: /working_dir/app/dist
Done Zipping App Artifacts
Uploading build artifacts.
Finished Upload. Polling on deployment.
Status: InProgress. Time: 0.0484021(s)
Status: InProgress. Time: 15.1168382(s)
Status: Succeeded. Time: 30.1606424(s)
Deployment Complete :)

Seems to deploy successfully. I can access the app, so it has indeed been deployed, but API does not seem to be. Application Insights under Static Web App blade states:

App Insights is only applicable to Static Web Apps with at least one function. Add a function to your app to enable App Insights.

1 answer

ajkuma 26,721 Reputation points Microsoft Employee

2023-08-08T19:24:14.9233333+00:00

@Jay

Following-up on this from my previous comments, I can confirm that v4 Functions support is rolled out to all regions and this sounds more like an issue with deployment configuration. We need additional information on the configuration to better assist you.

Also, kindly ensure that you have added the api_location as outlined in the doc section here: Add API location to workflow
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Static Web App with managed function - Not working with Javascript V4 model

1 answer

Your answer