quick start about combination between azure static web apps and azure functions

Satoshi 21 Reputation points
2022-10-24T01:00:08.037+00:00

Hello ! (^o^)
According to the quick start below, I tried to combine Azure static web apps and API made with Azure Functions.
https://learn.microsoft.com/en-us/azure/static-web-apps/add-api?tabs=vue

The github repogitory of azure static web apps was made from Vue.js template. So I forrowed vue.js tab in the quick start.

I alomost followed this quick start, but errors like 1 and 2 below occurred on the web application side and github actions.

  1. Even if you access https://<random string>.azurestaticapps.net/ , that has been created, the screen is blank and nothing is displayed.
    On local, I'm able to receive the string from the API and display HTML that includes that string .( "Hello from the API" is displayed.) Next, when calling the api alone (https://<random string>.azurestaticapps.net/api/message) ,
    It says Function host is not running.

Even if you check the Azure Portal, it seems that resources related to Azure Functions have not been created.

  1. The Build and Deploy Job task is successful, but in the Store Reports part described in playwright-onDemand.yml , the message Action failed with not found deploy key or tokens occurs.

It is only difference between the quick start and what I do that I skipped the section "Add API location to workflow". Because from the begining, there is a description about api_location, in around line 31, like this.

api_location: api # Api source code path - optional

It's may be superfluous, a part of my environment are below.
SKU : Free
Region : EastAsia
macOS Catalina 10.15.7
Chrome 106.0.5249.119

Please help me. I'm Japanese so please excuse my terrible English.

Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
968 questions
{count} votes

Accepted answer
  1. VenkateshDodda-MSFT 21,651 Reputation points Microsoft Employee
    2022-10-28T10:56:44.36+00:00

    @Satoshi Thank you for reaching out to Microsoft Q&A. Apologizes for the delay and inconvenience caused any on this.

    To reproduce this behavior, I have created a static web app and added an HTTP function by following this documentation steps add-api. We are able to build, run and test the app with locally and from the portal successfully without any issues.

    1. While deploying the static webapp to azure then you need to update the api_location to api then only the backend managed api function will get deployed and all the incoming requests to SWA will be routed to /api/message and the content in the index.js under the api folder will be served in the browser. Since you are missing to add api_location to api while deploying to azure using github action that is the reason you were landed with blank page. Refer to this documentation for more information about the api_location and api support in static webapps.
    2. The Build and Deploy Job task is successful, but in the Store Reports part described in playwright-onDemand.yml , the message Action failed with not found deploy key or tokens occurs. --> I have checked with internal team they confirmed that we can ignore the error with running the playwright yamls.

    Feel free to reach back to me if you have any further questions on this.


0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.