Managed API Function not recognized when building manually

plugt 0

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

Pinaki Ghatak 5,580 Reputation points Microsoft Employee

2025-01-15T09:33:34.73+00:00

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.

plugt 0

Hi @Pinaki Ghatak ,

Thanks for your response!

The package.json is in src/api, that's why I can also build and run the function locally. What I do in the pipeline is that I copy (not move) the package.json to the dist folder. I have a few questions:

Do you know which files should should be actually deployed to the Function? I know have:
1. index.js
2. host.json
3. package.json (which is probably not needed)
4. functions (folder)
  1. my function (Healthcheck.js)
What is the purpose of this line in the package.json, is that only for running the function locally, or does it also play a role when deploying to Azure?
```
     "main": "dist/{index.js,functions/*.js}"
```

In the pipeline I do not see any errors. Everything seems to be successful, see output of pipeline below:

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

Shireesha Eeraboina 1,150 Reputation points Microsoft Vendor

2025-01-17T05:26:51.9466667+00:00
Hi @plugt ,

Thanks for posting your question in Microsoft Q&A, apologize for any inconvenience caused on this.

To resolve the issue where your Node.js Azure Function (Managed Function) is not being recognized in the portal despite a successful build of the app, you need to focus on several areas.

Firstly, ensure that all necessary permissions are granted for the AzureStaticWebApp@0 task in your pipeline. Permission issues can occur due to missing access policies or incorrect configurations. To prevent deployment issues, verify that the build output is correctly placed in the expected directory and that all required files are included in the deployment package.

These files should include the index.js (or entry point), host.json (for configuration), the functions themselves (e.g., HealthCheck.js), and the package.json file, which, while not strictly required for local execution, is critical during deployment. The package.json is essential as it lists the dependencies and runtime environment necessary for Azure Functions to install dependencies correctly.

In your case, if you are copying the package.json to the dist folder during the build process, ensure that the folder structure inside dist matches Azure’s expectations. The folder should contain the index.js, host.json, function files, and package.json. Additionally, make sure the staticwebapp.config.json is properly configured to specify the Node.js version (e.g., "apiRuntime": "node:18").

If you're using a self-hosted agent, permission issues might also stem from file ownership conflicts, especially if Docker containers are involved. Adding a task to clean up Docker containers and delete files left in the project folder after the AzureStaticWebApp@0 task can help resolve such conflicts.

Finally, review your build logs carefully for any errors or warnings that could offer further insights into the issue, and ensure that you are using the latest versions of the tasks in your pipeline. If the issue persists, checking related GitHub issues or Azure documentation for troubleshooting steps can help. This comprehensive approach should help ensure your Azure Function is deployed and recognized properly within the portal.

I hope the information provided above helps you understand better. Please let us know if you have any further questions or need additional assistance.
plugt 0 Reputation points

2025-01-17T14:49:27.15+00:00
Hi @Shireesha Eeraboina , thanks for your response.

The permissions are all fine. No errors are thrown during the deployment. I added the output to my reply on @Pinaki Ghatak

The output of the dist folder which is generated before deployment is in my question. Does that look good to you? Or should all functions not be in a folder, but in the root?

I like your suggestion about deleting the files in the project folder. Do you have an example of such a script? I found a script in the article I am referring to, but that doesn't work for me.
Shireesha Eeraboina 1,150 Reputation points Microsoft Vendor

2025-01-20T11:08:20.7366667+00:00
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!
Shireesha Eeraboina 1,150 Reputation points Microsoft Vendor

2025-01-21T11:47:33.28+00:00

Hi @plugt ,

Following up to see if the above answer was helpful. If this answers your query, do click Accept Answer and Yes for was this answer helpful. And, if you have any further query do let us know.
Shireesha Eeraboina 1,150 Reputation points Microsoft Vendor

2025-01-22T07:46:41.2733333+00:00

Hi @plugt ,

If you found the response helpful, please click Accept Answer and Yes for the provided answer. This will help other community members with similar issues find the solution more easily.
plugt 0 Reputation points

2025-01-28T09:59:13.5033333+00:00

Hi @Shireesha Eeraboina , thank you for your answers. I am still working on the final solution. So I enabled the 'automatic' API build by the SWA task (via Oryx).

The batch script doesn't work because of restrictions on our self hosted agent, I have to figure out what that exactly is about. It's a time consuming process, since everytime I deploy, next run will fail because of the permission issue and the situation has to be recovered by another department.
plugt 0 Reputation points

2025-01-29T12:48:06.1833333+00:00

I can confirm this solution works: https://github.com/microsoft/azure-pipelines-tasks/issues/16156#issuecomment-1993787730
plugt 0 Reputation points

2025-01-29T12:59:11.5866667+00:00

I decided to answer my question like this since none of the answers above contains the full story / solution.

It looks like nobody knows how to build AND deploy the Function app manually, even though it is a supported option by the pipeline task. So I still didn't find an answer on that question.

The only solution for self-hosted agents seems to be that you use the SWA task to build your api and after that clean up your working folder using a bash script. Thanks to @Shireesha Eeraboina for giving that suggestion and also for 'KoenduBuf' who proposed that solution already in the article I was referring to in my question: https://github.com/microsoft/azure-pipelines-tasks/issues/16156#issuecomment-1993787730.

So I used exactly that script and it worked 'out-of-the-box'. It however is needed that the user that is used in the pipeline has sudo access.

1 answer

Shireesha Eeraboina 1,150 Reputation points Microsoft Vendor

2025-01-30T09:29:48.9733333+00:00

Hi @plugt ,

Thank you for your patience and for sharing your feedback on the Q&A community platform. I’m glad to hear that you were able to resolve your issue, and I appreciate you sharing your solution! Your contribution is valuable and can help others in the community facing similar challenges.

As per the Microsoft Q&A community policy, "The question author cannot accept their own answer. They can only accept answers by others"

I’m reposting your solution here so you can mark it as accepted if it resolves your query:

"The only solution for self-hosted agents appears to be using the SWA task to build your API, followed by cleaning up your working folder with a bash script. Additionally, I want to acknowledge 'KoenduBuf' for suggesting this solution in the article I referenced in my question: https://github.com/microsoft/azure-pipelines-tasks/issues/16156#issuecomment-1993787730"

Additionally, I will check with the internal team regarding the trigger documentation to ensure clarity on this process.

If you have any other questions, please let me know. Thank you again for your time and patience throughout this issue. Please don’t forget to Accept Answer and Yes for "was this answer helpful" wherever the information provided helps you, this can be beneficial to other community members.
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

Managed API Function not recognized when building manually

1 answer

Your answer