CODEWITHSUNDEEP
node.jsazureazure-web-app-service
micheal
micheal

Reputation: 177

Vue Frontend and Express backend on same Azure web app Service

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?

Upvotes: 1

Views: 1974

Answers (1)

Jason Pan
Jason Pan

Reputation: 21997

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.

Upvotes: 1

Related Questions