Managed API Function not recognized when building manually

Question

Because of the permission issue when using the API build in the AzureStaticWebApp@0 task, I am skipping the API build and build it in an earlier task.

Here is my task:

- task: AzureStaticWebApp@0
 inputs:
   app_location: "/dist"
   output_location: ""
   skip_app_build: true
   api_location: "/src/api/dist"
   skip_api_build: true
   verbose: true
   azure_static_web_apps_api_token: "$(DeploymentToken)"

The build for the app works fine, but my api (Managed Function, node:18) is not recognized in the portal. It's not showing up. The build task for my Function looks like this:

  - task: Npm@1
    displayName: "Build command Api (function): npm --prefix api build --production"
    inputs:
      command: custom
      verbose: false
      customCommand: "run --prefix src/api build --production"

My dist folder, in the pipeline looks like this:

2025-01-13T15:46:12.7797380Z ├── src
2025-01-13T15:46:12.7797647Z │   ├── api
2025-01-13T15:46:12.7797785Z │   │   ├── dist
2025-01-13T15:46:12.7797937Z │   │   │   ├── functions
2025-01-13T15:46:12.7798106Z │   │   │   │   └── HealthCheck.js
2025-01-13T15:46:12.7798260Z │   │   │   ├── host.json
2025-01-13T15:46:12.7798407Z │   │   │   ├── index.js
2025-01-13T15:46:12.7798558Z │   │   │   └── package.json

Am I missing any files in the output folder? I think the package.json shouldn't be there but I added it, since it has some information about the 'main' method.

I added the following code to my staticwebappconfig.json, to set the language:

  "platform": {
    "apiRuntime": "node:18"
  }

That part is picked up correctly by the pipeline. Locally the function works fine.

Update:

Output of the deployment task

Verbose logging enabled
Try to validate location at: '/working_dir/dist'.
Build timeout not specified, defaulting to 15 minutes
App Directory Location: '/dist' was found.
Try to validate location at: '/working_dir/swa-db-connections'.
Looking for event info
Event info parsed from action options.
Skipping step to build /working_dir/dist with Oryx
Found staticwebapp.config.json file: 'dist/staticwebapp.config.json'
Didn't find Oryx manifest file under location: /82f6534c-e4ab-4df9-a48f-7dafd19fb4c4-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.
Calculating the size of app artifacts: 15791055 B
Try to validate location at: '/working_dir/src/api/dist'.
Api Directory Location: '/src/api/dist' was found.
Skipping step to build /working_dir/src/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/src/api/dist
Api Content Hash: dd6cb5ae81d9fc366a150da4716132d0
Done Zipping Api Artifacts
Zipping App Artifacts
App Zip will be created from directory: /working_dir/dist
Done Zipping App Artifacts
Uploading build artifacts.
Finished Upload. Polling on deployment.
Status: InProgress. Time: 0.0876904(s)
Status: InProgress. Time: 15.1317785(s)
Status: InProgress. Time: 30.1822736(s)
Status: Succeeded. Time: 45.228502(s)
Deployment Complete :)
Visit your site at: https://<our swa url>
Thanks for using Azure Static Web Apps!
Exiting

Finishing: AzureStaticWebApp

Answer 1

Hello @plugt

It seems like you are skipping the API build in the Azure Static Web App task and building it manually in an earlier task. However, it looks like the API function is not recognized in the portal after the build. Based on the information you provided; it seems like you have the necessary files in the output folder. However, it's possible that the issue is related to the package.json file.

You mentioned that you added it to the output folder, but it's not clear if it's in the correct location. The package.json file should be in the root directory of your API function, which is src/api in your case.

It should not be in the dist folder.

Additionally, you mentioned that you added the following code to your staticwebappconfig.json file to set the language: platform: { apiRuntime: node:18 }

This is correct, and it should ensure that the correct runtime is used for your API function. If you have confirmed that the package.json file is in the correct location and the apiRuntime is set correctly, then it's possible that there is an issue with the build process for your API function.

You may want to check the logs for the build task to see if there are any errors or warnings that could be causing the issue. I hope this helps.

Answer 2

Hi @plugt ,

Thank you for your response and for clarifying the situation. I appreciate your patience as we work through this.

• I reviewed the output of your dist folder, and it looks like the structure is generally correct. However, Azure Functions typically expect the function files to be directly accessible. If your functions are nested within a folder (like functions), it might cause recognition issues. Ideally, the function files should be at the root of the dist folder, alongside host.json and package.json. You might want to try moving the function files up one level to see if that resolves the issue.
• Regarding the cleanup script, you can use a simple shell script to remove any unwanted files or directories after the build process. Here’s an example of a script you can add to your pipeline:

-script: |

echo "Cleaning up project folder..."

rm -rf src/api/dist/*

displayName: 'Clean up project folder'

This script will remove all files in the src/api/dist directory. Adjust the path as necessary based on your project structure.

If you have any more questions or need further assistance, feel free to ask!