404 static web app azure function TS

Question

404 static web app azure function TS

Christopher Moskovitz 0

I am using Azure static web app and managed azure function. This is an angular app. swa build and build and deploy works fine. Everything shows success and I can but the endpoints locally. However when I deploy with the cli or with git hub actions and I hit the endpoints via UI on /app/myFunction I get 404 not found. Just azure functions are not being hit.

Christopher Moskovitz 0 Reputation points

2023-05-23T19:37:41.4933333+00:00

In using latest everything swa and have tried with node 16 and 18.
Amy Kline 75 Reputation points

2023-05-23T19:46:26.71+00:00
Hello,

To resolve the 404 error you're encountering when accessing Azure Functions in your Angular app deployed as an Azure Static Web App, follow these steps:

Verify Function App deployment and configuration.

Check the routing configuration in your Angular app.

Ensure the base URL for Azure Functions is correct.

Validate Azure Static Web App configuration.

Check deployment logs for errors or warnings.

Verify access restrictions or authentication settings.

Test Azure Functions locally to isolate the issue.

Review Azure Function logs for errors.

By following these steps, you can troubleshoot and resolve the issue causing the 404 error.

I hope it is helpful for you.
Christopher Moskovitz 0 Reputation points

2023-05-23T20:35:24.52+00:00

I ran deploy with log silly no warnings or errors. I deployed this as part of the azure static we app so it's a managed azure function. I did not deploy this function separately, I shouldn't have to set the base url. How can I see the managed functions in the portal? There are no issues when I run locally the static web app and managed functions under API directory in my frontend repo.

3 answers

Your answer

Christopher Moskovitz 0 Reputation points

2023-05-23T19:37:41.4933333+00:00

In using latest everything swa and have tried with node 16 and 18.
Amy Kline 75 Reputation points

2023-05-23T19:46:26.71+00:00

Hello,

To resolve the 404 error you're encountering when accessing Azure Functions in your Angular app deployed as an Azure Static Web App, follow these steps:

Verify Function App deployment and configuration.

Check the routing configuration in your Angular app.

Ensure the base URL for Azure Functions is correct.

Validate Azure Static Web App configuration.

Check deployment logs for errors or warnings.

Verify access restrictions or authentication settings.

Test Azure Functions locally to isolate the issue.

Review Azure Function logs for errors.

By following these steps, you can troubleshoot and resolve the issue causing the 404 error.

I hope it is helpful for you.
Christopher Moskovitz 0 Reputation points

2023-05-23T20:35:24.52+00:00

I ran deploy with log silly no warnings or errors. I deployed this as part of the azure static we app so it's a managed azure function. I did not deploy this function separately, I shouldn't have to set the base url. How can I see the managed functions in the portal? There are no issues when I run locally the static web app and managed functions under API directory in my frontend repo.

Answer 1

Artem Smirnov 30

I've just spent several hours trying to fix it. Turned out I had a wrong import at the top of one of my api files. When Azure runs all files to register the handlers, any error before the app.http call stops the process and none of the other handlers are registered.

Jeremy Paquette 0 Reputation points

2024-02-24T08:38:10.94+00:00

I've never commented on this site before, but I did for the first time just to say thank you for actually coming back and leaving a comment with the solution. I was able to fix my own identical issue after 2 hours of troubleshooting, thanks to you.

Answer 2

To resolve the 404 error you're encountering when accessing Azure Functions in your Angular app deployed as an Azure Static Web App, follow these steps:

Verify Function App deployment and configuration.
Check the routing configuration in your Angular app.
Ensure the base URL for Azure Functions is correct.
Validate Azure Static Web App configuration.
Check deployment logs for errors or warnings.
Verify access restrictions or authentication settings.
Test Azure Functions locally to isolate the issue.
Review Azure Function logs for errors.

By following these steps, you can troubleshoot and resolve the issue causing the 404 error.

Answer 3

Ryan Hill 30,281 Microsoft Employee Moderator

@Christopher Moskovitz

Managed API defaults to /api/functionname. The platform will automatically forward requests to that endpoint. If you're getting 404s, the only thing I can think of is your you never updated the output dir for your deployment.

Using swa cli, this is the --api-location argument. In yaml, it's the api_location argument. Try http repl to https://<swa-host-name>.staticwebapps.net/api/functionname to call the endpoint directly to confirm.

Christopher Moskovitz 0 Reputation points

2023-05-24T20:34:57.75+00:00

remove
Christopher Moskovitz 0 Reputation points

2023-05-25T07:11:06.3233333+00:00

@Ryan Hill When I run sws start i get no errors. api location is set correctly everywhere and I see no errors. I ran httprepl ls and got an empty list. I believe the resource is not being deployed. I dont see any azure function resources in the portal. Should I see this when it's a managed azure function? I might have deleted it if it was created when I was trying out stand alone azure functions.
Ryan Hill 30,281 Reputation points Microsoft Employee Moderator

2023-05-27T04:35:30.45+00:00

When you use F12, what request do you see being made when your front-end calls the api?

Christopher Moskovitz 0

@Ryan Hill

https://my-url.azurestaticapps.net/api/listCustomers

api_location is correctly set. when I first deployed should have the azure functions showed up as a resource in the portal even if they were managed? I was doing some clean up and might have deleted them if they were. Since everything is working fine locally and I see no errors or warnings when I deploy or when I run locally I assume something is wrong on deployment side.

This is the logs and the httprepl.

swa deploy --verbose=silly --deployment-token <my-id> --env production --api-language "node" --api-version "16" --api-location api

Welcome to Azure Static Web Apps CLI (1.1.2)

Getting config file options from swa-cli.config.json...
Changed directory to /Users/me/Work/staminair
Using configuration "staminair" from file:
  /Users/me/Work/staminair/swa-cli.config.json

Deploying front-end files from folder:
  /Users/me/Work/staminair/dist/staminair-web

Deploying API from folder:
  /Users/me/Work/staminair/api

Deployment token provided via flag
 - --deployment-token: <hidden>

Deploying to environment: production

Trying to read workflow config with values:
 - appLocation: /Users/me/Work/staminair
 - outputLocation: /Users/me/Work/staminair/dist/staminair-web
 - apiLocation: /Users/me/Work/staminair/api
 - dataApiLocation: <undefined>
Found a SWA workflow file: /Users/me/Work/staminair/.github/workflows/amy-url.yml
 - app_build_command: <undefined>
 - api_build_command: <undefined>
 - app_location: /
 - output_location: dist/staminair-web
 - api_location: api
 - data_api_location: <undefined>
Validating user workflow config (BEFORE):
 - appLocation: /Users/me/Work/staminair
 - outputLocation: /Users/me/Work/staminair/dist/staminair-web
 - apiLocation: /Users/me/Work/staminair/api
 - dataApiLocation: <undefined>
Validating user workflow config (AFTER):
 - appLocation: /Users/me/Work/staminair
 - apiLocation: /Users/me/Work/staminair/api
 - outputLocation: /Users/me/Work/staminair/dist/staminair-web
 - dataApiLocation: <undefined>
Workflow configuration:
- config:
  - appBuildCommand: <undefined>
  - apiBuildCommand: <undefined>
  - appLocation: /Users/me/Work/staminair
  - apiLocation: /Users/me/Work/staminair/api
  - outputLocation: /Users/me/Work/staminair/dist/staminair-web
  - dataApiLocation: <undefined>
 - files:
   - 0: /Users/cmoskovi/Work/staminair/.github/workflows/azure-static-web-apps-my-url.yml
Loading staticwebapp.config.json schema...
Schema loaded successfully from https://json.schemastore.org/staticwebapp.config.json
Compiling schema...
Reading content from staticwebapp.config.json...
Parsing staticwebapp.config.json...
Validating staticwebapp.config.json...
File validated successfully. Continuing with configuration!
Content parsed successfully

Found configuration file:
  /Users/me/Work/staminair/src/staticwebapp.config.json

Deploying project to Azure Static Web Apps...
Fetching release metadata for version: stable. Please wait...
 - version: stable
 - buildId: 1.0.023121
 - publishDate: 2023-05-01T20:32:05.431065Z
- files:
 - linux-x64:
   - url: https://swalocaldeploy.azureedge.net/downloads/1.0.023121/linux/StaticSitesClient
   - sha: 99c8b876922587ee0729d103ba5509ae88ec6b457c2d7d7bf69da26b1428ef6b
 - win-x64:
   - url: https://swalocaldeploy.azureedge.net/downloads/1.0.023121/windows/StaticSitesClient.exe
   - sha: 7c24aa28e7e9758a08ee6a33fa085e46d4b92101b5396e78a1eba218853aff76
 - osx-x64:
   - url: https://swalocaldeploy.azureedge.net/downloads/1.0.023121/macOS/StaticSitesClient
   - sha: cf2d799edcd87aeb4e9cab83bf8906770c1d05277130131740b50a95e31786f7
Local client binary is up to date. Skipping download.
Deploying using /Users/me/.swa/deploy/1.0.023121/StaticSitesClient@1.0.023121
Deploying using the following options:
- env:
  - SWA_CLI_DEBUG: silly
  - SWA_RUNTIME_WORKFLOW_LOCATION: /Users/me/Work/staminair/.github/workflows/my-url.yml
  - SWA_RUNTIME_CONFIG_LOCATION: /Users/me/Work/staminair/src
  - SWA_RUNTIME_CONFIG: /Users/me/Work/staminair/src/staticwebapp.config.json
  - SWA_CLI_VERSION: 1.1.2
  - SWA_CLI_DEPLOY_DRY_RUN: false
  - SWA_CLI_DEPLOY_BINARY: /Users/me/.swa/deploy/1.0.023121/StaticSitesClient@1.0.023121
  - DEPLOYMENT_ACTION: upload
  - DEPLOYMENT_PROVIDER: SwaCli
  - REPOSITORY_BASE: /Users/me/Work/staminair
  - SKIP_APP_BUILD: true
  - SKIP_API_BUILD: true
  - DEPLOYMENT_TOKEN: <hidden>
  - APP_LOCATION: /Users/me/Work/staminair/dist/staminair-web
  - API_LOCATION: /Users/me/Work/staminair/api
  - DATA_API_LOCATION: <undefined>
  - CONFIG_FILE_LOCATION: /Users/me/Work/staminair/src
  - VERBOSE: true
  - FUNCTION_LANGUAGE: node
  - FUNCTION_LANGUAGE_VERSION: 16
ℹ DeploymentId: b9af04a4-0cda-4465-885c-8828bbf5f8b5
ℹ Preparing deployment. Please wait...
ℹ Verbose logging enabled
ℹ Build timeout not specified, defaulting to 15 minutes
ℹ App Directory Location: '/Users/me/Work/staminair/dist/staminair-web' was found.
ℹ config_file_location: config file '/Users/me/Work/staminair/src/staticwebapp.config.json' was found.
ℹ Looking for event info
ℹ Could not get event info. Proceeding
ℹ Skipping step to build /Users/me/Work/staminair/dist/staminair-web with Oryx
ℹ Didn't find Oryx manifest file under location: /Users/me/Work/staminair/b9af04a4-0cda-4465-885c-8828bbf5f8b5-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.
ℹ Api Directory Location: '/Users/me/Work/staminair/api' was found.
ℹ Skipping step to build /Users/me/Work/staminair/api with Oryx
ℹ Function Runtime Information. OS: linux, Functions Runtime: ~4, node version: 16
ℹ Zipping Api Artifacts
ℹ Api Zip will be created from directory: /Users/me/Work/staminair/api
ℹ Api Content Hash: 2e2c270ece0041a2bcf0c02e3ed81cdb
ℹ Done Zipping Api Artifacts
ℹ Zipping App Artifacts
ℹ App Zip will be created from directory: /Users/me/Work/staminair/dist/staminair-web
ℹ Done Zipping App Artifacts
ℹ Uploading build artifacts.
ℹ Finished Upload. Polling on deployment.
ℹ Status: InProgress. Time: 0.0734141(s)
ℹ Status: InProgress. Time: 15.1685367(s)
ℹ Status: Succeeded. Time: 30.2377884(s)
ℹ Deployment Complete :)
ℹ Thanks for using Azure Static Web Apps!
✔ Project deployed to https://my-url.azurestaticapps.net 🚀

me@myMac ~/Work/staminair (master) $ httprepl  https://my-id.azurestaticapps.net
(Disconnected)> connect https://my-url.azurestaticapps.net
Using a base address of https://my-url.azurestaticapps.net/
Using OpenAPI description at https://my-url.azurestaticapps.net/swagger.json
For detailed tool info, see https://aka.ms/http-repl-doc

https://my-url.azurestaticapps.net/> ls
.   []

Ryan Hill 30,281 Reputation points Microsoft Employee Moderator

2023-05-31T18:36:43.27+00:00

Hi @Christopher Moskovitz ,

should have the azure functions showed up as a resource in the portal even if they were managed?

No, you won't see them under functions because it's managed resource as part of the static web app. Where you will see it is on the API blade of your Static Web App Resource.

I ran swa deploy .\dist\angular-project\ --api-location .\api\ as well and I can hit the API endpoint by browsing to it. The project is a File -> New Angular project in Visual Studio and using VS Code to add a Typescript function.

I don't think ls will work unless you have an Open API spec like swagger being hosted. I've never done Swagger on a Node Azure function, so I'm not sure how to wire that up. But you should still be able to cd into your api routes and run get as follows:

Share via

404 static web app azure function TS

3 answers

Your answer