How to connect two webapps

Question

I have two folders backend and frontend, I deployed these folders into two azure web apps with the same app service plan and I want to communicate these web apps with each other. Is this a correct way to host a website or any better way to do this?
My backend app is in python, while the frontend uses( HTML , CSS,Bootstrap, JQuery) for the screens.
I have tried the VNET integration to frontend , and in backend I added private endpoint to the private DNS zone and this private DNS zone is integrated with the VNET, but didn't work.

Answer 1

Tutorial: Authenticate and authorize users end-to-end in Azure App Service is really a good guide for connected a front-end app with a backend API app. But to answer your question with regards to using VNet integration and private endpoints, it really depends on what endgame is. If you want to restrict what traffic can hit your backend, that's where VNet integration and a private endpoint comes in to place.

But to get you started, your front-end should use a simple HTTP client (e.g. axios, jQuery ajax) to hit your https://{your-backend-app}.azurewebsites.net. Make sure you have CORS enabled on your backend app service to avoid cross-origin errors.

Since your API is Python based and you're using simple HTML/jQuery for your front end, I suggest giving Static Web Apps a look. You can add your API alongside your front-end and deploy as a single package where you configure the api_location setting of the Static Web App Service to the folder of your API.

   ├── .github  
   │   └── workflows  
   │       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml  
   │  
   ├── api  
   │   ├── message  
   │   │   ├── function.json  
   │   │   └── index.js  
   │   ├── host.json  
   │   ├── local.settings.json  
   │   └── package.json  
   │  
   └── (folders and files from your static web app)