What's the secret sauce for getting Functions API to work with static web site?

Take the following considerations:

The Secret Sauce: Hosting Together + Correct Routing
1. Functions Must Be Inside the Static Web App Project
Azure Static Web Apps expects your API to live in a folder named api at the root of your repository. This is how it knows to bundle and deploy your Functions alongside your static site.
Your structure should look like:

/root
  /api
    GenerateImage.cs
    function.json
  /static
    index.html
    other pages...
  staticwebapp.config.json

If your Functions project is running separately (like on localhost:7071), your static site won’t know how to route to it unless you link it manually or host them together.

2. Use Azure Static Web Apps CLI for Local Testing
To simulate the full environment locally (static site + API), use the Azure Static Web Apps CLI (swa).

npm install -g azure/static-web-apps-cli
swa start ./static --api ./api

This will:
•    Serve your static site
•    Proxy /api/* requests to your Functions
•    Run everything on a single port (e.g., http://localhost:4280)
Now your <img src="/api/image/123"> will work as expected.

3. Deploying to Azure
When you deploy to Azure Static Web Apps:
•    Your GitHub Actions or Azure DevOps pipeline should include both the static site and the API folder
•    Azure will automatically host the API under /api/* and route requests accordingly