Static Web App and Web App

Question

Static Web App and Web App

Tengku Aiman 120

Hello, I have several question about static web app, web app, postgresql, cosmosDB and virtual machine. To help my question, I have my architectural diagram on the system that will be developed.

Web Development

Is there any way that I can connect the static web app and backend? I have tried using the environment variables, and github secrets, but it seems that they cannot communicate
Right now when developing, I can connect the backend with the db and storage account, in the production, it is okay to use environment variable right?

Thank you for your help!!

0 comments

Answer accepted by question author

0 additional answers

Your answer

Answer 1

TP 156.6K Volunteer Moderator

Hi,

Q: Is there any way that I can connect the static web app and backend? I have tried using the environment variables, and github secrets, but it seems that they cannot communicate

A: One way to link your Static Web App (SWA) to your backend is to use the built-in capability to proxy requests to /api to your app service. SWA Environment variables are for managed functions (which you aren't using). For reference:

API support in Azure Static Web Apps with Azure App Service

https://learn.microsoft.com/en-us/azure/static-web-apps/apis-app-service

Basic instructions to link to your backend are below:

Navigate to your static web app in portal, on left, click on Settings -- Hosting Plan. Select Standard and click Save.

swa1

Click on Settings -- APIs. Click on Link next to Production.

swa2

Select Web App, select your Subscription, select your app service, select slot, click Link, similar to below screenshot:

swa3

Q: Right now when developing, I can connect the backend with the db and storage account, in the production, it is okay to use environment variable right?

A: Yes, it is okay to use environment variables. In your case you are using them in your app service. You may consider storing sensitive variables in key vault (from your diagram it appears you may already doing this).

Please click Accept Answer and upvote if the above was useful.

Thanks.

-TP

Tengku Aiman 120 Reputation points

2026-05-13T13:53:16.7933333+00:00

Thank you for your help. Will comeback here after trying tomorrow
Tengku Aiman 120 Reputation points

2026-05-13T13:57:16.0733333+00:00

What is the differences if I am using environment variables and connecting them all in a vnet?
TP 156.6K Reputation points Volunteer Moderator

2026-05-13T16:33:25.0133333+00:00
What is the differences if I am using environment variables and connecting them all in a vnet?

You can have your backend app communicate via VNet to storage and db instead of via public endpoints. VNet integration feature requires at least Basic SKU app service, which is paid. I'm assuming you are currently using free tier since you are student, so for now I would just use public endpoints.In regards to some of your other questions:

You may switch back to SWA Free hosting plan to stop accruing charges, however, before you switch you will need to unlink your app service backend via APIs blade. There is no stopping SWA

You need to put your backend APIs under /api path. For example, say you have GetProducts and GetOrders on your backend. They need to be /api/GetProducts and /api/GetOrders so that when they are called from SWA they will be found, since everything routes via /api prefix

Typically user would authenticate to SWA and this will be used by your backend. This is another feature of Standard hosting plan

Please experiment with various features and then create new questions for specific issues you may have. For example, say you get it working, but something with authentication isn't functioning the way you expect. Create a new question here on Q & A explaining details, what you expect to happen, what is actually happening, etc., and someone will respond.

Thank you.

Answer 2

Praneeth Maddali 9,520 Microsoft External Staff Moderator

Hi @Tengku Aiman

Thank you for your message and for sharing the architecture diagram — it’s really helpful to see the full picture.

Is there any way that I can connect the static web app and backend?

Yes, you can connect your Static Web App to the Web App backend effectively. The reason environment variables and GitHub secrets didn’t allow direct communication is because Static Web Apps are static hosting by default, and client-side code can’t easily call a separate backend without proper configuration.

Recommended Solution: Use Azure Static Web Apps’ “Bring Your Own API” feature. This links your Web App as the backend and automatically proxies requests (e.g. fetch('/api/...')) from the frontend to your backend — no CORS headaches and much cleaner.x`
How to set it up:

Go to your Static Web App in the Azure Portal.

Navigate to APIs in the left menu.

Under the Production environment, click Link.

Select Web App and choose your backend App Service.

Click Link.

Once linked, update your frontend to call relative paths like /api/your-endpoint.

Reference:

https://learn.microsoft.com/en-us/azure/static-web-apps/apis-app-service

https://learn.microsoft.com/en-us/azure/static-web-apps/apis-overview

Using Environment Variables in Production

Yes, it is perfectly fine and very common to use environment variables (App Settings) in production for your Web App backend.

However, for better security with PostgreSQL, Cosmos DB, Storage Account, etc., I strongly recommend combining App Settings with Managed Identity (as shown in your diagram with aslaw-kv and aslaw-MI). This avoids storing sensitive connection strings in settings whenever possible.

You can continue using environment variables during local development and switch to the same approach in production.

Reference :

https://learn.microsoft.com/en-us/azure/app-service/overview-managed-identity?tabs=portal%2Chttp

If the answer is helpful, Please do click "Accept the answer” and Yes, this can be beneficial to other community members.

If you have any other questions, let me know in the "comments" and I would be happy to help you

Tengku Aiman 120 Reputation points

2026-05-13T13:53:46.7533333+00:00

Thank you for your help. Will comeback here after trying tomorrow
Tengku Aiman 120 Reputation points

2026-05-13T13:56:16.4333333+00:00

I have a question. To upgrade to standard plan, there is payment. Currently I am a student and have a limited budget. If I stop the app after testing, will it stop the billing also?
Praneeth Maddali 9,520 Reputation points Microsoft External Staff Moderator

2026-05-13T14:05:33.99+00:00
Hi @Tengku Aiman

Thanks for your question! I totally understand — being a student with a limited budget is tough.

Short answer: Simply stopping the app will not stop the billing. The Standard plan for Static Web Apps is a flat monthly fee (around $9/month per app). It continues to charge even if the app is stopped or has no traffic.

Good options for you:

Recommended: Upgrade to Standard only when needed for testing, then downgrade back to Free plan right after. This stops the charges immediately.

If you no longer need the app >delete it completely to avoid any future costs.
Tengku Aiman 120 Reputation points

2026-05-13T14:09:52.1566667+00:00

Understand. So I can upgrade to test, then immediately downgrade after that right?

Also, in the API Link, do I need to put the base backend url or every backend endpoint url? Like if I have 10 endpoints api (https://backend.com/a/1, https://backend.com/a/2) do I put all 10 or like only the (https://backend.com/a)?
Praneeth Maddali 9,520 Reputation points Microsoft External Staff Moderator

2026-05-13T14:19:05.6633333+00:00
Thanks for your questions

Plan upgrade and downgrade

Yes, you can upgrade to the Standard plan to test and then downgrade afterward if needed.

Just keep in mind that features like“Bring Your Own API” (linked backend) are only available on the Standard plan, so once you downgrade, that integration will no longer be active.

What to configure in API Link (very important clarification)

You don’t need to configure individual API endpoints or base URLs manually.

When you link your backend (e.g., App Service), you are linking the entire backend resource, not specific paths.
Tengku Aiman 120 Reputation points

2026-05-13T14:23:47.4166667+00:00

Understand, thank you for the clarification. Sorry for the another question.

Example, my login will send to https://backend.com/b/a1 and my fetch from https://backend.com/c/k1z After linking using APIs, it should automatically works right?
Tengku Aiman 120 Reputation points

2026-05-13T14:48:21.3433333+00:00

Also sir, for backend to the db amd storage account, is there any difference if I connect them in a vnet instead of environment variables?

Share via

Static Web App and Web App

0 additional answers

Your answer