1

I have built a web app that has a Vue front-end and an express back-end.

I am trying to host these on an Azure Web App Service but I am a complete novice with Azure. I have gotten the web app working fine when I place the Client side in one web app and the Server side in a different one. I want to have both running in the same web app. From researching online it seems that I need to go to:

my web app-> configuration-> path mappings ->Virtual applications and directories.

I created a new application with Virtual Path "/app" and physical path "site\app". I deployed (using visual studio code) my back-end to my azure web app and thus this sits inside wwwroot. In filezilla I create a new folder in the site directory called "app" and paste in my built Vue client side. However, when I try to navigate to www.myapp.azurewebsites.net/app I am not presented with the expected Vue index.html rather a 404. If I just navigate to www.myapp.azurewebsites.net/ I get the default route from the server side as expected.

What am I doing wrong?

micheal
  • 167
  • 2
  • 11

1 Answers1

1

When creating a webapp, please choose Windows operating environment, because currently choosing Linux does not support Virtual Application and directories.

The directory structure should be like below.

enter image description here

Setting in portal.

enter image description here

For more details, you can refer my answer in another post.

Jason Pan
  • 15,263
  • 1
  • 14
  • 29
  • Thanks for the answer, I am using windows but I am still confused. How can I deploy the API backend into that specific directory? I am using the Azure addon for visual studio code (maybe I should not be using this?). When I click to deploy from here it does not give me an option for where exactly to put the backend, instead all of it is placed into the wwwroot directory? – micheal Aug 11 '20 at 14:13
  • First, I think the operations of virtual applications are not convenient. Maybe you can deploy you main apps by vscode, and deploy virtual application by FTP. Second, I suggest you set your backend api project as main app, and put your vue project as virtual application. So you can monitor and analysis the application . – Jason Pan Aug 11 '20 at 19:02
  • @micheal You can use vscode to deploy your backend project, and use FTP tools to upload your frontend project. – Jason Pan Aug 14 '20 at 05:06